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

Fylo Dark Theme Landing Page using SASS and BEM

@joanpujol

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone, I hope you are doing well!

I have made some progress with this project. Although I feel I need to improve the way I use media queries.

How would you approach building this page mobile-first? Would you change the font-size and recalculate all the ems or is there a better way?

Thank you in advance.

Community feedback

@AgataLiberska

Posted

Hi @joanpujol, that looks nearly pixel-perfect, woww! Very impressive :D

I personally just use rems instead of ems or px, I just calculate the size off the base font size and don't have to worry about the font size on the parent element at all (I don't have much experience but I copied it from Jessica Chan and I'm going with it! Also recommend her videos where she works on some projects from here)

Font sizes is something I would look at in this project - because for some of the text the font size comes to 9.1px and for some to 9.8px which is very hard to read. Your base font is set to 14px and I wouldn't go below that at all. (And if you're using rems, that's super simple - it's 1rem or higher :))

One more thing - clickable elements, like buttons - they could really use some hover styles to indicate that they're buttons. And the links in the nav, both at the top of the page and in the footer should really be <a> tags, even though it's a one page project :)

Hope this helps :)

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