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 (Scss + Js)

George 180

@GeorgeValentin

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


This one was slightly more difficult. I would like to know some feedback, especially how I could have structured the JavaScript part better and create the Mobile Overlay using the same HTML used for the Navigation Menu! Thanks!

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi George, it also took me some time to figure out how to work the overlay, and as a practice afterwards I wrote a simplified version of this site using a CodePen. It's a bit different to how I wrote my challenge, but in any case, it shows how you can use little code to make everything work. You can check out the overlay there: https://codepen.io/elaineleung/pen/poLpzge

As for the JS, it's quite a lot! I wrote mine in React so I can't exactly compare the two, but even with my CodePen, you can see that you don't need a lot of code (I just had 12 lines). For instance, instead of using add and remove on classList, you can try toggle instead. I think you'll find that when you don't need to add and remove the class, your code will shrink down by at least half. Also, I see that you used let instead of const variables for your DOM elements; since these aren't bound to change, you can use const instead, as that is the common practice.

Anyway, hope this helps you out!

Marked as helpful

1

George 180

@GeorgeValentin

Posted

@elaineleung Thank you for the feedback!

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