Rundown of project setup

- [Narrator] In the exercise files for this movie, 10_02, you'll find the starting point for the last project. You see this is the same project we've been working with throughout. I made a couple of small changes, we'll take a look at them in a second. Just let me explain what we're going to do here. Right now, all the images that are displayed throughout this site are provided as a single image file. That means regardless of what viewport width we're using, what screen resolution we have, and what kind of device we're on, we'll always serve up the same exact images. But different screens have different resolutions, and different screens have different widths, and there is technology available that allow the browser to pick whatever image size is appropriate for the current display.

That's what's called responsive images, and that's what we're going to hook in. The challenge is responsive images markup is really chunky, and takes up a lot of space in our HTML. It's also not supported by all browsers yet, so I want to use JavaScript to inject the responsive images markup, when it's appropriate, into the site. I should preface that by saying there are actually better JavaScript solutions for this existing already, I'm just using this as an example to show you how loops work, and how we can use loops inside loops to do fancy things.

If you look at index.html, you'll notice I've made a couple of subtle changes to the images markup. Here we have a series of images, and for all the images on the page, I've added dash 800 at the end of each image. I'll explain why in a second. I've also added this data-type attribute, and set the first set of images to showcase, second set of images to reason, third set of images to feature, and fourth set of images to story.

The reason why I'm doing this is, if we go back to the browser for a second, you'll see the width of these different image displays is different depending on what block we're in, so the showcase images are full width on wide screens, the reason images are quite small, the feature images are bigger, and the story images are even bigger. We want to provide the browser with information about exactly how wide each of these image displays are depending on the width of the screen, so that the browser can pick the correct image.

We'll get back to that later on. If you go into the images folder in the project file, and go into any of the folders, you'll see, for each of the images, we have a series of different sizes. I've just, for simplicity's sake, set them up to all be the same. For every image, there's a copy that is 400 pixels wide, one that's 800 pixels wide, one that's 1200, 1600, and 2000 pixels wide. This gives the browser plenty of options to choose from, and provides us with a fairly bulky set of scripts that we need to add into the page.

Right now, I've set up all the images to be the 800 pixel wide image. This will be the fall back in case the browser does not support responsive images markup, or the JavaScript doesn't run, so regardless of what happens, every browser will download this 800 pixel image. Technically, that is a waste of resources, if the browser needs either a smaller or a larger image, but it's a good fall back to ensure everyone at least gets an image. All right, now you know how all this fits together. Let's dive in, and write some JavaScript.