Submitted about 2 months ago

Product Preview Card using HTML, CSS, Grid Layout

LVL 2

Bangaru Konda Bollapally•85

@bangarukondabollapally

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

I'm proud that I completed this challenge without using AI or code assistance and built the responsive layout on my own. Next time, I'd like to focus more on accessibility and write cleaner, more reusable CSS from the beginning.

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

I initially struggled with the card height because I was using height instead of min-height. I also encountered a small gap below the product image on desktop and learned that images are inline elements by default, which can create extra space due to baseline alignment. Setting display: block fixed the issue.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Bangaru Konda Bollapally’s solution.

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