"Product preview card component" using Flexbox

Community feedback

• 

  P

  Øystein Håberg•11,740

  @Islandstone89Posted 9 months ago

  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.

  0