Stats preview card component with HTML, CSS, & JS

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

I'm particularly proud of implementing the responsive image system with separate desktop and mobile images using CSS display properties. This approach feels clean and maintainable compared to using media queries in HTML picture elements. The CSS grid layout transformation from a two-column desktop layout to a single-column mobile stack also came together smoothly, and I'm happy with how the purple overlay effect turned out using CSS blend modes.

Next time, however, I'd start with a more systematic approach to spacing and typography. I found myself adjusting padding and margins multiple times to match the design perfectly. I'd also consider using CSS custom properties (variables) from the beginning for colors and spacing values to make the code more maintainable and easier to modify. Additionally, I'd add more subtle hover effects and transitions to enhance the user experience.

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

The biggest challenge was getting the image overlay effect to look right. Initially, I tried using a simple background color overlay, but it didn't achieve the purple tint effect shown in the design. I solved this by using a pseudo-element with mix-blend-mode: multiply and the exact HSL color value, which created the perfect purple overlay while preserving the image details underneath. Another challenge was ensuring the responsive layout matched both designs exactly. The desktop version needed specific spacing and alignment, while the mobile version required completely different proportions and center alignment. I overcame this by using CSS Grid's flexibility to completely restructure the layout at the breakpoint, changing from grid-template-columns: 1fr 1fr to grid-template-columns: 1fr and adjusting the content order. The typography hierarchy also required fine-tuning to match the designs. Getting the exact font weights, sizes, and spacing took several iterations, but breaking it down systematically for each element (title, description, stats) helped me achieve the precise look.

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

I'm satisfied with the current implementation and don't need specific help at this time. The solution matches the design requirements and works well across different screen sizes. However, I'm always open to feedback on code optimization, accessibility improvements, or more elegant CSS techniques that I might have missed!