Product preview card component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, I leave this here in case you want to take a look:

  ** HTML 🧱, ACCESSIBILITY ⚖:**

  🔹The image of the perfume is meaningful and therefore it shouldn't be a background-image. With meaningful images the alt text should give a good description in case the user cannot see it for some reason.

  🔹'Perfume' should be capitalized with CSS and not in HTML for accessibility reasons (using 'text-transform: uppercase;').

  🔹 It could make sense to add a screen readers-only clarification for the old price ($169.99) with the .sr-only class, which will be hidden with CSS, to prevent confusions.

  ** CSS 🎨:**

  🔹The use of 'flex-direction: row;' is unnecessary as it is the default.

  🔹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. This is important for reasons like: increased use of mobile devices, simplified design (focus on core content and easy navigation), easier to scale up. It will also make the page display faster on smaller devices.

  Please let me know if you disagree with something or if you want more information.

  Regards

  Marked as helpful

  1

  ---

  

  Stano153•70

  @Stano153Posted over 1 year ago

  @fernandolapaz Thank you for feedback, it really means a lot :) Fixed those things. I am still learning about designing for mobile devices but its getting better, I will start my next project designing mobile version first, thanks.

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @Stano153 You are welcome 🙂

  0