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
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page with CSS

@T0m0re

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


One thing that always seems to confuse me is css media query. This project allowed me to use media query a lot but I hope I get to a point where I totally figure it out instead of guessing between min or max width for the page to be responsive.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hey @T0m0re!

Your project looks very good!

About media queries, I know how you feel. But I have something that helps me a lot.

I always use the mobile first approach. Always start a project by its mobile version.

Most projects here at Front-end Mentor have a 375px version and a 1440px version.

So I start creating the mobile version and once it's finished, I create a media query for the desktop version: @media (min-width: 1440px) . So this helps me understand that in order to the project show me the desktop version, it needs to be at least this wide.

Long story short, if you start by mobile version, you're gonna have to use min-width to create versions for bigger screen sizes. And if you start by desktop version, you're gonna have to use max-width to create versions for smaller screen sizes.

I hope it helps!

Marked as helpful

0

@T0m0re

Posted

Thanks you for this, will try this approach in my next project. @danielmrz-dev

1

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