Intro Section With Dropdown Navigation using Flexbox, Grid & SCSS

Hello there 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🏷️:

To clear the Accessibility report:

The error message "ul and ol must only directly contain li, script, or template elements" typically appears when there is invalid HTML markup in the code. This error indicates that either an <ul> or <ol> element contains an element other than <li>, , or <template> elements as direct children.

• If you need to include other types of elements within a list, you can nest them within an <li> element.

• Use a validator tool to check your HTML code for other possible errors.

Here's an example of valid HTML markup for an ordered list:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

And here's an example of valid HTML markup for an unordered list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

By ensuring that your HTML markup follows the specifications, you can avoid errors and ensure that your web page is accessible to all users.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

Great job in completing the challenge successfully! Your solution looks good overall, the design implementation is simple neat. Both mobile and desktop view respond well to resizing.

Few suggestions if you want to take the challenge a little further: you can let users close the dropdown hover menus when clicking outside, basically anywhere on the page, when dropdown menu is open. A common practice on many websites. Similarly u can let the nav mobile menu close when user clicks anywhere on the page, off the menu. You can also add an transparent, slightly dark overlay to the whole page when menu is open.

Hope this was helpful!