vanilla CSS, JS dropdown navbar

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Ko Loy Yee•50

  @koloyyeePosted over 2 years ago

  @elaineleung Thanks, Elaine, I still haven't gotten used to the mobile-first approach, as I am working towards the end of this project I realized I should have done that in the beginning.

  I will definitely look into Kevin's repo, so as his tutorials, thank you for your comment again!

  I am thinking of refactoring it as I found some more bugs as well!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @koloyyee One suggestion I have with writing cleaner code is to write more descriptive names for classes and also to use classes as your selector instead of element (e.g., .nav instead of nav). For instances, I saw in your CSS that you had used both, but it wasn't clear to me what the .nav is doing. You could try writing something like, .nav_container, or what I did was, I wrote .nav_inner, which helped me to quickly identify the class and also to know what it's doing.

  I also took a while to get used to the mobile approach, and now I can't go back :P

  Marked as helpful

  1