Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 4 years ago

Fylo landing page with two column layout challenge hub

alec•775
@AlecANL
A solution to the Fylo landing page with two column layout challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Any feedback are welcome :)

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart
    Posted almost 4 years ago

    Hey, awesome work on this one. Layout in desktop looks great, just need the website-logo to be a bit more larger, it is responsive and the mobile layout looks great as well.

    Some suggestions would be:

    • Website-logo should only be using alt="fylo" as the value, lose the word "logo". When using alt attribute, avoid adding words that relates to "graphic" such as "logo, images, icon.." it is already an image so no need to describe it as one.
    • Always wrap the main content inside the main section, a typical structure looks like:
    <header />
    <main />
    <footer />
    

    This way, all elements with contents are inside a landmark element.

    • Hero-section image should have alt="" and extra aria-hidden="true" attribute on the img. A decorative image needs to be hidden at all times.
    • input element needs to have an label associated with it, the label would be hidden for users that is why it needs to have an sr-only class, you can search up a styling for this class.
    • button inside the form needs to have type="submit" as an attribute, always be explicit what your button should be, because a button with no type attribute defaults to submit when it is inside a form element.
    • Since you are using type="email" on the input your error-message is not really doing its job. Instead, make your own custom email validation, just use type="text" and handle the validation via your javascript.
    • The second-section's img needs to be hidden as well, use the mentioned method above on it.
    • The arrow-icon on the see how fylo works needs to be hidden as well, again, it is decoration only and it doesn't add any content to the page.
    • Quotation img on the testimonial section needs to be hidden as well.
    • The alt for the person's image needs to be their name like alt="Kyle Burton" when a person's name and image is both present, always use the name as the alt value for the image.
    • Name of the person could use a heading tag. Also, when wrapping a text content, use meaningful element like a heading tag if it is a heading or a p tag if it is just a text, do not just use div to wrap text.
    • Same goes for the cta section, you need the form like what I mentioned above.

    FOOTER

    • Website-image needs to use alt="fylo".
    • The 2 icons for the phone and email should be hidden, use the mentioned method above as well.
    • For the list of links, I would use a single ul element on it, since those links are just related to one another. Using display: grid would be great.
    • Social media links should be using ul element, since those are "list" of links.
    • Each social media should be inside a tag since those are links.
    • Each a tag that wraps the social media should either have aria-label attribute or an sr-only element inside it. The value for whatever method you will use should be the name of the social media, this way user will know where this link would take them. For example, using aria-label, the a tag would look like:
    <a href="facebook.com" aria-label="facebook">
       img inside here 
    </a>
    

    But using the sr-only method is much better than using aria-label, look it up on the net.

    Aside from those, great work again on this one.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub