Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

Links

• Solution URL: (https://github.com/travisdk/intro_section_with_dropdown)
• Live Site URL: (https://travisdk.github.io/intro_section_with_dropdown/)

My process

Considering wether it's best to use Flexbox or CSS Grid for the overall layout of the site. For now decided to go with a mix, Flexbox for the header/nav part and Grid for placement of all other main elements on the page

Built with

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

Useful resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

• https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#using-picture

• https://discourse.webflow.com/t/how-do-i-darken-the-rest-of-the-page-behind-a-dropdown-menu/17492

Author

Henrik Juhl