Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile responsiveSnap Landing Page using HTML, CSS, and JAVASCRIPT

#accessibility

@Heph-zibah

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am so happy with the completion of this project. This will be like the first mobile responsive project I will start from scratch and finish.

However, I realise I still have a lot to learn when it comes to best practices in HTML. When I checked the HTML validator, I saw that I came up with errors I couldn't rectify and the obvious one is putting <div> element inside <ul> element.

I will love pointers on how to go about this.

Thank you.

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Greetings, Oluwatosin Abigail Ogundeji! 👋

Good effort on this challenge! 👍

Here are a few things I'd like to suggest,

  • Perhaps making the elements that trigger the dropdown menus with more options in the header of the site buttons instead of links (since when they are clicked on, they do not take you anywhere yet, they simply display a menu).
  • As you mentioned, making sure to always wrap li elements in a ul element (not another element like a div, which will give you a warning for having invalid markup).
  • Maybe wrapping each button in the header of the site in a container with its associated popup menu. That will group them together in your code and may make it easier to style. 😉
  • Looking into using the aria-controls attribute on those buttons to show what areas/elements of the markup they control or affect. Learn more about that here. 😀

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

@Heph-zibah

Posted

@ApplePieGiraffe

Wow. You even included a link.

Thank you for taking out time to review the project. I will make sure to work on the suggestions giben.

I apologise for replying this late.

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@Heph-zibah

No problem! 😉

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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