Responsive Product Preview Card

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

I’m most proud of how clean and responsive the layout turned out. I managed to closely match the original design from the challenge, while using semantic HTML, scalable CSS variables, and well-organized styles. The responsiveness and background image swap between desktop and mobile views were particularly satisfying to get right.

Next time, I would:

Use a mobile-first approach from the beginning to simplify responsive logic.

Consider using CSS Grid alongside Flexbox for more control over the layout structure.

Add transition effects for smoother button interactions and maybe animate the image or price reveal for a more engaging user experience.

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

Responsive Image Swap: The image wasn't appearing correctly on mobile at first. I realized this was due to inappropriate width and height settings after changing flex-direction to column. I fixed it by setting the image width to 100% and adding a specific height.

Maintaining Visual Consistency Across Viewports: It was a challenge to keep padding, font sizes, and spacing looking balanced on both small and large screens. I used relative units and media queries to fine-tune the design.

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

Accessibility: I’d like to learn more about how to make these types of cards more accessible beyond just alt text — maybe using aria attributes or better semantic markup.

Performance: Tips on optimizing asset loading (like background images) for better performance on mobile would be helpful.

Scalability: How to structure the CSS or use a CSS framework/component library without bloating the code.