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 with two column layout

@Alan77777777

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


Just practicing my skills, any feedback is welcome :)

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello, Alan Ramirez! 👋

Congratulations on finishing this challenge! 🎉

Here are some suggestions for improvements.

  • Import both font families at the same time. It is possible to import multiple font families at once.
  • Don't skip heading levels. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Not every image needs alt text. If the image does not provide any meaningful content, such as a decorative background, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
  • Avoid using !important. If you find yourself starting using it then it can be a good sign that there are specificity issues with the stylesheet.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.
  • Avoid nesting selectors unnecessarily. This was a mistake that I made when I first started using Sass. As a result, when I came back to try to refactor my old projects, I had to rewrite the entire stylesheet.

That's it! I hope you find this useful! 🙂

Marked as helpful

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