[MUSIC]

Okay, so we've built a couple of navigation bars.

But the problem is, we don't really have much of a site to navigate yet.

So in this lesson, we're gonna just quickly build out the sites so that

it maps more closely to the structure that Kate showed you in the earlier lesson.

So we're gonna build the photo album concept,

where you have a set of photo albums at the top level.

And then you can dive in and you can see all the photos in an album.

And then following that, you can then go to an individual photo.

So, let's just build sort of the basic structure that we need for

that by creating a few navigation links and then creating a few new files.

So here's our page, as it was, and we've got the Home and then another page there.

So, first thing I'm going to edit is the navigation bar, so opening up the index

file, I'm going to go into my navigation and change it a little bit.

So I want to have an albums page.

All right, so remember this is the part of the navigation bar that is shown when it's

uncollapsed, if you like.

So albums.

And I'm just gonna change the link text that says Albums.

So save.

Jump back over to the browser.

Check that it does work we expect.

Good. So when I click on Albums I get

page not found because I haven't created it yet.

So we've got Albums.

But I'm also going to create another page which just sort of pulls out

all of the photos that I've uploaded and just shows all of them in a big list.

And I'll call that All Photos.

Okay?

Let's save that, check that.

So now I've got three links on my navigation bar.

And so Home's gonna kinda take us to our sort of welcome page,

then Albums is gonna show us all the albums we've created.

And then All Photos is gonna show us all the photos we've uploaded.

So let's now create these pages.

So I've got to create albums, photos.

I'm gonna create an additional page as well which is gonna be called photo1.

So that's just going to be there so

that we can have a page that shows just an individual photo.

But it's not gonna be linked off the navigation bar directly,

the user has to come and drill down to get to that page.

Okay, so that's our album.

One way to do it is to just duplicate this like this.

So we can just do copy, paste, paste, paste.

So I'm gonna create three index files.

Then I need to rename them.

So we've got albums.

We've got photos.

And we've got photo1.

Okay.

So now we've got four pages, and let's just check if the linking is working now.

So Home, Albums, that doesn't break anymore, All photos works.

So I can click on these links, and you'll see that it's updating

the page that I'm viewing there as I move around.

Right. So that's my basic site structure.

Now I'm going to create the links and put some images in so I can move around.

And we are going to also work on some style sheet stuff along the way.

Right, so let's go into the Albums page.

So we open that up in the text editor.

Actually let's drop it into the same window, so we can jump through.

So I've got Albums here, and what I want to do inAalbums,

is essentially just drop in a list of photos.

Cuz normally when you look at a photo album online,

you start off with a cover photo of the album.

So here we go, let's create the cover photo.

Now remember with images, for accessibility purposes,

we always put an alt text in on the image.

So that if someone doesn't actually have access to the image, then they can

at least get a description of what they should be seeing, if they were able to.

Right. So the source is images and img_1.jpg.

Now remember that with the resources for this course you get this kinda starter

Bootstrap site, which comes with a set of images so that you can use those.

Of course, you can use your own images or whatever.

And let's just check what it looks like, so I can write a decent description.

Okay, cover photo.

Then we might just write cover photo for my first album.

You can write the alt text, write it as detailed as you can, but

let's just call it graffiti cover image.

Right. So if someone's not able to see the image

they can at least see that description.

And say, oh yeah, so this is an image of some graffiti.

Right. And so we're gonna have three albums.

Let's just do 2, 3.

Okay, so that's number 2.

That's not graffiti, that is what we call a full English breakfast.

So we'll just call that the full English, which is the height of English cuisine.

And then we've got some cheese.

Right. So, let's put in the word racks of cheese.

Okay.

So, let's look at the page now.

There it is.

But it's a bit confusing, it's still got this weird title, and

also the images are a bit too large.

I mean normally when you're putting images online you would resize them

in your photo editing software to be the size that they want to be displayed at.

So if they're thumbnail images like an album you would make a small version, and

then you would make a larger version for when the person wants to click through.

But for now we're just going to use CSS to kind of get the browser to resize them for

simplicity.

So how do I use CSS?

