Setup

[00:00:00]
>> Brian Holt: What we're going to do today, is we're going to focus more on interacting with the DOM. So, and then we'll go over the feed-a-mole on the last part. So making your site interactive. So click on this section here, and we're gonna go through and we're gonna add some pizzazz to your portfolios, right?

[00:00:28]
So some more interactivity, some more different kind of things you can do here. So, let's see if I can find for you what we're going to build first we're gonna build. This. We're gonna build a little image gallery. This is my dog. [LAUGH] And so you can notice here, if I hit next, the previous one gets grayed out and scroll through all the various images here, till eventually, you get to the end and then it grays out there as well.

[00:01:00]
This should be fun.
>> Speaker 2: I have a question.
>> Brian Holt: Yeah?
>> Speaker 2: When those images load, do they load all at once or do they load when you click the button?
>> Brian Holt: That's a good question. So when I refresh the page here, if I inspect element here, you can see these ones that are grayed out.

[00:01:22]
If I click on that, you can see done here, that it has display none on it. So something that has display none on it, is not going to load as images. So these are actually being loaded on the fly, until this actually gets clicked, then it load that one.

[00:01:36]
This one is still technically loaded in memory, probably, depending on which browser you are using. So it just depends on which browser you're using, and that kind of stuff that, when there's display none on it, you can pretty well be guarantee that it's not going to load. Good question.

[00:01:55]
>> Brian Holt: Okay. So, what I want you to do now is I want you to get a bunch of your images together, and we're going to build an image gallery. You are welcome right there, you can download the pictures of my dog, and just use those if you don't want to go gather your own images, but feel free to use your own images as well.

[00:02:13]
I'll give you just a second to do that, and then we're going to open a brand new VS code project and make this. It doesn't matter how many images you have, I mean, as long as you have, I'd say. But she have five, it's a minimum. They again, you feel free to just go ahead and use the ones that I gave you as well.

[00:02:36]
>> Speaker 3: Is there particular sizes that are going to be recommended?
>> Brian Holt: I mean, for the sake of this project, not particularly. In general, you want the resolution of the image to be larger than what you're displaying it at, so if these ones, if I didn't distinct how high they were, they'd be much taller.

[00:02:59]
Right, cuz if I try and stretch them out, then they look pixelated and it looks bad. Right. So once you kind of have those images together, we’re gonna make a new project here with VS code.
>> Brian Holt: And do a file, new window.
>> Brian Holt: Close that one. And I'm gonna come in here, and I'm going to make anew project here just to my desktop.

[00:03:34]
New folder, I'm gonna call this the gallery or something like that, or carousel, or whatever you wanna call it. I'm going with the gallery. Okay.
>> Brian Holt: And let's just go ahead and put this over here.
>> Brian Holt: And let's make this split a screen with Firefox.
>> Brian Holt: Okay. So once I've done that, I'm gonna make a new file, and I'm gonna call it index.HTML.