[MUSIC]

There's often a lot of repetition in dynamic or even static websites.

A lots of the head tags contain the same stuff and the footers are the same too.

We're going to use a principle called DRY, or Don't Repeat Yourself.

There's no need to have this duplication in multiple files.

We'll split up our HTML into unique parts and

we'll add placeholders for dynamic information.

This will form the templates for our dynamic site.

Okay. So

we've got our design files here in the design folder.

We'll take a look at each one individually.

And then see what common patterns we can pull out.

And we'll extract them and put them into a views folder.

So let's just quickly create that folder now.

[BLANK_AUDIO]

And let's take a look at our error page.

And as you can see at the top here there's some CSS embedded,

then there's the body, and then there's the error.

Then there's this search form, and then body in HTML.

In the index, we've got the same header again

the image with the search, and this footer here.

And with the profile, we've got all the embedded CSS, as well.

And there's a new div called profile with information in it and the bottom.

So the commonality between all three is that they've got this same header

of html head.

All this stuff here, all the way up to the top of the body.

So, we'll extract all of that into a header.html.

So let's do New File.

Header.html.

And I just copied all that from the top of the other page and pasted it in.

Save.

Now let's create the footer.

So New File, footer.html.

And in this one we want just the body and the html.

And just ignore the red because that's just saying that we don't have an opening

and closing, we'll be dynamically generating this from these pages.

We're gonna put the header at the top and the footer at the bottom,

so when it gets sent to the client it will be valid html.

Now, let's look at some of the parts which are common in both places.

If we look at the error, we've got this image here, which is the search image.

And we've got this form here.

So, we could extract that out and call that search,

because we already have that here on the home page.

So, we can just copy all that, and

then create a new file called search.html.

[BLANK_AUDIO]

And make sure it's in the views folder.

And paste in the image.

So you can hover over the image to see what it is.

And you can see that, that's the form and it posts to the home route, which is cool.

And that's it.

Let's take a look at the error page again.

And we have this one error message here, this div, so

we could extract that into its own HTML file as well, so

let's call it error.html.

And we just paste that in.

And the only thing that we're missing now is the profile page,

so if we look at the top of the profile page,

we've got the header and then we've got the profile information.

So let's just go from that div, the profile div to the end of the profile div,

because the body and HTML are the footer.

And we can copy that.

Create a New File, profile.html.

Here's the n.

Save it.

And, I think that's it when we come to our views, we've kept our views dry and cool.

That's it.

What we need to do now is we need to generify or make generic the profile page.

Cuz at the moment its got an image of Waldo, we want a picture of the username,

so we can just swap out this with anything that we want.

We can put in maybe two squiggly brackets, so that when we search

through this later on in our code, we can just swap out with whatever we want.

So we can call this avatarUrl,

just like what we did in our router, if you remember.

In the home not the home route,

the user route we had avatarurl, username but it's in javacriptPoints.

So let's keep to that same standard that we did before.

So in here we can put username.

[BLANK_AUDIO]

In here we can put badges.

[BLANK_AUDIO]

In here we can do javascriptPoints.

[BLANK_AUDIO]

And the error.

It can be also a number of reasons why there's an error.

There could be a parsing error, there could be a not found, etc.

We can change this with to whatever we want.

So let's just do errorMessage.

Like that.

Cool. So what we've done is,

we've gone through all of our designs.

We've found the common parts.

We've extracted them, into their own separate,

distinct view files, which we're gonna read in later on.