Project breakdown

- In our third and final project, we'll use loops and some other tools we've covered earlier to solve an annoying problem everyone building responsive websites will encounter. How to manage responsive images markup without having to write huge volumes of HTML. To be clear, there are already better solutions out there to solve this problem. I'm just using this as an example because it gives you an idea of how we can use JavaScript for less obvious things. Also, if you're not familiar with responsive images, go check out my course Responsive Images to learn all about this new technology before we get going.

In exercise files, you'll find a regular HTML and CSS document with a series of images. Right now, the images are not responsive, so no matter what screen size you display the site on, you will always download the large, high-resolution images. We're going to use JavaScript to inject responsive images code into the HTML on the fly, so the browser can load the appropriate image files rather than always use the big ones. Here's how it breaks down. First, we'll make some changes to the HTML so the images are not immediately downloaded unless JavaScript is not enabled.

This prevents the browser from accidentally downloading two different image files for one image. Next, we'll find all the images on the page, loop through them one at a time, retrieve the original image reference, generate responsive images. Markup and inject that markup back into the page. This project demonstrates how JavaScript can be used as a helping hand behind the scenes to address issues and improve code. It is also a glimpse into how JavaScript is used to progressively enhance websites to introduce advanced features only when they are supported.

All right, let's make these images responsive.