3 Column Card Component Using Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

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

  • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

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

    You can read more about this here 📘.

  I hope you find it useful! 😄

  Happy coding!

  10

  Marked as helpful
• 

  Maksim Deviatilov•185

  @maksimcoder

  Posted over 2 years ago

  Hello, nice work you've done! I've only 1 thing I saw. When creating a button with outline style it's better to use border rather than outline. Additionally, you might have noticed that button's size is like bouncing when hovering it that happens due to the absence of border property on not hovered button state. So what I suggest exactly: 1 - for outline button style use borders 2 - to make styling look natively use border: *px solid transparent on not hover state and on hover state use border style you wish.

  Thanks for reading, happy coding!

  00

  Marked as helpful