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 Main - Grid and Flexbox

@Shraddha-V22

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


Although I have built responsive websites, I found this one difficult. I used grid-template areas but I am unsure that It won't look good on screen sizes between 800px to 1400px. I want to know how I can fix that.

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Shraddha Vkarma! 👋

Nice effort on this challenge! 👏

A few things I'd like to suggest are,

  • Using padding to ensure that there is always a bit of space between the content of the page and the edges of the screen (as that space disappears when the width of the screen decreases in the desktop layout).
  • Making the "Read more" element a link (not a button), since it will likely navigate the user to another page when clicked.
  • I think you will have an easier time creating the layout for this page and making it responsive if you divide the page into smaller sections and create the layout for those first before assembling those sections into a larger layout. I see that you have done this somewhat, but I think you can further group the main image and the text content beneath it, and then use CSS grid to assemble the three main sections of the page. 😉 Take care to ensure that the layout doesn't appear broken and sections don't overlap when the width of the screen decreases. 🙂

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

2

@Shraddha-V22

Posted

@ApplePieGiraffe Thank you so much!😊 I made the changes you suggested! Happy coding!😄😄

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