Responsive page using CSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge !

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

  HTML:

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-sedans.svg" alt aria-hidden="true">
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" >
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
  

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here.

  • If you want to use a level-one heading (h1) even, you can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

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

  Happy coding and Happy New Year! 🎉🎊🎁

  Marked as helpful

  1

  ---

  

  Kent•40

  @kentbunoPosted almost 2 years ago

  @MelvinAguilar, thank you very much. I found it really useful. I will apply your corrections and suggestions to my code in the next challenge I will be taking on. 🖤

  Happy New Year as well! 🎆🎇🎉

  0