productPreviewCard_figmaChallenge

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

I'm proud that I took the time to build the layout from scratch without immediately relying on AI, and that I figured out how to properly structure the responsive image component and the "Add to Cart" button (including hover states and icons). Looking back, I'd like to approach spacing (padding/margin) more systematically next time — maybe by setting up a layout grid earlier or adding temporary outlines/borders during development to catch inconsistencies faster.

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

Spacing was a big challenge — especially balancing margin, padding, and ensuring the image filled its container properly across screen sizes. At first, I thought I fixed the problem by adjusting the card width, but further testing revealed deeper issues. To solve it, I went back to basics: inspecting elements in dev tools, experimenting with flexbox vs. grid, reviewing my two-year-old code, and getting feedback from AI to spot mistakes I missed. It reinforced how important careful testing and debugging are, not just "visual fixes.

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

I'd love feedback on my layout structure — particularly if there are cleaner ways to handle spacing and alignment earlier in the project without needing multiple rounds of tweaking. I'd also appreciate advice on best practices for structuring media queries and scaling a layout for larger screen sizes in a more maintainable way.