‫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.