fylo-landing-page-with-two-column-layout-master

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Use semantic tags such as <header>, <nav>, <main>, <section>, and <footer> to improve the semantics of your code and make it easier to understand.

    • The tag <nav class="nav">should be <header> instead of nav.

    • Wrap the unordered list (<ul class="nav-items">) with navigation links in a <nav> tag. The <nav> tag should be a child of the <header> tag, just a small change.

    • The <section> tags with classes: section-one, section-two, and section-three should be inside a <main> tag.

  • A logo is a crucial part of a website's branding and identity, use company name as the alt attribute value for logos. The word "logo" is not necessary.

  • The image with the testimonial author is not a decoration, you need to provide an alternative text to tell the user who is the author of the testimonial, its recommended to use the author's name as the alt attribute value. e.g. alt="Kyle Burton"

    If you want to learn more about the alt attribute, you can read this article. 📘.

  • You need to create a <form> tag inside the element <div id="form-one" class="form">, and the button should be a button with type="submit".

  • Use a hidden label for the form with the class "sr-only" to make it visible only to screen readers. You can find an example to use for this in the following code:

   <form>
      <label for="email" class="sr-only">Email</label>
      <input type="email" id="email" name="email">
  </form>
  

  • In the footer, the list-items "About Us", "Jobs", "Press", "Contact Us", "Terms" and "Privacy" should be links. Also, this element should be enclosed in a <nav> tag and to differentiate it from the header navbar you should use the aria-label attribute to describe and identify the navigation and make it unique.

    Example:

    <nav aria-label="main">
    	<ul>...</ul>
    </nav>
    <nav aria-label="footer">
    	<ul>...</ul>
    </nav>
    

  • Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page.

    Additionally, you should use the aria-label attribute to describe the links if they don't have visible text

  I hope you find it useful! 😄

  Happy coding!

  0

  ---

  

  Adarsh•640

  @adarsh-gupta-2002Posted almost 2 years ago

  @MelvinAguilar thanks for feedback, I will not repeat these mistake next time.

  1