Skip to content
Submitted 9 months ago

Product preview card created with HTML and CSS.

Sabina•260
@Sabina1205
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted 9 months ago

    Hi Sabina, good job! Here are some suggestions.

    HTML:

    • Text should never be in divs alone. .product-description and first-cost both need to be wrapped in a <p>.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • You don't need to give html and body a height: 100%. Instead, give the body a min-height: 100vh so the content is allowed to grow without causing overflow. Also, since the card is centered using Grid, you can remove the margin.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • letter-spacing must also never be in px.

    Marked as helpful
    0
    Sabina•260
    @Sabina1205Posted 9 months ago

    Thanks for the suggestions! @Islandstone89

    1

Please log in to post a comment

Log in with GitHub

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