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 with Flexbox and Sass

Mark Cates 110

@mscates

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I started out using css grid for the middle section, but I couldn't quite get it to work. I finally used relative and absolute positioning with percentage values for the widths and the responsiveness was much easier . I am sure grid probably can do this easier, but I am not experienced enough yet to understand it. I used background position for the color dots backgrounds, but couldn't get it quite in the correct spot. not sure what the trick is there. I loved this exercise though. It was so much fun.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi

Here's a few improvement suggestions

  • the logo is the most important content on the whole page and youve currently hidden it from search engines and screenreaders. That alt cannot be left empty
  • the app image is arguably really important content too, but the image description is empty
  • could some other images in this be background images perhaps? Just an idea
  • the email address in the footer needs to be a mail to link
  • the social media icons are never just icons, you'd expect to click them, right? So they need to be interactive elements (anchor tags) that also have a label available to the accessibility api (eg. Sr only text)

Good luck with it

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