Responsive Product Preview Card Using HTML & CSS

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

I am most proud of how well the component turned out to be both visually appealing and responsive across mobile and desktop screen sizes. I applied clean and semantic HTML with structured CSS using variables, which made the design consistent and easy to manage. The use of custom properties (:root) and a mobile-first approach helped ensure that the design scaled gracefully.

If I were to do it differently, I would improve the accessibility features, such as adding better alt text and using semantic tags like <article> or <figure> for the product content. I would also consider separating the mobile and desktop images using picture and source tags to improve performance.

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

One of the main challenges was ensuring the layout remained responsive and visually balanced between mobile and desktop views. Initially, using object-fit and managing image ratios created issues with stretching or misalignment.

I resolved this by carefully adjusting the height properties and refining the border-radius values for the images depending on the screen size using media queries. I also struggled with proper font loading and resolved it by preconnecting to Google Fonts to improve performance and avoid layout shifts.

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

I would appreciate help or feedback in the following areas:

1. Image optimization and loading strategies – Is there a better way to handle responsive images than toggling visibility with CSS?

2. Accessibility – Suggestions for making the component more accessible (ARIA roles, semantic HTML improvements).

3. Performance – Tips on further improving load times and reducing unused CSS, especially for small components like this.