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 challenge, with HTML and CSS

Corfaya 110

@Corfaya

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


Hello there! :) This is my first Frontend Mentor challenge's solution. I think I have written too many lines... any tips to simplify the CSS code? Or other suggestions? Thank you! Laura

Community feedback

@MaximilianoDanielGarcia

Posted

Hi Laura, great job!

Your CSS code looks optimal and clean. My suggestion, you can use CSS variables into :root for colors, font sizes, etc. Here an example:

:root {
    --white: hsl(0, 0%, 100%);
}

#card {
  background-color: var(--white);
}

Also, you can add box-sizing: border-box into your reset CSS *. The CSS box-sizing property allows you to include the padding and border in an element's total width and height.

I hope these are helpful to you.

Marked as helpful

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