Skip to content
Submitted about 3 years ago

Fylo Landing Page with HTML and CSS

Abanum Oliseyenum•230
@Codeyenum
A solution to the Fylo landing page with two column layout challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please, I'd love to get constructive criticism on this🙏😬. Kindly point out any errors or areas that I might need to work on and feel free to suggest ways I can improve. Thank you✨✨

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hello, Abanum! 👋

    Congratulations on completing this challenge! 🎉 Good effort on this challenge! 👍

    I have a few suggestions for this solution.

    • Remove the <h1 class="sr-only">hide</h1>. What is the reason of adding it?
    • Alternative text for images should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). The semantic meaning of the img element is already good enough.
    • Move the lower-main-section inside to the main element. It's important for all page content to live inside the corresponding landmark element.
    • hidden attribute makes the label invisible to all users (including the users of assistive technologies). This is a good situation to use sr-only styling instead.
    • Always specify the type of the button. It's going to prevent the button from behaving unexpectedly.
    • The alternative text for the social media icons is all the same.

    I hope this helps!

    Marked as helpful

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