Fylo landing page with two column layout

Hey there! 👋 Here are some suggestions to help improve your code:

• ⚠️ The "Features", "Team", and "Sign In" should be built using an unordered list and wrapped inside a nav for improved semantics.

More Info: 📚

MDN <ul>: The Unordered List element

• The article elements are being used incorrectly ❌ and are not needed for this challenge.

• For the testimonial, it is best ✅ to to wrap the testimonial component in a figure element, the individual’s information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

Code:

<figure>
   <blockquote></blockquote>
   <figcaption></figcaption>
</figure>

More Info:📚

MDN Figure Element

• ⚠️ The logo and company info inside the footer need to be wrapped inside an address element. While each individual information needs to wrapped in an anchor element.

More Info:📚

MDN Address Element

• ⚠️ The company directory needs to wrapped in a nav element and be built using theunordered list element to create a single list. You will use the CSS property column to style it.

More Info:📚

MDN <ul>: The Unordered List element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Hello there 👋. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

• Use a hidden label for the form. The sr-only label element is used to provide a label for an input element that is only visible to screen readers. This allows the input element to be properly labeled and described for users who are using assistive technologies such as screen readers. This helps ensure that all users, regardless of their abilities, can understand and use the form.

  The class "sr-only" hides content visually and here are the styles to copy.

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

• You should use the aria-label attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.

e.g. <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>

• The best way to code a navigation (Features Team, Sign In) is to use an unordered list (<ul>) inside a navigation (<nav>).

• For the company logo you should use the company name as the alt attribute value. The "logo" is not a decoration.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!