3 column preview card using CSS Flexbox, Scss and BEM

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

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

  I have some suggestions you might consider to improve your code:

  • The <h1> element is the main heading on a web page. There should only be one <h1> tag per page. The HTML Section Heading elements (Reference). This case requires that SUVS, SEDANS, and LUXURY be <h2> elements.

  • The Learn More elements should be anchor tags and not buttons because they redirect to another website.

  • 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" class="column__icon">
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" class="column__icon"> 
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" class="column__icon">
  

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

  Good job, and happy coding! 😁

  Marked as helpful

  1

  ---

  

  Zakaria•60

  @zakariabelassriPosted about 2 years ago

  Thank you so much @MelvinAguilar for your suggestions, I didn't know about it before, I already made the changes, this was very helpful.

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Zakaria! 👋

  Congratulations on finishing this challenge! 🎉

  Here are some suggestions for improvements.

  • Swap all the h1 with h2. It is not a best practice to have many h1 on a page. It can confuse the screenreader users because there will be many titles for a single page. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • What is the purpose of alt="{noting}"?
  • Always specify the type of the button.
  • I think those "Learn More" buttons are links (a). I would think that after the users click one of those buttons, they will get navigated to a different web page (which is what anchor tag is used for).

  I hope this helps! Happy coding!

  Marked as helpful

  0

  ---

  

  Zakaria•60

  @zakariabelassriPosted about 2 years ago

  Thank you so much @vanzasetia, I never knew about the h1 and h2 before, also about the type of the button tag, your comment was so helpful and useful.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @zakariabelassri Happy to hear that was helpful! 😊

  0