saminstein / Huddle-Landing-Page-

This is my solution to the Huddle landing page on Frontend Mentor

Frontend Mentor - Huddle landing page with single introductory section solution

This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the page depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Github Live Site

My process

• For this project i styled for Mobile first with flexbox layout and then for the desktop design, i used grid to divide into 2 columns

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• I learnt how to use Css Grid to style the Desktop layout
• I also learnt how to apply CSS reset!

Continued development

I would like to refine and sharpen my skills in Grid and flexbox as i am still not comfortable on using those techniques well yet. I will also will love to know more on applying CSS reset to a style sheet

Useful resources

• Modern CSS Reset - This helped me in understanding the importance of CSS reset. I really liked this pattern and will use it going forward.
• Css Grid Tutorial - This is an amazing YouTube channel which helped me understand Grid with redefined insights. I highly recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @saminstein
• Twitter - @saminsteins