Responsive product card component using HTML & CSS

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

I'm most proud of successfully implementing responsive images using the <picture> element to serve different images at different breakpoints. This was particularly satisfying because I tackled the challenge of having a wider mobile image (686px) than desktop image (600px), which made traditional srcset approaches less reliable.

Next time, I would start with a more semantic HTML structure from the beginning. I had to restructure elements later to improve accessibility and semantic meaning, which would have been easier to implement from the start.

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

The main challenge was controlling which image version displayed at different breakpoints, especially since my mobile image was unexpectedly wider than my desktop image. The srcset and sizes attributes weren't behaving as expected.

I overcame this by:

1. Learning about the <picture> element which allowed explicit control through media queries
2. Using DevTools to inspect the behavior at different breakpoints
3. Seeking assistance to understand why my original approach wasn't working

Another challenge was getting equal-width columns in the desktop layout, which I resolved by applying width: 50% to ensure consistent rendering.

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

I'd appreciate guidance on:

1. Typography scaling - my use of clamp() for responsive font sizing led to compounding effects with my CSS custom properties
2. Best practices for SVG implementation - particularly controlling color and size efficiently
3. More accessible markup patterns for product cards - ensuring my component follows best practices for screen readers and keyboard navigation