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 usign react, tailwindcss and vite

P

@peterramirez18

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


Any suggestions on how I can improve are welcome!

Community feedback

Account Deleted

Hi, investigate about the 'position: fixed' to keep the mobile menu always on top when scrolling. Cheers for complete the challenge

Marked as helpful

0

P

@peterramirez18

Posted

@FakeAstronauta thank you very much, forget that!. Check now

0
Maxime 430

@maxime927

Posted

Hi Peter, hope you're fine :) I can give you some tips to improve your solution if you agree :

  • Concerning your responsive, it should be better in my opinion to just keep a max-width for the container and let it be fluid to not have a lot of breakpoints between tablet and big screen of laptop.

  • Be careful about font-sizes and spacings, it is very important to save the dimensions of the design to respect the work of the designers, i can advise you to use the chrome extension PerfectPixel With this, you'll be able to compare your solution with a png file of the Design and fix some issues to develop as close as you can.

Hope it helps...

Maxime

Marked as helpful

0

P

@peterramirez18

Posted

@maxime927 Thanks so much bro, that extension is so good, thanks for it. Check now the link preview.

0
Maxime 430

@maxime927

Posted

@peterramirez18 Yeahhh cool !! For the desktop there are just some colors and line-heights to adjust but it is really good.

And don't forget the mobile version ;) ( spacings, font-sizes, ...)

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