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 solution

@incihuseynli

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@hassaneljebyly

Posted

congrats on finishing this project looks solid and responsive, one thing I noticed is when you click to close the nav then resize to desktop It stays closed, that's because your javascript changes the style attribute, instead what I would suggest is writing a class to do the opening and closing of the nav via nav.classList.toggle("open")

nav {
 transform: translateX(0%);
}

.open {
 transform: translateX(200%);
}

this way transform is removed from the element. another thing is when you resize the window you can see the nav slide to right when it hits the breakpoint, that's because you have transition: 0.6s; changing it to transition: transform 0.6s ease; solves the issue, or you can just stop animations during window resizing.

this might be useful : Responsive navbar tutorial using HTML CSS & JS

good luck :)

Marked as helpful

1

@incihuseynli

Posted

@hassaneljebyly Thank you so much for great advice and resource :)

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