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 landing page using CSS Grid and Flexbox

P

@MattPahuta

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@tarasis

Posted

Hi Matt, congrats on your solution. First I'm impressed you built out the design system as an html page. Looks identical to my memory of the figma file. Might help some out who want to take a stab at the challenge themselves.

I like that you added some .sr-only bits for the social icons, although I don't think the brackets are needed :)

Interesting seeing font sizes categorised by their font weight. I think I've seen Kevin Powell doing that too.

Good to have both a btn class and then specific iOS and Android buttons.

I would suggest if you are going to do multiple media queries as you have, to use a variable for the width so you don't have to repeat the numbers. Could lead to a subtle difference if you use 43 for most, then one thats 42 or 44.

Looking at responsive design mode I'd suggest breaking at 1200px so the fullstop isn't over the top right image. (Rather than 1153px) That said, your build is MUCH more responsive than mine. I built the middle area the wrong way around. So looks pretty poor from Tablet to Desktop sizes.

Anyway congrats, and all the best 👨‍💻

Marked as helpful

0

P

@MattPahuta

Posted

@tarasis Thanks, Robert! Great feedback I will definitely take to heart and I really appreciate you taking the time. Cheers!

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