Skip to content
Submitted over 3 years ago

Fylo Landing Page | Mobile First | HTML & CSS

accessibility
Michael Waaler•230
@10high
A solution to the Fylo landing page with two column layout challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

While I'm happy with the result that you see on screen, I'm unhappy with the underlying "code". I think there could have been a much simpler and cleaner way to achieve the same result. I feel that my solution is too "hacky", relying too much on margins and padding to achieve a perfect match against the original.

The main thing I learned/realized during the process is that I need to do much more forward-planning (now that these challenges are becoming larger and more complex). I think I also need to see the Figma design, so that I can work out the dimensions in advance and (hopefully) inform my approach to the solution.

I'd love to hear from anyone on their experiences of having access to the Figma design files!

I'm feeling more confident using semantic markup, but it's such a big subject and tips and pointers would be most welcome! :)

Thanks for taking a look. Have a great day!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Michael Waaler•230
    @10high

    I fixed the errors created by the Font Awesome "fonts" for the social media icons by using the SVGs also available from Font Awesome and removing the JS script import from the top of the HTML file. (You can see it commented out in the index file.)

    I also added aria-labels to the SVGs nested inside links, which seems to have satisfied the lack of discernible text errors I had previously.

    Now no errors, yay!

  • Michael Waaler•230
    @10high

    Hm, the report has generated a bunch of errors, most of them seem to be from using Awesome Fonts for the social media icons. If anyone has any experience with this and how I can resolve them, please let me know.

    Thanks. :)

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