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 landing page made using CSS Grid, Flex and ES6+ features

Marcin 180

@marcin10lw

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


Hi everyone! This responsive news landing page has been a great challenge and learning opportunity. I found the mobile menu functionality to be the most difficult part of this project, particularly its animation. Sometimes when the menu is opened it shakes a little. I guess it might be caused by animating method in news-page-react/src/Menu/styled.js and news-page-react/src/Overlay/styled.js. If there is anything I could improve the feedback is welcome!

Community feedback

@aashabul

Posted

  • Hi, Everything is good. Just make the mobile menu position fixed or absolute so that when we scroll by letting the mobile menu opened it does not disappears to the top.
  • The page is not shaking. You can delay the animation time by some seconds so that it looks smooth.

If you need any help just reply. All the best!

Marked as helpful

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