3-column preview card component

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:

  • 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 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" >
  

  CSS:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here.

  • You should use the cursor: pointer property to indicate that the element like a button or a link is clickable.

  • You can create the border directly, and not when doing :hover to prevent the component from growing

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Amr_Hesham•160

  @amooriheshamPosted almost 2 years ago

  @MelvinAguilar

  Thank you for your comment i will edit the design and publish it again i hope you were there to see it.

  1
• 

  James Ebimobowei Osuobeni•160

  @EbibeniPosted almost 2 years ago

  Welldone Amr_Hesham! You have done a great job on this project. I did go through your code and discovered that your media query for mobile is not correct. You have it set to 1020px instead of 375px. Here is how it should look like. @media (max-width: 375px) { .wraper { flex-direction: column; width: 330px; height: 100%; margin-top: 2rem; } }

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  1

  ---

  

  Amr_Hesham•160

  @amooriheshamPosted almost 2 years ago

  @Ebibeni

  Thank you for your comment. I probably miss that i will edit it and publish it again.

  1