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 - HTML / Vanilla CSS

EK 100

@EuphoriaCXI

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

Vanza Setia 27,795

@vanzasetia

Posted

Hi, there! 👋

Nice work on this challenge! The HTML markup for the header is good, you don't include the first section inside the header. You have used landmark elements correctly, each landmark element wraps the appropriate page content. Good job! 👏

Anyway, some suggestions from me.

  • I would recommend adding aria-label to the nav on the header (the same as you did to the nav in the footer). There are two nav elements on this page. So, I recommend adding a label to the header as well to help the users to distinguish both nav.
  • The quote-wrapper section should not have a heading tag. It's actually the part of the previous content.
  • For the ol element that wraps the social media links. I think it's better to use ul instead. It's because ol is an ordered list which means it's better to use it for step-by-step content. What do you think about this?
  • Lastly, I recommend fixing all the issues that have been reported.

I hope this helps! Keep up the good work! 👍

Marked as helpful

1

Vanza Setia 27,795

@vanzasetia

Posted

@alwaysBeThankful Next time, I recommend asking for feedback whenever you are going to submit a solution. Even though you have no questions, it's best to ask for feedback.

You will never know that there's something that you can improve or learn from other people. 😉

1
EK 100

@EuphoriaCXI

Posted

@vanzasetia Thank you very much for your time Vanza! I appreciate your time. Would you say after these improvements you've mentioned I'm ready to start JavaScript?

0
Vanza Setia 27,795

@vanzasetia

Posted

@alwaysBeThankful I think you need to do more HTML and CSS challenges while you are learning JavaScript. I still notice some areas that can be improved such as,

  • On 840px the input form is very wide and almost all the text become one line. The wrapper elements should have different max-width (not only 1440px.
  • Add :focus-visible styling to all interactive elements. This will let people who use a keyboard to navigate the site know where they are currently on the page.

So, I would say keep sharpening your HTML and CSS skill by doing Frontend Mentor challenges while learning JavaScript. 🙂

Marked as helpful

1
EK 100

@EuphoriaCXI

Posted

@vanzasetia Thanks Vanza, I'll keep doing the HTML and CSS challenges while learning JavaScript. I've actually just posted and completed another CSS challenge lol.

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