Submitted 9 months ago

Product Preview Card - HTML & CSS Solution

venbab•50

@venbab

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?

Understanding how to use CSS Grid with grid-template-areas and how to switch between mobile and desktop layouts was tricky. Also, centering the card properly and switching images based on screen size using the <picture> element took a bit of learning.

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

I’m proud of how the layout adapts well to both mobile and desktop using only CSS Grid. The button design and responsive typography turned out exactly like the design.

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

Would love feedback on grid concept for building UI?

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on venbab'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