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 landing page master

#accessibility#angular#cube-css#materialize-css#jquery
OkeraM• 280

@OkeraM

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a lot of trouble with the footer and making my page fully responsive. If you guys have any tips on how I can fix a lot of the issues, feel free to drop some tips.

Community feedback

Philemon Bahati• 560

@bahati7

Posted

Hello,

  • I think this article can be useful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • to avoid accessibily uses, try to use semantic html (header, main, footer...)
  • try to use relative units like %, rem, em,.. instead of px
  • try until it's perfect

Good luck:)

0

OkeraM• 280

@OkeraM

Posted

@bahati7 Ok, thank you for the suggestions.

0
Florin.Porut• 380

@zastar23

Posted

Use header, main, footer, don't use div's for landmark components, the images in the footer have a bad path to the img source, try and start working on mobile first design, it is easier because you don't have to worry so much about layout stuff(untill you get to bigger screens). Learn about rem, em, vh, vw, vmax and vmin, don't use fixed units (px).

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