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

WEB 3.0 News Page

ianwilk20 220

@ianwilk20

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


What are you most proud of, and what would you do differently next time?

I'm most proud that I learned how to use the Grid layout for the non-mobile screen size. Next time, I would probably take more time watching tutorials on the subject rather than just looking up watch I need to complete the challenge.

What challenges did you encounter, and how did you overcome them?

The biggest challenge I encountered was the responsive navigation bar that goes from standard page links on non-mobile devices to a hamburger menu that opens upon being pressed on mobile devices.

I overcame this challenge by looking a tutorials on YouTube on how other people approached designing responsive navigation bars.

What specific areas of your project would you like help with?

I'm open to any feedback :)

I don't particularly like that the three images with links to articles at the bottom of the page resize awkwardly. I wanted to keep the aspect ratio of the images so I set their margin to auto; however, when the browser is resized between 800px and 1920px the text beside the images grows bigger than the image at some points and looks funny. I almost needed the images to grow in size proportional to the text's growth because of the screen shrinking due to resizing.

Community feedback

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