"Product Card Component built with HTML and CSS – Fully Responsive"

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

I’m most proud of building a fully responsive layout using only HTML and CSS, without relying on any frameworks. I paid special attention to layout structure, semantic HTML, and responsiveness using media queries.

If I were to do this challenge again, I would experiment more with CSS Grid for layout, and possibly try using a CSS preprocessor like Sass to better manage styles. I'd also aim to improve the image loading strategy for performance and accessibility.

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

One of the biggest challenges I faced in this project was getting the image to behave correctly in different screen sizes. I used a <picture> tag with source and media queries to load different images for mobile and desktop views, but making the desktop image stretch correctly to fill the vertical space alongside the content was tricky.

At first, the image would not align well or scale properly. I experimented with several CSS properties like height: 100%, min-width, and object-fit, and also adjusted grid and flex layouts with .row and .col utility classes. Eventually, I fixed it by setting height: 100% for .product-image img and controlling the layout using media queries.

Another challenge was managing spacing and ensuring the design matched the original preview. I had to carefully test on different screen sizes and tweak paddings, gaps, and font-size values to get a clean layout.

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

"I need more help with the grid and media queries sections."