Product preview card component solution

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

I’m most proud of how I managed to achieve a visually appealing and responsive layout that stays true to the original design specifications from the challenge. The project’s mobile and desktop views are well-optimized, and I enjoyed working with a mobile-first approach, which improved the layout transitions significantly. Next time, I’d focus more on optimizing the CSS further—potentially by leveraging CSS variables and mixins even more for reusable styles across breakpoints and elements, which would keep the codebase cleaner.

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

One of the main challenges was handling the image swapping between mobile and desktop views. Ensuring that the correct image displays at the right breakpoint took some trial and error with CSS media queries, but I eventually achieved it by setting up distinct classes for the images and adjusting visibility based on screen width. Another challenge was designing the hover and focus states to feel intuitive and consistent across devices. Careful planning with CSS transitions helped create smooth interactive effects that look consistent.

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

What could I improve in my project and tips.