Skip to content
Submitted about 1 month ago

Product Preview Card Component w/HTML and CSS

silveraditya•100
@silveraditya
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?

Started with mobile first and then expanded to supporting desktop. Built responsive design and excited to do more complex designs.

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

Had some issues with figuring out how to solve the design for medium size resolutions. I was able to solve for some of them - but wasn't able to fully solve it across the board.

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

Looking at CSS and determining how I can improve it - especially for resolutions that are in between mobile and tablet where design is a bit funky.

Community feedback

  • Steven Stroud•11,890
    @StroudyPosted about 1 month ago

    Hello again, Incredible work on this! You’re making great strides, and I have a couple of suggestions that might push it even further…

    • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    • I want you to start hosting your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    You’re doing so well, and I hope this feedback is helpful! Keep honing your skills and remember to enjoy the process—you’re on a great path. Stay motivated, and happy coding! 🎯

    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