Skip to content
Submitted 4 months ago

Product Preview Card Responsive

LG•170
@newbieDesignDev
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?

I was able to do the project on my own without looking at others code. Able to troubleshoot on some areas.

What challenges did you encounter, and how did you overcome them?
  1. The first challenge I have encountered in this project is how to change an image on different breakpoints.
  • Was able to find a way to do it by googling on how to change an image when certain breakpoints are met.

I was having challenging time when I added the cart-svg which is taking up the parent containers height and width which is causing it to be overly stretched. When I googled the svg should have a specific height and width which it has. The problem that was occuring to me was my own fault. I had use in my CSS a selector of .preview-card img with 100% of width. When I found it out after almost half an hour It was just my own fault. I learned that using more specific class selector will help and using better CSS selector names specially when the time comes of designing for much bigger projects.

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

I think one of the areas I need to improve is to create a naming system for my CSS selectors.

Community feedback

  • Abdessalam Barka•430
    @barka-devPosted 4 months ago

    Well done! The overall design is very close to the provided design. However, you need to pay a bit more attention to the spacing between and around the elements to ensure it is consistent across all devices. Additionally, you could use more semantic elements; for example, consider using <section> instead of <div>.

    Marked as helpful
    0
    LG•170
    @newbieDesignDevPosted 4 months ago

    @barka-dev Appreciate the feedback, will keep this in mind for my next challenge.

    0

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