Product Preview Card Component

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

I am happy with the way the responsiveness turned out. The images are wrapped in a picture tag and swapped out by the browser when the screen resizes rather than simply hiding one of the images. This prevents mobile users from using unnecessary data.

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

I had difficulty trying to figure out how to swap out the images in an accessibility friendly manner. I needed to swap one image with the other without causing screen readers to relay the wrong information.

Many problems can occur if not careful including:

• Visible hidden images still showing up to screen readers.
• Multiple alt tags leading to image redundancy.
• Swapping images without causing unnecessary interruption.
• Using the proper semantic tag layout.

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

There are multiple areas I would like help with:

• BEM (block-element-modifier)
• Accessibility
• CSS organization