Product Preview Card with HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • Not all images should have alt text. The cart-icon is a decorative image, it does not add any information to the page. You should use an empty alt attribute instead of a descriptive one. You can read more about this here 📘.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

  • Instead of adding borders separately to each column, consider applying a border to the entire component. Then, use overflow: hidden to cut off the excess and make the border apply uniformly to the entire component. This can provide a cleaner and more consistent appearance.

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

  Happy coding!

  10

  Marked as helpful