Product preview card component Grid Flexbox

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, here some tips in case you want to take a look:

  HTML 🧱, ACCESSIBILITY ⚖:

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

  • By using background-image there is no need to include the <img> element (you left it empty). However, in this case we should use <img> as it is a meaningful image and needs an alt text with a description.

  • It would be better to capitalize 'Perfume' with CSS (using text-transform: uppercase;) and not in HTML, for accessibility reasons.

  CSS 🎨:

  • It should not be necessary to define the height of the card, it should be determined by the content (and paddings, margins, etc).

  • 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, any questions don't hesitate 🙂

  Regards,

  Marked as helpful

  0

  ---

  

  DESELMAAR•280

  @DESELMAARPosted over 1 year ago

  @fernandolapaz nice , I will take these notes . Thank you a lot

  0