Huddle landing page with alternating feature blocks Using CSS flex

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @jantoma👋, good job completing this challenge! 🎉

  I like this solution for the challenge!. I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution. (<div class="landing"> and `<div class="features">)

  • It is better to use the name of the company as an alternative text of the logo instead of just "logo". You can read more about alternative text here.

  • Not all images should have alt text. The "illustration-mockups" is for decoration only, it has no additional meaning to the page, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="images/illustration-mockups.svg" alt="illustration" alt aria-hidden="true">

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.

  • Some links, such as those used for social networks in the footer, do not have visible text, only icons. Therefore, it is advisable to add an "aria-label" attribute to describe what that button does. This is done so that screen readers can understand the purpose of the link. You can read more about this here.:

  <a href="#" aria-label="Go to Facebook"><i class="fa-brands fa-facebook-f"></i></a>
  

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2