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 using CSS Grid and Flexbox

@alfiemitchell123

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


  • I struggled with header/paragraph line breaks. I wanted to avoid using <br> tags as they don't respond well when resizing the browser. What other techniques do you use to wrap them correctly in their container?
  • With the top article section at the bottom of the page, I was unsure how to space them out evenly so that the right side of the third article is in line with the edge of the main grid container. What are the best practices for spacing out items evenly in a CSS grid?
  • The hamburger menu icon on the mobile site is not perfectly lined up horizontally with the logo. I had to add a margin-top of 7px to the icon for a 'hack' fix. What is the best practice for this?

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