Skip to content
Submitted 18 days ago

PulseVista

LVL 2
A solution to the Stats preview card component challenge

Solution retrospective


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

’m incredibly proud of how I "tamed" the responsive design. There’s something almost magical about watching the card transition seamlessly from a vertical mobile stack to a polished desktop row. Getting the violet color filter just right using background-blend-mode was the cherry on top—it made the final result look professional and exactly like the design intent.

Next time, I’d love to breathe more life into the data. I’d implement a bit of JavaScript to create an "animated counter" effect for the statistics so the numbers climb when the page loads. I also want to experiment with more subtle CSS transitions on hover to make the user interface feel more interactive and "alive" rather than static.

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

My biggest challenge was taming the responsive design to ensure the image and text transitioned perfectly from mobile to desktop. I overcame this by simplifying my CSS and using Flexbox more strategically. I also spent a good amount of time fine-tuning the purple overlay on the image, which I eventually solved using the background-blend-mode property

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

I’d love some feedback on CSS optimization—specifically, if there’s a cleaner way to handle the image swap between mobile and desktop without duplicating too much code. I'm also curious about accessibility (A11y): are my color contrasts and font sizes easily readable for everyone? Finally, if anyone has tips on the best way to structure reusable Flexbox utility classes for future projects, I’m all ears

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Kabidu Munguakonkwa Sage’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord