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

News homepage - HTML, SASS, JS

@aashabul

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I am confused about the breakpoints of different viewport. In this exercise I covered two types of viewport (1440px and 375px). But what about other breakpoints?

  • In the JS file I just changed the class names every time clicking on the mobile menu bar. Is there any organized and shorter way to do this?

Community feedback

Account Deleted

Hi, in a real job, the designer must provide a design for every breakpoint, this case is just for learning purposes. To reduce code, create two individual buttons: the hamburguer, inside the nav-bar and the close one, place inside the side menu, everyone launch a respective function; and classList is a good choice, just adding inline styles is not recommended. If you have more questions let me know

Marked as helpful

1

@aashabul

Posted

@FakeAstronauta Thank you. That's a relief that breakpoints will be given. Sure, I will let you know.

0

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