Submitted about 1 year ago

Suite landing page

Christian Palacios• 300

@codepalacios

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Suite landing page

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, media queries are a bit difficult for me and I would really appreciate advice on best practices on this or alternatives to better ways to use them in this project for a better user experience.

Regards :D

Community feedback

Ivan Netreba• 210

@ivannetreba

Posted about 1 year ago

Wow so close to design! Very good! You use many nestings. Can it make maintaining code more harder?

Marked as helpful

Christian Palacios• 300

@codepalacios

Posted 12 months ago

Hello @ivannetreba , thank you for your comment, it is very much appreciated 👍. It is true that I used a lot of nesting that could be optimized to make it easier to maintain the code and I inform you that thanks to your comment I have already made another project where I make code that is simpler and easier to maintain 😃. Thanks for your help and greetings 👋.

Alexandra• 510

@Alexandra2888

Posted about 1 year ago

Hi! Congrats for finishing challenge! Your solution is very close to the design! In general it's better to start coding for mobile first (that means 0-767px) after increase for tablet (min-width:768px) and after that for desktops (width for desktop in general is provided by the design, can be 1024px, 1200px etc). Don't try to keep everything "in place", you can't predict where every px will stay on a user's screen. As Kevin Powell says "px perfect website doesn't exist". A user can see your page from a Nokia 3310, another from a 50 inch screen and another will navigate your site using a screen reader so you can only predict how everything will look. Happy coding and don't stress :D

Marked as helpful

Christian Palacios• 300

@codepalacios

Posted 12 months ago

Hello @Alexandra2888 , thank you very much because you have helped me a lot to simplify when coding my projects thanks to the recommendations in your comment about breakpoints and they are very appreciated 👍. I already developed another project following your recommendations "the perfect px website does not exist" and it turned out to be easier 😃.

Greetings and happy coding 👋.

Please log in to post a comment

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