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 design: mobile first.

P
roswell 30

@welpmoz

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 is my second challenge solved, any recommendation is apreciated

Community feedback

Maxime 430

@maxime927

Posted

Hi Roswell, Hope you are fine ! First, congratulations to have done this challenge. I have some tips to help you to improve your progress and this solution:

  • Concerning your blocks and width, consider the max-width of the desktop design as the limite (1110px) and imagine 3 col in that to set the width of each box as a calculation width: calc((100% / 3) * 2); for the main content for exemple

I can advise you to use the chrome extension PerfectPixel as well, it will help you to compare your solution with the design file (png/jpg) and you'll be able to add some specific adjustments to be closer to the design.

Just a little thing, you forgot the font-family for the H1 title :)

Keep going in that way!

Hope it helps

Maxime

Marked as helpful

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