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

User9511 370

@User9511

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

Community feedback

T
Grace 29,310

@grace-snow

Posted

Looks good overall, well done

Some points for improvement

  1. Logo should not be aria hidden. Why would you hide that content from assistive tech users?
  2. Logo is not normally in a nav, especially when it’s not wrapped in a link
  3. You cannot have an empty label element
  4. To programmatically link an error message and input, place aria-describedby on the input pointing to the id of that error holder. The error holding element should also have an aria-live attribute on it (same feedback for both forms)
  5. Consider using figure for the testimonial. Inside it can have blockquote for the quote and figcaption for the author img and info
  6. The quote author name should definitely not be a h3. It makes no sense as a heading, and doesn’t own any content following it
  7. Get early access should be a h2 not h4
  8. Main must be closed before the footer. They are distinct landmarks
  9. The two footer lists should be one list and inside a nav element. Once you’ve done that you will need to label both navs on the page (eg main and footer)
  10. Rather than including ALL of font awesome, I strongly recommend you download the 3 svgs you need for the socials

Marked as helpful

1
User9511 370

@User9511

Posted

Thanks for the feedback Grace! :)

I've updated my code now,

Let me know if there are any other changes you think I shoud make.

Thanks, Shane

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