Flex layout card with responsive image

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

I'm most proud of how I utilized the Flexbox layout to seamlessly display the product image and details side by side, ensuring a clean and balanced design. Additionally, I implemented responsive images, allowing the page to adapt smoothly to different screen sizes, providing an optimized user experience whether on desktop or mobile devices. As for what I would do differently next time: I think I would consider experimenting with CSS Grid to explore different layout possibilities and compare it with Flexbox for this type of design.

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

There was an accessibility issue, as I wanted the screen reader to mention that the old price ($169.99) is crossed out, and to achieve this I did the following:

• I used the attribute aria-hidden="true" with the visible element containing the crossed out price,
• I add an alternative element only for screen reader, that contains the old price and a descriptive text "crossed out" as follows: $169.99 (crossed out)
• within the stylesheet file I made this element invisible.

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

I need to evaluate the styles I used to scale the image to fit the box height in the desktop design. .product-box .product-image { flex: 1; display: flex; }

.product-box .product-image img { width: 18.8125rem; /* 301px */ display: block; object-fit: cover; }