Product Preview Card HTML/CSS Solution

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

I'm most proud of learning a new way to code responsive images when images have to be switched out at breakpoints. I got this solution from Kevin Powell who I acknowledge and link below. I was really struggling to code these images and was so happy to find this method. I definitely made a note to myself for future reference.

If completing this project again, I would make leaner code a priority from the get go. I cleaned it up a lot toward the end so what I started with can't be seen but it could have saved me a long time if I researched ways to make my CSS leaner or ensured there was no redundant code as I went.

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

The main challenge I encountered was how to switch out the desktop and mobile images based on the device breakpoint. I had tried setting it as a background and inserting the URLs in CSS but they were not rendering correctly for me. I decided to look at others' solutions to see what ways these responsive images were coded. I stumbled upon a video for this project by Kevin Powell and I really liked the way the responsive images were handled in his solution! He added the images to the HTML and switched them out at the breakpoints using the srcset element. This was new to me and I really thought this was the most efficient way to code them. This really taught me to consider other's code, especially on projects like this where I'm actually able to view different takes on the project.

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

I did pare back quite a bit, but are there any other areas of code that I could have simplified? Are there any recommended workflows that could save me coding space, specifically for CSS? I have a tendency to overdo it.

Are there any other recommendations for how to handle the responsive images for this project?

Thanks in advance for any feedback!