Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component using vanilla css

@andychuks51

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I finally was able to use rems and ems effectively

What challenges did you encounter, and how did you overcome them?

I encountered a lot of issue when styling card.. responsive design issues easy

What specific areas of your project would you like help with?

I differently need help with using rems and ems effectively

Community feedback

geomydas 1,060

@geomydas

Posted

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

@andychuks51

Posted

@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

@andychuks51

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord