Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
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 news webpage

@codingbeary

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


Any advice on how I can improve this project are welcome. :)

Community feedback

@JorgeAMendoza

Posted

Hello! Great attempt, the page is mostly responsive and your solution matches the design.

Some things I believe that can be improved upon:

  • Starting on screen-width 425px, your mobile menu "hamburger icon" is rendering along with the desktop navigation list, causing an awkward layout. I would look back at your media queries and ensure that elements are hidden away properly.
  • If a user opens up the mobile menu and expands the screen size, the "close-menu" icon appears next to the logo past the screen width of 425px. I would recommend implementing an event listener for window resizes that ensures to properly remove/hide the mobile nav menu on larger screens.

Please feel free to checkout my solution to this project for reference!

Marked as helpful

1

@codingbeary

Posted

Thank you so much! :) @JorgeAMendoza

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