Product Preview Card

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

What I'm Most Proud Of

I'm most proud of how I implemented the responsive design using media queries. Switching between mobile and desktop images based on screen size added a polished, professional touch to the project. Additionally, integrating custom fonts using @font-face was a challenge at first, but seeing the final typography perfectly match the design was very rewarding. It enhanced the overall aesthetic and made the component feel unique.

What I Would Do Differently Next Time

Next time, I would like to experiment with CSS Grid for the layout instead of just using Flexbox. While Flexbox worked well for this project, CSS Grid could offer more control over the placement of elements, especially for complex designs. I would also explore adding JavaScript for interactive features like quantity selection or product variation options to make the component more dynamic and closer to a real-world e-commerce experience.

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

Challenges Faced and How I Overcame Them

The greatest challenge that I faced had to do with having to work with two different product images, for both mobile and desktop views. I was unsure as to how I would be able to display the right image, based on the size of the screen. This was resolved after trying a couple of different approaches with media queries. I did this by setting the desktop image to appear for smaller screens and the mobile image for larger screens. That helped make the layout responsive, creating a seamless experience across devices.