Skip to content
Submitted 9 days ago

Responsive Product Preview card using HTML and CSS

Olaniyi-Fatola•70
@Olaniyi-Fatola
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'm proud to have created this responsive product preview card. Currently, I don't know what I would do differently but might come up with something better that I'd do differently which will make this project better.

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

The first challenge I encountered was how to use two different images in a project, and I'll have to hide one of them when in desktop mode and vice versa. I was able to solve this by researching on the internet and I found a useful video on the internet that helped me understand how to do that by using "display: none;" which is pretty awesome. The second was adding an icon to the "Add to cart" button which I later solved by using the Heroicon website and that is too good to be real, though it's real and I really love ittt!

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

I'll love it if I can get a way to do this better and all critics are welcome.

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 9 days ago

    Hey, this is looking pretty slick already! Loving the setup – you’ve got some great structure here. Props on the creativity! 🙌

    A couple of pro tips to take this up a notch:

    1. For fonts, best move is to download them and load them up via @font-face. Why? Because it keeps things fast and reliable, plus you won’t be left hanging if a CDN goes down. Just throw the font files into your project and let @font-face do the rest!

    2. Give every element a class, and if you’re feeling fancy, go with BEM naming for that sweet organized vibe. It’s like instant readability! For example, card__title and card__text keep things clear, and anyone who checks out your code will appreciate it.

    3. To smooth out hover effects, try adding a transition. It’s like a little bit of magic for your buttons. Check this out:

      .btn {
    transition: background-color 0.3s ease; 
}

.btn:hover {
    background-color: #3498db; /* Throw in your fave color here */
}

    Keep it up, you’re crushing it! Can’t wait to see where this goes!

    Marked as helpful
    2
    Olaniyi-Fatola•70
    @Olaniyi-FatolaPosted 6 days ago

    @Grimm-N Thanks for this feedback. It's really helpful. Will correct it and I hope to see you around with more suggestions for growth

    0
    Natali 👻 Grimm•1,150
    @Grimm-NPosted 6 days ago

    @Olaniyi-Fatola Hey, you're very welcome! 😊 We're all here to help each other by reviewing and improving our code together—teamwork makes the dream work!

    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