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

Responsive Intro Section with Dropdown Navigation

Pogen 60

@IPogenI

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 tried to maintain good code flow. Let me know about anything that I can improve. I appreciate and C and C's. Thank you

Community feedback

Account Deleted

Hello Pogen, good work here, I just would like to suggest the following. When manipulating the DOM is a best practice do not set all the styles values directly by assignment operator. In small projects you can keep track, but the bigger the projects it gets the more complicated will be to keep separated JS and CSS.

Instead of this: document.getElementById("sideNav").style.width = "60%";

Use this: document.getElementById("sideNav").classList.add("someClass")

In your CSS this class should look like this someClass:

.someClass {
   width: 60%;
}

Also I would like to point to the Frontend Mentor report that is generated after you submit the challenge. There are good hints related to HTML structure and Accessibility.

Hope this is useful and happy coding!

Marked as helpful

1

Pogen 60

@IPogenI

Posted

@alexcumplido Thank you so much for the feedback! I will surely keep in mind your tip the next time I do DOM manipulation. Also thanks for pointing out the accessibility errors that i got.

1

Account Deleted

Great Pogen, you’re more than welcome, happy coding and see you around : )

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