1
00:00:01,090 --> 00:00:02,290
‫Let's now start

2
00:00:02,290 --> 00:00:04,750
‫to really create our base template.

3
00:00:04,750 --> 00:00:07,490
‫So the template upon which all other templates

4
00:00:07,490 --> 00:00:09,360
‫will be based on later.

5
00:00:09,360 --> 00:00:12,723
‫So basically, we will be converting a regular html file,

6
00:00:12,723 --> 00:00:16,163
‫that is in the starter files to a Pug template.

7
00:00:17,840 --> 00:00:19,830
‫So basically, we're gonna start creating

8
00:00:19,830 --> 00:00:21,850
‫the layout of this page.

9
00:00:21,850 --> 00:00:26,450
‫So this header here and also the footer.

10
00:00:26,450 --> 00:00:28,650
‫Okay, not the content of course,

11
00:00:28,650 --> 00:00:31,710
‫because that we will then build more dynamically

12
00:00:31,710 --> 00:00:33,440
‫a bit later, okay.

13
00:00:33,440 --> 00:00:35,220
‫But we will leave everything ready,

14
00:00:35,220 --> 00:00:38,920
‫so that we can then inject all of this real content

15
00:00:38,920 --> 00:00:41,053
‫into that overall base template.

16
00:00:43,030 --> 00:00:45,440
‫So, let's do that now.

17
00:00:45,440 --> 00:00:47,650
‫And let's actually start by getting rid

18
00:00:47,650 --> 00:00:50,090
‫of all of this content that we had here.

19
00:00:50,090 --> 00:00:51,810
‫So this was really just to show you

20
00:00:51,810 --> 00:00:54,550
‫the different features of Pug.

21
00:00:54,550 --> 00:00:58,070
‫And now, let's open this overview.html file,

22
00:00:58,070 --> 00:01:01,463
‫so that we can basically convert it here to Pug.

23
00:01:02,420 --> 00:01:05,370
‫Okay, so that was the original html file

24
00:01:05,370 --> 00:01:08,360
‫that I created to design the overview page

25
00:01:08,360 --> 00:01:10,610
‫that we just saw dynamically rendered.

26
00:01:10,610 --> 00:01:13,810
‫Okay, so this is what we have in the head

27
00:01:13,810 --> 00:01:17,950
‫and actually let's go ahead and copy this entire code,

28
00:01:17,950 --> 00:01:21,053
‫so that we can then convert what's missing here.

29
00:01:22,610 --> 00:01:26,573
‫Okay, so the content of our title is this,

30
00:01:27,420 --> 00:01:29,973
‫and so let's copy it, then get rid,

31
00:01:33,460 --> 00:01:37,980
‫and so this is the content of the main page, right.

32
00:01:37,980 --> 00:01:42,150
‫Then we already have the favicon, and also the style.

33
00:01:42,150 --> 00:01:44,980
‫So what we're missing is basically this stuff here,

34
00:01:44,980 --> 00:01:46,990
‫for response of web development,

35
00:01:46,990 --> 00:01:51,143
‫and also this Google font link, okay.

36
00:01:52,210 --> 00:01:53,563
‫So, starting with that,

37
00:01:58,280 --> 00:02:00,123
‫so instill a style sheet,

38
00:02:02,830 --> 00:02:05,610
‫and then let's just grab this reference

39
00:02:09,040 --> 00:02:11,803
‫and replace it with single quotes.

40
00:02:13,970 --> 00:02:18,650
‫Okay, then I also want to define these two

41
00:02:18,650 --> 00:02:21,273
‫so let's cut them here,

42
00:02:23,890 --> 00:02:28,323
‫and let's simply convert whatever we have here.

43
00:02:40,099 --> 00:02:40,932
‫All right.

44
00:02:42,960 --> 00:02:44,473
‫Oh and also the single quotes.

45
00:02:50,470 --> 00:02:54,223
‫Okay, let's actually put this one at the end,

46
00:02:55,780 --> 00:03:00,730
‫and so, that is our hat for our template.

47
00:03:00,730 --> 00:03:03,993
‫Next up, let's take a look at the header.

48
00:03:05,640 --> 00:03:09,143
‫Okay, so basically we have this whole element here,

49
00:03:10,100 --> 00:03:14,600
‫with just a header so that dark gray bar

50
00:03:14,600 --> 00:03:17,140
‫that you saw there at the top of the page.

51
00:03:17,140 --> 00:03:18,430
‫And so let's copy this

52
00:03:20,500 --> 00:03:22,530
‫and put it right here.

