Skip to content
Submitted 28 days ago

Responsive product card. Basic BEM and sanitize.css & CSS Reset

shwerts•180
@shwerts
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

Solution retrospective

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

Learning about BEM Methodology

What specific areas of your project would you like help with?
  • Should I ever use responsive typography like setting clamp() on root element's font-size?
  • Does it make sense using both CSS Normalize (sanitize) and Reset stylesheets?

Community feedback

  • Rahexx•440
    @RahexxPosted 22 days ago

    Overall, great job!

    Responsive Typography: Using clamp() on the root element for responsive typography is a good idea. It helps create a fluid typographic scale that adapts well to different screen sizes.

    CSS Stylesheets: There are important differences between using Reset stylesheets and Normalize. Choose one based on your project's needs:

    Reset Stylesheets: Use these if you want complete control over your styling and prefer to remove all default browser styles. Normalize: Opt for this if you want to maintain some default styling while ensuring consistency across browsers. Design Considerations: Always consider how the layout will change as screen sizes increase. For instance, having a large image alongside a smaller section can disrupt the visual ratio, affecting the overall design.

    Keep up the good work!

    Marked as helpful
    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