product-preview-card-component

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

I am really proud of how the responsive layout turned out. Successfully transitioning the card from a vertical stack on mobile devices to a horizontal side-by-side layout on desktop using CSS Flexbox was a great learning experience. I'm also happy with how I matched the typography perfectly using the 'Montserrat' and 'Fraunces' fonts to mirror the design.

Next time, instead of using two separate <img> tags and hiding them with display: none via CSS, I would like to try using the HTML <picture> element. It's a more semantic and performance-friendly way to handle responsive images. I also think I could try using CSS Grid for the main layout to compare how it feels versus Flexbox.

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

One of the main challenges was aligning the current price and the old crossed-out price side-by-side while maintaining the correct typography. They use entirely different fonts, colors, and line alignments, which initially caused spacing issues.

I overcame this by wrapping both price elements in a dedicated div (.card-body-price-container) and implementing display: flex; justify-content: space-between; align-items: center;. This allowed me to position them perfectly on the same line. Another challenge was managing the image and text blocks on desktop; I solved this by explicitly assigning a max-width to the main card and using flexbox to control the content halves inside a media query.

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

I would appreciate feedback on my CSS class naming conventions. I tried to make them descriptive (for example, .card-body-price-old), but I wonder if adopting a strict methodology like BEM (Block Element Modifier) would be better and more professional for components like this. Furthermore, any tips from the community on how to structure and order CSS files to make them cleaner (especially when dealing with media queries) would be incredibly helpful!