Product Preview Card Component Only Using HTML and CSS

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML 🧱, ACCESSIBILITY ⚖:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • No need to wrap each element with a <div>, better to use semantic elements like <img>, <h1> or <p> directly.

  • There are two images for this challenge, and to show different images depending on the device or screen size, the <picture> element is ideal:

  <picture>
  <source media="(min-width: 680px)" srcset="images/image-product-desktop.jpg">
  <img src="images/image-product-mobile.jpg" alt="description">
  </picture>
  

  • The icon is a decorative image and therefore needs an empty alt attribute to be ignored by a screen reader.

  CSS 🎨:

  • It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

  I hope it’s useful 🙂

  Regards,

  Marked as helpful

  1

  ---

  

  Rizki Bagus•50

  @RizkiB12Posted over 1 year ago

  @fernandolapaz Hello, thank you so much about your review, may God bless you

  0