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

intro-section-with-dropdown-navigation with js, html, and css

#accessibility#animation

@frank1003A

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 had this weird issue with the hover dropdown container not applying z-index properly and not stacking as designed. I'll look into it later, but any idea on what's even going on there will be appreciated

Community feedback

P
Josh 400

@burrijw

Posted

HI 👋🏻 Nice start!

You've got some HTML/a11y issues:

  • The nav isn't keyboard operable. Make sure you follow patterns like this APG example when implementing interactive widgets and things.
  • I don't think <aside> is the right element to use in this case. Don't let the visual form of a component dictate the HTML elements you choose. Just because a mobile navigation drawer is a sidebar, doesn't mean you should use <aside> just because it's meant for "sidebar" content. Think about the semantics. You can just use the <nav> without nesting it in another landmark. All you really have on this page for landmarks are the <header>, <nav>, and <main>.
  • Consider if you really need to duplicate the navigation in your HTML. Can you just style it differently without duplicating the markup?
  • Focus styles could be better. Right now what you have is hard to see when the black "Learn More" button is focused. Maybe offset the focus ring.
  • I'd place those image/logos at the bottom in a list.

Good stuff. Keep it up!

1
P
alexander 1,180

@alex931d

Posted

hello great solution i notice a few issuses now im not able to see your code bc your github link is not working but i still notices a few things the mobile menu is still showing even outside of mobil view if its open

1

@frank1003A

Posted

@alex931d I apologize my GitHub was still in private and I wasn't aware. As for the mobile menu, I will check that out. I wasn't checking the designs with a mobile so I guess there would be errors there.

0
Mukwende 1,370

@mukwende2000

Posted

You have set the height of the dropdown container to 0 on small screens, no wonder its not showing

0

@frank1003A

Posted

@mukwende2000 Thanks for the heads up, by default the height of the dropdown container is set to 0, and this changes with the click of the dropdown button. I will check this out now.

1

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