vanilla CSS, JS dropdown navbar

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Ko Loy Yee, I also just completed this challenge so I thought to give you some feedback. First off, good attempt at putting it together, especially the dropdown navs; I really like the animation on the hamburger menu. Some things to note:

  • In the desktop view, the navigation at the top should be sitting on the same row as the logo, as in, they should be in the same container somehow. Once you rework your HTML, you can add flexbox on the div and that should help align things.

  • Sometimes when I click on the dropdown it doesn't open right away, and I'd need to click it again. There might be something in your JS that you should look into.

  • In the mobile slide navigation, the dropdown navigations don't need any drop shadow

  • I notice that you seem to have started with the desktop view in writing your CSS; you can try using a mobile-first approach, and see whether that is a bit easier.

  About how to write cleaner CSS, I think it helps to just be consistent first and to also keep in mind the nature of CSS, namely inheritance and cascading. That would save you from writing a lot of redundant code. It helps to read others' CSS, as that would give you an idea of what they're doing and how readable their code is; it also helps to know what terms that are commonly used, such as wrapper and container. I often would look at repos of experienced developers and see how they structure their CSS (I highly recommend checking out Kevin Powell's repos). Overall, practice is most essential, as there will be many mistakes made, and over time you'll know what works and what doesn't :) Good luck!

  12

  Marked as helpful