Product Preview Card Component – Responsive Layout with Flexbox

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

I'm proud of how the project maintains a clean and responsive design across different screen sizes using a mobile-first approach. Next time, I would optimize the CSS further by utilizing utility classes to reduce repetition and explore CSS Grid for layout structuring.

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

One challenge was ensuring image scaling worked correctly on different screen sizes. Initially, the images were not adjusting properly, but using the <picture> element and object-fit: cover; helped maintain a consistent look. Another challenge was aligning text properly inside the card while keeping spacing uniform. Flexbox helped in structuring the layout efficiently. And also I'm not convenient in using sass yet.

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

I would appreciate feedback on improving code efficiency, particularly in CSS structuring. Most especially, sass.