"Product preview card component" using Flexbox

Hi Gabriel, good job!

I hope you find my feedback helpful :)

HTML:

• The alt text on the product image needs to be more descriptive. It should say what kind of product it is.

• Use the <picture> element to offer different versions of an image depending on screen size.

• "Perfume" is not a heading, but a <p>. Remember, too, that headings must always be in order, hence you wouldn't start with a <h2>.

• To make it clear there's an old and a new price for screen readers, consider adding the following in the markup:

<p class="current-price"><span class="visually-hidden">New price</span>$149.99</p>
<p class="original-price"><span class="visually-hidden">Old price</span>$169.99</p>

And hide it using CSS:

.visually-hidden {
  clip-path: inset(50%);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

Here is an explanation of the properties being used.

• I would use the SVG for the cart icon.

CSS:

• Including a CSS Reset at the top is good practice.

• Remove the width and min-height on the card.

• Give the card a max-width of around 50rem, so it doesn't stretch infinitely on larger screens.

• flex-direction: row is the default, so there is no need to write it unless you need to override a flex-direction: column declaration.

• Media queries should be in rem.