Product Preview Card with HTML and CSS

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!