HTML & CSS product preview card

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Great work Andrea, congrats on completing your first Frontend Mentor project! Your solution looks great, and the code looks good and readable too.

  About the CSS feeling clunky, is it because you feel certain declarations (like flex) are being made over and over? Sometimes it might be beneficial to just write a flexbox class with properties that doesn't change, and then put it in containers that need it; then for flex properties that vary from container to container, those can go on the container's class selector instead.

  What I like to do is to check out repos of experienced CSS gurus like Kevin Powell and see how he writes his CSS. That's something you can consider as well, and also check out his YouTube channel if you haven't heard of him yet; he's done some FEM tutorials that are worth watching.

  As for suggestions, I see that you got the font families repeated a few times. Try putting those as a custom variable and then use them whenever you need:

  :root {
    --ff-primary: 'Montserrat', sans-serif;
    --ff-secondary: 'Fraunces', serif;
  }
  
  p, h2 {
    font-family: var(--ff-primary);
  }
  
  h1 {
    font-family: var(--ff-secondary);
  }
  
  

  Also, I'd add a cursor: pointer on the button so that it turns into a pointer.

  Great work, Andrea, and keep coding!

  Marked as helpful

  2

  ---

  

  Andrea Pang•60

  @andiedoescodePosted over 2 years ago

  @elaineleung Thanks so much for your feedback! I'll definitely keep working on those custom variables and condensing some properties.

  1
• 

  Moses Shaib•40

  @ShaibMOPosted over 2 years ago

  The CSS I am seeing here is very clean( not clunky like you say 😊). I would love to learn more about custom settings with root in CSS.

  Also, accessibility issues, but I also didn't even consider in my design. 😂

  0

  ---

  

  Andrea Pang•60

  @andiedoescodePosted over 2 years ago

  @ShaibMO Thanks! Have a peek at the MDN page for Using CSS custom properties (variables). It was helpful just starting out.

  0