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 News Homepage

@Akshay-Tarde

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


It was nice to do DOM manipulation using JS. This challenge tested my planning of the layout. I tried to abide by the DRY principle while writing the CSS for this page.

Any feedback would be welcome!

Community feedback

@Karrar-Hussein

Posted

Beautiful job, one thing to take notice of is that instead of changing the body element background color when opening the hamburger menu you could get a better shade by creating an overlay "empty div" with position fixed and size it so that it covers the whole screen and give it a black background color with an alpha value "smth like 0.5 👌" and set its display property to "none", then you can attach an event listener to toggle the overlay display property whenever you click the nav button.

also, don't forget to give the sidebar a z-index higher than the overlay 😊

Marked as helpful

0

@Akshay-Tarde

Posted

@Karrar-Hussein I appreciate the feedback Karrar. Really great tips. I will have fun implementing them. Thanks a lot!

0

@Katleho-codes

Posted

This is very good! Keep it up!

1

@Akshay-Tarde

Posted

@Katleho-codes Thanks for the kind words, Katleho!

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