A Responsive Stats preview card component

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

I'm most proud of how quickly I was able to complete this project — within just 2 hours — while still achieving a result that matched my expectations both in design and functionality. Despite facing a few challenges with image overlays and border-radius behavior, I worked through them confidently and efficiently, and I learned important CSS techniques in the process.

What makes me especially proud is that I didn’t wait for everything to be perfect before starting. I pushed through uncertainty, solved the problems step by step, and saw the project come to life just as I envisioned it. This mindset of taking action and adjusting as I go is something I value deeply.

If I were to do things differently next time, I would spend a little more time planning the structure of the layout before diving into the code. For example, I could sketch the component visually or break it down into smaller, reusable parts. This would help improve maintainability and make the code even cleaner. I would also consider adding accessibility improvements, such as alt text and ARIA labels, and maybe even make the project interactive with JavaScript if the challenge allows it.

Overall, this project was a reminder of how much can be accomplished with focused effort and a growth mindset — even in just a couple of hours.

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

While working on this project, I encountered two main challenges that helped me deepen my understanding of CSS.

The first challenge was trying to apply a color overlay on top of an image. Initially, I attempted to give the container a background color and then set it to transparent, expecting it to layer over the image. However, I learned that this approach doesn't work as expected because transparent removes the background color entirely.

To overcome this, I researched and discovered the best practice is to create a separate div with a semi-transparent rgba() background and position it absolutely on top of the image. This gave me full control over the overlay and produced the effect I wanted.

The second challenge was that my card's border-radius was not visibly applying. I had styled it correctly, but the child elements — especially the image — were overflowing the container.

I resolved this by adding overflow: hidden; to the card container, which ensured that any overflowing content would respect the rounded borders. This helped me understand how overflow and border-radius work together in layout rendering.

Overall, these challenges were valuable learning moments that not only improved the design but also strengthened my foundational CSS knowledge.