53
00:03:22,530 --> 00:03:24,180
‫So, that's a lot of code

54
00:03:24,180 --> 00:03:27,800
‫and you will see how little code it will actually be later,

55
00:03:27,800 --> 00:03:29,920
‫once we translate this to Pug.

56
00:03:29,920 --> 00:03:33,480
‫Okay, and here let's now actually put a visible comment

57
00:03:33,480 --> 00:03:37,370
‫into our html, saying HEADER.

58
00:03:37,370 --> 00:03:41,070
‫Okay, and so actually, that's without the dash.

59
00:03:41,070 --> 00:03:44,020
‫So in VS code, when I hit the comment shortcut,

60
00:03:44,020 --> 00:03:46,860
‫then it automatically creates a Pug comment.

61
00:03:46,860 --> 00:03:49,320
‫But here, I really just want one comment,

62
00:03:49,320 --> 00:03:51,833
‫that's also available in the html output.

63
00:03:53,470 --> 00:03:56,690
‫So anyway, let's now create the header element,

64
00:03:56,690 --> 00:03:59,040
‫and let's see what we have here.

65
00:03:59,040 --> 00:04:02,120
‫So we have header with the class of header.

66
00:04:02,120 --> 00:04:04,680
‫And all we need to do to specify a class,

67
00:04:04,680 --> 00:04:07,330
‫is DOT and then the class name.

68
00:04:07,330 --> 00:04:09,410
‫So, header again.

69
00:04:09,410 --> 00:04:12,530
‫Then, in there, we have an element nav.

70
00:04:12,530 --> 00:04:17,480
‫And so, indentation, and then nav.nav

71
00:04:17,480 --> 00:04:19,537
‫which is the class name here again,

72
00:04:19,537 --> 00:04:22,200
‫and then we also have another class name,

73
00:04:22,200 --> 00:04:23,880
‫and so, another dot.

74
00:04:23,880 --> 00:04:24,713
‫And that's it.

75
00:04:25,850 --> 00:04:28,550
‫So nav tours.

76
00:04:28,550 --> 00:04:32,290
‫So, if you're familiar a bit with CSS architecture,

77
00:04:32,290 --> 00:04:35,620
‫maybe you're seeing that I'm using the BEM architecture.

78
00:04:35,620 --> 00:04:37,660
‫And so, nav is the block

79
00:04:37,660 --> 00:04:40,260
‫and then here this tours is a modifier.

80
00:04:40,260 --> 00:04:42,500
‫And here these underscore underscore

81
00:04:42,500 --> 00:04:44,180
‫means that this is a block

82
00:04:44,180 --> 00:04:45,560
‫or actually an element.

83
00:04:45,560 --> 00:04:49,293
‫So block, element, and modifier.

84
00:04:50,160 --> 00:04:52,290
‫Okay, so that's not really important,

85
00:04:52,290 --> 00:04:54,890
‫but I just wanted to mention it.

86
00:04:54,890 --> 00:04:57,120
‫Anyway, inside of the navigation,

87
00:04:57,120 --> 00:04:59,270
‫we have a link element.

88
00:04:59,270 --> 00:05:02,920
‫So, a, with the class of nav__el.

89
00:05:07,130 --> 00:05:10,330
‫Then here, we have this href attribute,

90
00:05:10,330 --> 00:05:12,973
‫and so, remember for that we use parentheses,

91
00:05:14,230 --> 00:05:15,063
‫and then href,

92
00:05:16,930 --> 00:05:18,890
‫and set it to nothing.

93
00:05:18,890 --> 00:05:22,020
‫So basically, that's what this hash here means.

94
00:05:22,020 --> 00:05:23,470
‫And then, simply the content,

95
00:05:24,690 --> 00:05:25,673
‫so all tours.

96
00:05:27,150 --> 00:05:29,450
‫Next up, we have this form here,

97
00:05:29,450 --> 00:05:31,720
‫but actually we're not going to implement that

98
00:05:31,720 --> 00:05:33,240
‫at this point.

99
00:05:33,240 --> 00:05:34,543
‫So let's get rid of it.

100
00:05:36,260 --> 00:05:39,090
‫All right and so this is our navigation.

101
00:05:39,090 --> 00:05:41,230
‫So, this code here

102
00:05:41,230 --> 00:05:44,200
‫is basically equivalent to this.

103
00:05:44,200 --> 00:05:46,993
‫And so next up, we have this header logo.

104
00:05:48,730 --> 00:05:51,350
‫So, new line, but one level back,

