CSS GRID, FLEX

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 <section class="footer">should be <footer> instead of section.

    • The <section> tags with classes: hero, productive, and cta should be inside a main tag.

  • On mobile devices the header is not readable, it is too small.

  • A logo is not considered a decoration in HTML because it is often a crucial part of a website's branding and identity, use company name as the alt attribute value for logos.

  • Wrap the unordered list (<ul class="nav">) with navigation links in a <nav> tag, this provides additional semantics for the group of links, indicating that it is a navigation section.

  • 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. 📘.

  • 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>
  

  • The <a class="submit-btn" href="#">Get Started</a> tag should be a button with "type=submit".

  • In the footer, the paragraphs "About Us", "Jobs", "Press", "Contact Us", "Terms" and "Privacy" should be links within an unordered list.

  • 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. This makes it easy for users to connect with the company on social media.

    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!

  Marked as helpful

  1