product-preview-card-component

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

• Use the <picture> element to showcase different image versions based on the user's screen size.

• Don't use hyphens or the word "image" in the alt text.

• "PERFUME" should be changed to "Perfume". Use the CSS declaration text-transform: uppercase; to style the text visually. And change it to a <p>.

• "Gabrielle Essence Eau De Parfum" is the main heading, so change it to a <h1>. Remember to never skip heading levels - an <h4> should be preceded by a <h3>.

• Add visually hidden text for the prices; screen readers would find them confusing otherwise:

 <div class="price">
     <p><span class="visually-hidden">$149.99</span><span class="visually-hidden"><del>$169.99</del></span></p>
  </div>

CSS:

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

• The icon cart is decorative, so it should have empty alt text: alt="".

• Remove the text that is commented out.

CSS:

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

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

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width - the body is a block level element, meaning it takes up the full width by default.

• Except for the button, remove all widths and heights.

• Add a max-width in rem on the card, to prevent it from getting too wide on larger screens.

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

• Images should havedisplay: block and max-width: 100% - the max-width prevents overflowing of the container.

• It's common to write the mobile styles as the default and use media queries for larger screens. Media queries must be in em or rem, not px.