Product Preview using Flexbox

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, regarding the picture element:

  Yes, you used it correctly :)

  And perhaps some of this may interest you:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹Semantic elements: The <h1> element is not suitable for the price (the font-size does not define the element to use). In general, it shouldn't be more than one <h1> per page.

  Also, it is good not to skip heading levels (start with <h1>, then <h2>, and so on).

  🔹The image of the perfume is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason. Words like 'image' as part of alt texts are redundant because screen readers already announce to users that they are navigating through an image.

  On the other hand, the image of the cart is decorative and the way to set an image as decorative is with the empty alt attribute so a screen reader will ignore it. Or in the case of inserting the image inline as you did (using the <svg> element), to make it decorative you need to add the aria-hidden attribute: <svg aria-hidden="true" …></svg>.

  CSS 🎨:

  🔹You might want to use some more CSS reset, as a good practice at the start of each project. A popular CSS Reset from Josh Comeau 🔎

  For example, this is a very common and useful one:

  picture,
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  

  🔹Setting a width of 100vw for the body is unnecessary since it occupies the full width by default.

  🔹Consider this way of splitting the card into two equal columns for the desktop version:

  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  

  Please let me know if you disagree with something or if you would like more information on any of these topics.

  If you have any questions I’m here to answer so don't hesitate 🙂

  Regards,

  Marked as helpful

  0