Intro Section With Dropdown Navigation using Flexbox, Grid & SCSS
Design comparison
Solution retrospective
Hey, Actually, It wasn't that easy because I haven't done navigation bar and offcanvas earlier. That's why code isn't that clean. Feedback and Advices are welcome!
Community feedback
- @Finney06Posted over 1 year ago
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
andol
must only directly containli
,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>
,<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!
1 -
- @visualdennissPosted over 1 year ago
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!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord