Responsive card using CSS Grid for Layouts and Flexbox for alignments.

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

I'm proud that I built a responsive layout using CSS Grid and Flexbox and solved tricky styling issues like aligning the original price and discount price properly. This helped me understand how layout and spacing work together.

Next time, I would plan my layout structure better before writing the code. I spent a lot of time adjusting spacing and fixing alignment issues that I could’ve avoided with a clearer wireframe or sketch.

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

One challenge I faced was getting the two-column layout to look clean without breaking the alignment, especially when adding padding to the content side. It was tricky because even small spacing changes affected the entire card’s balance, especially with the image on the left.

I fixed it by using grid-template-columns with 1fr 1fr, then adding padding only to the content side and making sure box-sizing: border-box was applied. I also used align-items: center to keep everything vertically aligned, which helped keep the layout consistent across screen sizes.

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

I’d like help improving how the card layout behaves across different screen sizes. Specifically, I want to make sure the image and content stack properly on mobile without breaking the design. I’m also looking for better ways to manage spacing so that the layout stays balanced without needing too many manual tweaks. However, I'm proud of my work because I figured a lot out on my own.