product-preview-card-component

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

I am most proud of using css variables to predefine certain values such as text presets, in order to facilitate the correct use of each font type, weight, color, etc in my code solution. I am also proud of the responsiveness of my design.

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

One of the challenges that I encountered was finding a way to allow my code to change between the mobile/desktop image files that were provided, based off of the breakpoints. I was able to place both images within the same image container div, but use css to hide the mobile image when the browser size was above my mobile breakpoint, and hide the desktop image when the breakpoint was within the mobile range. This was a fun solution to problem solve through, even though the mobile image file that was provided was not the same as the one that was used in the figma design, which was disappointing because it sort of defeated the purpose of having a mobile file and a desktop file.

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

I feel like I was able to implement a solution that covered all of the figma design specifications: mobile, tablet, desktop, and hover states.