Image Gallery HTML

[00:00:00]
>> Brian Holt: On the course website, I have all the HTML if you wanna just copy and paste it. But I'm actually gonna go through it and write and explain what I am gonna do. So I'm gonna make just like a base level document. Let's make this a lot bigger.

[00:00:13]
>> Brian Holt: And here, we're gonna call this photo gallery or Luna gallery or something like that. We'll call it the Luna gallery.
>> Brian Holt: Okay?
>> Brian Holt: And then here, I'm gonna create a div.
>> Brian Holt: Call it the image gallery.
>> Brian Holt: Now, what I wanna get here is I wanna get 12 images.

[00:00:40]
I want them to have the class of gallery image. And have an alt text of Luna.
>> Brian Holt: So if you don't want to copy all that again, that's all just right here.
>> Brian Holt: And that's actually what I'm gonna do.
>> Brian Holt: Otherwise, feel free to write 12 image tags.

[00:01:01]
That just doesn't seem like a useful exercise to me.
>> Brian Holt: Let's go ahead and make sure this is indented all correctly.
>> Brian Holt: There we go.
>> Brian Holt: So now, if I come over here to Firefox. Let's actually make a new tab here. Open.
>> Brian Holt: Go to the desktop gallery index dot html, and open that.

[00:01:33]
>> Brian Holt: Right now, I have not moved those images into the directory, but you can see here all of the alt texts are showing up. So far so good. So I'm gonna go download that gallery.
>> Brian Holt: So I guess I can just copy it from where I have it.

[00:01:49]
Well, whatever. We'll download the image from the image gallery.
>> Brian Holt: Open.
>> Brian Holt: And then here, I'm just gonna grab this folder here, the images folder.
>> Brian Holt: Going to just move that into my gallery.
>> Brian Holt: Okay, and so now, you can see here, I have all of these images here next to my index dot html.

[00:02:19]
>> Brian Holt: Good?
>> Brian Holt: So now, if we come back to gallery
>> Brian Holt: Not that one, this one. Now, you can see, we have all these large images showing up. So the way that we're gonna show and hide images is we're gonna be using CSS classes, right? We're gonna take advantage of the fact that we can add and subtract classes from image elements very simply.

[00:02:51]
And so, let's go ahead and create another CSS file here.
>> Brian Holt: And call it, I'm gonna call it styles dot css, just cuz I'm not creative and that's what I call all of my CSS files. But feel free to call what you wanna call it. And we're just gonna put in it just a handful of CSS here.