Product Preview Card Component Only Using HTML and CSS

Hi 👋, perhaps some of this may interest you:

HTML 🧱, ACCESSIBILITY ⚖:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• No need to wrap each element with a <div>, better to use semantic elements like <img>, <h1> or <p> directly.

• There are two images for this challenge, and to show different images depending on the device or screen size, the <picture> element is ideal:

<picture>
<source media="(min-width: 680px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg" alt="description">
</picture>

• The icon is a decorative image and therefore needs an empty alt attribute to be ignored by a screen reader.

CSS 🎨:

• It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

I hope it’s useful 🙂

Regards,