product preview card component solution

HTML:

• It is common to use classes instead of IDs.

• To display different versions of the image depending on the screen size, use the <picture> element.

• The 2 prices can be confusing for screen readers, as they cannot recognize the "strike-through" on the old price. To make things clearer, it is recommended to add the following right before the old price: <span class="visually-hidden">Old price:<span>. The visually-hidden class should have these properties:

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

• The shopping cart icon is decorative, and the "Add to cart" is what describes the action. Hence, you should hide the icon for screen readers, by placing aria-hidden="true" as an attribute on the icon.

CSS:

• It's good practice to include a CSS Reset at the top.

• Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

• On the container, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove width: 100% - <main> is a block element, meaning it takes up 100% of the width by default.

• You don't need to declare flex-direction: row, as that is the default.

• Remove the width and height on the card. If needed, add a max-width in rem, so it doesn't stretch too wide on larger screens.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• letter-spacing must also never be in px.

• Media queries must be in rem, and it's best practice to do mobile styling first.