105
00:05:51,350 --> 00:05:54,100
‫in the indentation so that it's on the same level

106
00:05:54,100 --> 00:05:55,680
‫as the navigation.

107
00:05:55,680 --> 00:05:58,930
‫So, just as it is here, right.

108
00:05:58,930 --> 00:05:59,980
‫Now when it's a div,

109
00:05:59,980 --> 00:06:04,980
‫we don't even have to say div.headerlogo, in this case.

110
00:06:07,150 --> 00:06:08,350
‫So, when it's a div,

111
00:06:08,350 --> 00:06:11,820
‫which is kind of the standard block element in html,

112
00:06:11,820 --> 00:06:13,980
‫all we need is the dot

113
00:06:13,980 --> 00:06:16,873
‫and then that will automatically create a div element.

114
00:06:18,930 --> 00:06:20,713
‫Then in there, we have this image,

115
00:06:22,030 --> 00:06:24,980
‫and so that of course needs a couple of attributes,

116
00:06:24,980 --> 00:06:26,693
‫which is first, the source.

117
00:06:27,560 --> 00:06:31,937
‫So image, logo, white.png,

118
00:06:33,850 --> 00:06:36,433
‫and then also the alternative text, okay.

119
00:06:40,910 --> 00:06:44,690
‫Next up, we have this other navigation here,

120
00:06:44,690 --> 00:06:46,820
‫and so again, that's on the same level

121
00:06:46,820 --> 00:06:49,293
‫as the first navigation and this div.

122
00:06:51,030 --> 00:06:53,750
‫So one level back in the indentation

123
00:06:53,750 --> 00:06:57,680
‫and create a new nav element with the class nav

124
00:06:57,680 --> 00:07:00,763
‫and the class nav user.

125
00:07:02,120 --> 00:07:03,950
‫Then in there, there's a link,

126
00:07:03,950 --> 00:07:05,130
‫very similar to this one,

127
00:07:05,130 --> 00:07:09,160
‫so let's just copy it to save ourselves some time.

128
00:07:09,160 --> 00:07:11,293
‫And then here it says, My bookings.

129
00:07:16,170 --> 00:07:20,470
‫Then another one, and actually let's just copy it again

130
00:07:20,470 --> 00:07:23,380
‫with the difference that it doesn't have this content,

131
00:07:23,380 --> 00:07:27,070
‫but instead it has some more content inside of it.

132
00:07:27,070 --> 00:07:28,470
‫So, this.

133
00:07:28,470 --> 00:07:30,023
‫So, very easy again,

134
00:07:31,170 --> 00:07:33,633
‫image, with the source, .jpg.

135
00:07:42,100 --> 00:07:43,853
‫And it also has a class name,

136
00:07:45,060 --> 00:07:47,420
‫so let's edit here with the dot.

137
00:07:47,420 --> 00:07:51,713
‫So, nav, user image.

138
00:07:53,290 --> 00:07:56,810
‫And then simply a span saying Jonas.

139
00:07:56,810 --> 00:07:58,120
‫And, as you can see,

140
00:07:58,120 --> 00:08:00,960
‫this is actually going to be the dynamic part

141
00:08:00,960 --> 00:08:02,350
‫of this header.

142
00:08:02,350 --> 00:08:05,000
‫And so actually all of this here will become a dot

143
00:08:05,000 --> 00:08:06,675
‫in the beginning.

144
00:08:06,675 --> 00:08:11,675
‫Okay, but anyway, let's now finish coding up this part here.

145
00:08:13,160 --> 00:08:14,620
‫So basically, these two buttons,

146
00:08:14,620 --> 00:08:17,520
‫so the login button and the sign up button.

147
00:08:17,520 --> 00:08:20,120
‫So, of course you will not have the login

148
00:08:20,120 --> 00:08:22,920
‫and the sign up button at the same time

149
00:08:22,920 --> 00:08:25,680
‫of having this user navigation here.

150
00:08:25,680 --> 00:08:29,590
‫So my bookings and then the name of the user, okay.

151
00:08:29,590 --> 00:08:32,250
‫But again, let's put that here for now,

152
00:08:32,250 --> 00:08:34,553
‫and then comment out what we don't need.

153
00:08:36,860 --> 00:08:41,860
‫So, button, nav element, and also nav element

154
00:08:44,440 --> 00:08:49,043
‫and then the modifier cta for sign up.

155
00:08:50,290 --> 00:08:54,847
‫And actually there's also one before that for login, right.

156
00:08:56,850 --> 00:08:58,837
‫So, that's this one.

