Product preview card component using vanilla css

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 5 months ago

  Use rems for font-sizes, use ems for letter-spacing. For padding and margins on text, use mostly ems https://graphicdesign.stackexchange.com/questions/2147/which-unit-should-be-used-in-web-design-to-define-space-margin-padding-etc.

  Critique

  -Design

  1. "Gabrielle Essence de.." font-size too big. Scale it down a little.

  2. Paragraph text is too wide, set a max-width: The color is off and it should be grey aswell.

  3. Button color is also off and the font-family is diffent from the design. You should also decrease the margin-bottom or simply add negative units.

  4. Strikethrough discount text is off color aswell

  -HTML code semantics

  " <img src="./images/icon-cart.svg" alt="" />Add to Cart" has no alt tag, you should add one.

  "<div class="card-price-label"> <span class="new-price">$149.99</span> <span class="old-price">$169.99</span> </div>" dont use spans for everything, p or h3 tag would be more fitting here.

  <div class="card-title">Perfume</div> once again, don't use divs for everything, use h2 or h3 tag here.

  I am too lazy to read the css code

  Marked as helpful

  0

  ---

  

  ANDREYSOREAL•120

  @andychuks51Posted 5 months ago

  @geomydas thank you so much for taking your time to review my code, I really appreciate it a lot. I will make the necessary adjustments and Please follow me back because i will like you to be my mentor. :) Thanks again

  0

  

  ANDREYSOREAL•120

  @andychuks51Posted 5 months ago

  @geomydas And to add something I used rems and ems on my font-sizes, please can you go through my CSS... Please?

  0