Product preview card solution

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

I’m especially proud of the quality of the responsive design I implemented. The "Product preview card" component adapts perfectly to both small and large screens, with polished hover states that enhance the user experience.

What I’d do differently next time Next time, I’d spend more time organizing my CSS code using a more modular structure with utility classes or even a solution like SASS or Tailwind, to improve clarity and reusability.

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

One major challenge was vertically centering the content in the mobile version without breaking the desktop structure. I had to tweak several flexbox properties and play with conditional margin and padding in media queries to achieve a good layout on all devices.

Another minor challenge was handling image sizes and their behavior at different resolutions. I fixed this by using relative units (em, %, vw) and the object-fit property to keep the image clean and responsive.

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

I’d like to deepen my knowledge in accessibility (a11y), especially regarding optimal use of ARIA roles, keyboard navigation, and screen reader compatibility. Any feedback or helpful resources on this topic would be very welcome.