Well, I'm going to add a class to the image like this,

which is going to be album cover.

Okay?

Save that.

And then I want to start writing some more styles of my own.

So remember back when we created our own styles file?

Well, and then we deleted it again.

Well, I'm going to recreate it.

So, there's styles, and I'm gonna go to a new file called styles in the CSS folder.

Styles.css, there it is.

And I'm gonna create a class called album_cover which has

a width of 25% of whatever it's sitting inside of.

Ok, so that's just a CSS class called album_cover, so

full stop then album_cover, and it's just got one property, which is the width.

And so if we go back here, we can see, let's just save that and

have a look at it.

You see now that one has shrunk to being 25% of whatever the containing element is.

Right?

So as we shrink it, it shrinks down to 25% of, basically that container div here.

Okay, so let's apply that class to the other ones.

And reload.

Right. So now I've got my album covers.

And because they're album covers,

I'm goning to add one more little style element to them.

Which is, I'm gonna give them a solid border of say,

20 pixels, which is solid.

And I want it to be a gray border.

Okay, you can probably find nicer colors than these, but that's just a basic thing.

And finally, I want to make those images into links.

So when I click on one of these album covers,

I want to jump to a list of photos.

Which the photos in the album.

But let's just say it links to photos.html.

Okay?

So then, reload and.

That's there and reload that and then I can click on that and

it takes me to photos.

Right?

And finally, let's just say here are my albums.

So go Homepage, Albums, click on the link, and now we're in photos.html,

so the final one to edit is photos.html, so let's load that up.

[SOUND] Drop that in there.

Again, I'm gonna put the [SOUND] style sheets in.

[SOUND] So you can imagine as your site grows that this problem of having to apply

any changes back to everything.

So imagine I wanted a new thing on the navigation or

want to include a new CSS file.

Then you'll have to go and reapply that change to all of my HTML files,

which is a right pain.

But we're gonna learn, as we work through the course and

through the specialization, there are much better ways of doing this, so don't worry,

we're gonna deal with that issue.

Okay, so I've done that, and this is my Photos page, and

Photos is just gonna have another list of photos.

Bit like this one.

And we'll change the title to Here are the photos.

And there's my photos.

And it's not gonna be class image cover, though.

It's gonna be class.

[SOUND]

Photo.

[SOUND] Okay, and we'll get rid of that for now.

And I want it to link to photo1.html.

Because when they click on a photo in this list,

I want it to go to an individual photo.

And so I need to define this class as well.

So let's do that.

And we don't need the border this time, so just so it differentiates.

Save that.

All right.

So I'll go Albums, and then into a photo.

There should actually be a list, so I'll just drop some more in there.

Just lay it out nicely.

There we go.

So they're all gonna link to the same file for now, but that's okay.

And this one, let's just change the image,

2, 3, 4, 5, save.

Okay, now I've got five images on there, and they all kind of jump

through to this final page which is going to be called photo1.

And let's just go and edit it photo1.

That's photo1.

So remember, I might as well in here,

I can put that style sheet back into photo1 like that.

And then, photo1 is gonna have just the title of the image.

And then just an image.

So image, source,

equals image1.jpeg and.

Okay.

So then, that's that, now let's just do one final style for that.

So, class equals singl_ photo and

single_photo and this one

is going to have width 75%.

Because it's a single photo I want it to be a bit larger.

So hopefully.

Okay. So now.

So, let's just run through that.

So we've completed the basic site structure that we can work with for

the rest of the lessons.

So, we've got albums.

Click in or out on all of your photos.

Click on an album and then you can jump through.

You can see all of the photos in the album.

If you click on a photo then you can see a bigger version of that photo.

Okay, so that's our basic site structure.

In the next lesson,

we're gonna show how we can solve the problem, which we can just see here.

Well, as I through, I don't know where I really am in the site.

Yeah, I've got my navigation, which tells me where I can go.

But I don't know where I am.

So, we're gonna ask the question, where am I?

And try and answer that in the next lesson.

[MUSIC]

Building out the site

Responsive Web Design

Meet the Instructors