157
00:09:03,010 --> 00:09:05,730
‫Okay and so that's actually it.

158
00:09:05,730 --> 00:09:06,940
‫So that's the header,

159
00:09:06,940 --> 00:09:09,010
‫and you see that this code here

160
00:09:09,010 --> 00:09:12,550
‫is equivalent to all of this what we have here

161
00:09:12,550 --> 00:09:15,070
‫which looks a lot more confusing,

162
00:09:15,070 --> 00:09:16,653
‫if you ask me at least.

163
00:09:18,010 --> 00:09:20,690
‫So, delete that, and so as I said,

164
00:09:20,690 --> 00:09:22,920
‫this user navigation here,

165
00:09:22,920 --> 00:09:25,200
‫this part is only gonna be available

166
00:09:25,200 --> 00:09:27,010
‫when someone is logged in.

167
00:09:27,010 --> 00:09:30,123
‫And so for now, let's completely comment all of this out.

168
00:09:31,370 --> 00:09:36,370
‫All right, so next up we have the content

169
00:09:36,500 --> 00:09:38,350
‫and so let's add another comment here

170
00:09:42,130 --> 00:09:44,050
‫and in our html,

171
00:09:44,050 --> 00:09:46,010
‫actually all that we're gonna add now

172
00:09:46,010 --> 00:09:49,350
‫is this section here with the class of overview.

173
00:09:49,350 --> 00:09:51,430
‫Because then in there is where we have

174
00:09:51,430 --> 00:09:53,160
‫all of these content cards,

175
00:09:53,160 --> 00:09:56,070
‫which again, for now, we will not include there.

176
00:09:56,070 --> 00:09:57,400
‫So again, what we're doing now

177
00:09:57,400 --> 00:09:59,623
‫is really just a skeleton, so to say.

178
00:10:00,729 --> 00:10:03,123
‫All right, so section.overview.

179
00:10:07,410 --> 00:10:08,243
‫Overview.

180
00:10:09,574 --> 00:10:12,500
‫And for now, let's simply put an h1 here

181
00:10:12,500 --> 00:10:16,040
‫with the name of the tour that's coming in as a variable.

182
00:10:16,040 --> 00:10:18,270
‫Okay and of course this section here

183
00:10:18,270 --> 00:10:22,103
‫needs to be at the same level as this header, great.

184
00:10:24,130 --> 00:10:26,820
‫So all we're missing now is the footer

185
00:10:26,820 --> 00:10:28,700
‫at the end of the page.

186
00:10:28,700 --> 00:10:32,690
‫So let's go there and here we go.

187
00:10:32,690 --> 00:10:35,790
‫Let's grab all of this.

188
00:10:35,790 --> 00:10:38,040
‫And this should actually be a footer element,

189
00:10:39,040 --> 00:10:40,393
‫not just a regular div.

190
00:10:45,510 --> 00:10:49,730
‫So a footer element with the class of footer,

191
00:10:49,730 --> 00:10:52,573
‫then a div, with the class of footer logo,

192
00:10:53,850 --> 00:10:57,493
‫and so again, I don't even need to specify the div element.

193
00:10:58,870 --> 00:11:00,323
‫Then we have an image here,

194
00:11:07,917 --> 00:11:12,810
‫.png and so I hope that typing all of this out by yourself,

195
00:11:12,810 --> 00:11:16,820
‫by hand basically, makes you keep this knowledge

196
00:11:16,820 --> 00:11:20,030
‫on how all of this works a bit better.

197
00:11:20,030 --> 00:11:22,330
‫Okay, so this is alt

198
00:11:23,560 --> 00:11:26,520
‫and now this footer navigation,

199
00:11:26,520 --> 00:11:28,033
‫so an unordered list,

200
00:11:31,260 --> 00:11:35,483
‫and now in there, we have a couple of list item elements.

201
00:11:36,580 --> 00:11:38,620
‫So list item, and then in there

202
00:11:38,620 --> 00:11:41,470
‫there is a link in each of them.

203
00:11:41,470 --> 00:11:46,470
‫So, a with the href of nowhere basically.

204
00:11:48,410 --> 00:11:51,490
‫And then, About us.

205
00:11:51,490 --> 00:11:53,170
‫Now, here in this situation,

206
00:11:53,170 --> 00:11:57,298
‫needing this extra line only for specifying this li,

207
00:11:57,298 --> 00:11:58,640
‫is not really ideal.

208
00:11:58,640 --> 00:12:00,010
‫And so what we can do here,

