Fylo landing page - HTML / Vanilla CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  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,775

  @vanzasetiaPosted over 2 years ago

  @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

  @EuphoriaCXIPosted over 2 years ago

  @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,775

  @vanzasetiaPosted over 2 years ago

  @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

  @EuphoriaCXIPosted over 2 years ago

  @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