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 using basic CSS, HTML and JS.

@camilord-end

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


Since the page was displayed at both 375px and 1440px, where should i set the media query, i did it at 750px but had no clue, should i just keep the mobile desing till the screen was 1440px ? or is there a recommended breakpoint?

Community feedback

Maxime 430

@maxime927

Posted

Hi Julian, Hope you are fine, I have some tips to help you to improve you progress and this solution:

  • Concerning your question, because there is no indication about the tablet dimension, I would keep the mobile design (until 768px if you have the desktop first approach, until 1023px if you have the mobile first approach) to have the same design for portrait Tablet and add an exception on the main content picture to have the desktop image for 768px.

  • I see some issues about colors, spacings and font-size so I can advise you to use the chrome extension PerfectPixel as well, I advise this extension a lot to help you to compare your solution with the design file and add some adjustments to be the closer to the design.

Keep going!

Hope it helps

Maxime

Marked as helpful

0

Account Deleted

Hi; this exercise was focused only in two sizes, so my advice is don't worry for the other breakpoints, just make the page work with the two designs provided. In a real job, the designer must provide the designs for every size of the screen.

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