209
00:12:00,010 --> 00:12:03,310
‫is to use a colon, like this,

210
00:12:03,310 --> 00:12:05,840
‫and then basically put it all on the same line.

211
00:12:05,840 --> 00:12:07,730
‫And so this will then still work

212
00:12:07,730 --> 00:12:10,570
‫as if there was a new line with an indentation,

213
00:12:10,570 --> 00:12:13,910
‫but basically allowing us to do it all on the same line.

214
00:12:13,910 --> 00:12:15,810
‫Okay, then for some reason,

215
00:12:15,810 --> 00:12:19,180
‫the syntax highlighting stops working,

216
00:12:19,180 --> 00:12:21,343
‫but well, that's not that important.

217
00:12:22,910 --> 00:12:24,453
‫So download the applications,

218
00:12:26,300 --> 00:12:29,873
‫become a guide, careers.

219
00:12:39,630 --> 00:12:41,053
‫And that's actually it.

220
00:12:43,770 --> 00:12:46,520
‫Next up, we have this footer, copyright,

221
00:12:50,540 --> 00:12:53,100
‫and so in here we have just a bunch of text.

222
00:12:53,100 --> 00:12:56,943
‫So it specify the copyright symbol here,

223
00:12:58,860 --> 00:13:02,670
‫and that's by Jonas Schmedtmann.

224
00:13:02,670 --> 00:13:06,100
‫So, that's me and just like in all my other courses,

225
00:13:06,100 --> 00:13:08,290
‫I want you to know that you are free

226
00:13:08,290 --> 00:13:11,120
‫to basically use this project for yourself.

227
00:13:11,120 --> 00:13:13,550
‫So basically to put it in your portfolio

228
00:13:13,550 --> 00:13:15,270
‫or to show anyone that you want,

229
00:13:15,270 --> 00:13:18,630
‫that you built this project in my course.

230
00:13:18,630 --> 00:13:20,030
‫Now what you cannot do

231
00:13:20,030 --> 00:13:23,310
‫is to create your own course based on this project.

232
00:13:23,310 --> 00:13:25,970
‫And it's sad that I even have to say this,

233
00:13:25,970 --> 00:13:28,980
‫but of course there have been people who used my project,

234
00:13:28,980 --> 00:13:32,270
‫basically to put some free courses on YouTube,

235
00:13:32,270 --> 00:13:35,410
‫where they copied my projects, one by one.

236
00:13:35,410 --> 00:13:38,473
‫Okay, so let me just write that out here.

237
00:13:42,160 --> 00:13:45,593
‫For your own purposes,

238
00:13:49,850 --> 00:13:54,850
‫except producing of course, your own courses or tutorials.

239
00:13:59,230 --> 00:14:01,213
‫Okay and that's actually it.

240
00:14:06,130 --> 00:14:09,500
‫All right, so that is the translation

241
00:14:10,990 --> 00:14:14,400
‫of the skeleton basically that we have here,

242
00:14:14,400 --> 00:14:17,560
‫of course excepting the content.

243
00:14:17,560 --> 00:14:20,753
‫Okay, so we don't longer need that.

244
00:14:21,960 --> 00:14:25,000
‫And, just to finish, let's take a quick look

245
00:14:25,000 --> 00:14:27,640
‫and indeed, here goes our content.

246
00:14:27,640 --> 00:14:29,650
‫Now this here looks a bit out of place

247
00:14:29,650 --> 00:14:31,883
‫because this copyright text here is so long.

248
00:14:33,950 --> 00:14:37,330
‫So, this footer navigation basically.

249
00:14:37,330 --> 00:14:39,540
‫But since that is a flex container,

250
00:14:39,540 --> 00:14:42,270
‫we should be able to fix that

251
00:14:42,270 --> 00:14:47,270
‫with justified content, flex-end, not this one.

252
00:14:48,660 --> 00:14:53,660
‫Okay, and don't worry if you're not familiar with CSS,

253
00:14:53,870 --> 00:14:56,180
‫or even Flexbox this is just

254
00:14:56,180 --> 00:15:00,200
‫to just simply visually fix the small problem

255
00:15:00,200 --> 00:15:01,050
‫that we had here.

256
00:15:02,820 --> 00:15:04,723
‫So let's search for footer here.

257
00:15:08,590 --> 00:15:09,893
‫Here we are.

258
00:15:11,210 --> 00:15:12,303
‫Fix that here,

259
00:15:13,690 --> 00:15:15,790
‫and if we now reload,

260
00:15:15,790 --> 00:15:18,993
‫yeah then we're good, perfect.