All language subtitles for 005 Creating Our Base Template_Downloadly.ir_en

Let's now start

to really create our base template.

So the template upon which all other templates

will be based on later.

So basically, we will be converting a regular html file,

that is in the starter files to a Pug template.

So basically, we're gonna start creating

the layout of this page.

So this header here and also the footer.

Okay, not the content of course,

because that we will then build more dynamically

a bit later, okay.

But we will leave everything ready,

so that we can then inject all of this real content

into that overall base template.

So, let's do that now.

And let's actually start by getting rid

of all of this content that we had here.

So this was really just to show you

the different features of Pug.

And now, let's open this overview.html file,

so that we can basically convert it here to Pug.

Okay, so that was the original html file

that I created to design the overview page

that we just saw dynamically rendered.

Okay, so this is what we have in the head

and actually let's go ahead and copy this entire code,

so that we can then convert what's missing here.

Okay, so the content of our title is this,

and so let's copy it, then get rid,

and so this is the content of the main page, right.

Then we already have the favicon, and also the style.

So what we're missing is basically this stuff here,

for response of web development,

and also this Google font link, okay.

So, starting with that,

so instill a style sheet,

and then let's just grab this reference

and replace it with single quotes.

Okay, then I also want to define these two

so let's cut them here,

and let's simply convert whatever we have here.

All right.

Oh and also the single quotes.

Okay, let's actually put this one at the end,

and so, that is our hat for our template.

Next up, let's take a look at the header.

Okay, so basically we have this whole element here,

with just a header so that dark gray bar

that you saw there at the top of the page.

And so let's copy this

and put it right here.

So, that's a lot of code

and you will see how little code it will actually be later,

once we translate this to Pug.

Okay, and here let's now actually put a visible comment

into our html, saying HEADER.

Okay, and so actually, that's without the dash.

So in VS code, when I hit the comment shortcut,

then it automatically creates a Pug comment.

But here, I really just want one comment,

that's also available in the html output.

So anyway, let's now create the header element,

and let's see what we have here.

So we have header with the class of header.

And all we need to do to specify a class,

is DOT and then the class name.

So, header again.

Then, in there, we have an element nav.

And so, indentation, and then nav.nav

which is the class name here again,

and then we also have another class name,

and so, another dot.

And that's it.

So nav tours.

So, if you're familiar a bit with CSS architecture,

maybe you're seeing that I'm using the BEM architecture.

And so, nav is the block

and then here this tours is a modifier.

And here these underscore underscore

means that this is a block

or actually an element.

So block, element, and modifier.

Okay, so that's not really important,

but I just wanted to mention it.

Anyway, inside of the navigation,

we have a link element.

So, a, with the class of nav__el.

Then here, we have this href attribute,

and so, remember for that we use parentheses,

and then href,

and set it to nothing.

So basically, that's what this hash here means.

And then, simply the content,

so all tours.

Next up, we have this form here,

but actually we're not going to implement that

at this point.

So let's get rid of it.

All right and so this is our navigation.

So, this code here

is basically equivalent to this.

And so next up, we have this header logo.

So, new line, but one level back,

in the indentation so that it's on the same level

as the navigation.

So, just as it is here, right.

Now when it's a div,

we don't even have to say div.headerlogo, in this case.

So, when it's a div,

which is kind of the standard block element in html,

all we need is the dot

and then that will automatically create a div element.

Then in there, we have this image,

and so that of course needs a couple of attributes,

which is first, the source.

So image, logo, white.png,

and then also the alternative text, okay.

Next up, we have this other navigation here,

and so again, that's on the same level

as the first navigation and this div.

So one level back in the indentation

and create a new nav element with the class nav

and the class nav user.

Then in there, there's a link,

very similar to this one,

so let's just copy it to save ourselves some time.

And then here it says, My bookings.

Then another one, and actually let's just copy it again

with the difference that it doesn't have this content,

but instead it has some more content inside of it.

So, this.

So, very easy again,

image, with the source, .jpg.

And it also has a class name,

so let's edit here with the dot.

So, nav, user image.

And then simply a span saying Jonas.

And, as you can see,

this is actually going to be the dynamic part

of this header.

And so actually all of this here will become a dot

in the beginning.

Okay, but anyway, let's now finish coding up this part here.

So basically, these two buttons,

so the login button and the sign up button.

So, of course you will not have the login

and the sign up button at the same time

of having this user navigation here.

So my bookings and then the name of the user, okay.

But again, let's put that here for now,

and then comment out what we don't need.

So, button, nav element, and also nav element

and then the modifier cta for sign up.

And actually there's also one before that for login, right.

So, that's this one.

Okay and so that's actually it.

So that's the header,

and you see that this code here

is equivalent to all of this what we have here

which looks a lot more confusing,

if you ask me at least.

So, delete that, and so as I said,

this user navigation here,

this part is only gonna be available

when someone is logged in.

And so for now, let's completely comment all of this out.

All right, so next up we have the content

and so let's add another comment here

and in our html,

actually all that we're gonna add now

is this section here with the class of overview.

Because then in there is where we have

all of these content cards,

which again, for now, we will not include there.

So again, what we're doing now

is really just a skeleton, so to say.

All right, so section.overview.

Overview.

And for now, let's simply put an h1 here

with the name of the tour that's coming in as a variable.

Okay and of course this section here

needs to be at the same level as this header, great.

So all we're missing now is the footer

at the end of the page.

So let's go there and here we go.

Let's grab all of this.

And this should actually be a footer element,

not just a regular div.

So a footer element with the class of footer,

then a div, with the class of footer logo,

and so again, I don't even need to specify the div element.

Then we have an image here,

.png and so I hope that typing all of this out by yourself,

by hand basically, makes you keep this knowledge

on how all of this works a bit better.

Okay, so this is alt

and now this footer navigation,

so an unordered list,

and now in there, we have a couple of list item elements.

So list item, and then in there

there is a link in each of them.

So, a with the href of nowhere basically.

And then, About us.

Now, here in this situation,

needing this extra line only for specifying this li,

is not really ideal.

And so what we can do here,

is to use a colon, like this,

and then basically put it all on the same line.

And so this will then still work

as if there was a new line with an indentation,

but basically allowing us to do it all on the same line.

Okay, then for some reason,

the syntax highlighting stops working,

but well, that's not that important.

So download the applications,

become a guide, careers.

And that's actually it.

Next up, we have this footer, copyright,

and so in here we have just a bunch of text.

So it specify the copyright symbol here,

and that's by Jonas Schmedtmann.

So, that's me and just like in all my other courses,

I want you to know that you are free

to basically use this project for yourself.

So basically to put it in your portfolio

or to show anyone that you want,

that you built this project in my course.

Now what you cannot do

is to create your own course based on this project.

And it's sad that I even have to say this,

but of course there have been people who used my project,

basically to put some free courses on YouTube,

where they copied my projects, one by one.

Okay, so let me just write that out here.

For your own purposes,

except producing of course, your own courses or tutorials.

Okay and that's actually it.

All right, so that is the translation

of the skeleton basically that we have here,

of course excepting the content.

Okay, so we don't longer need that.

And, just to finish, let's take a quick look

and indeed, here goes our content.

Now this here looks a bit out of place

because this copyright text here is so long.

So, this footer navigation basically.

But since that is a flex container,

we should be able to fix that

with justified content, flex-end, not this one.

Okay, and don't worry if you're not familiar with CSS,

or even Flexbox this is just

to just simply visually fix the small problem

that we had here.

So let's search for footer here.

Here we are.

Fix that here,

and if we now reload,

yeah then we're good, perfect.