0
1
00:00:00,420 --> 00:00:03,020
All right so here comes challenge.
1

2
00:00:04,050 --> 00:00:11,010
Now currently in our website if you right click and go to view page source then you can see that we
2

3
00:00:11,010 --> 00:00:13,210
don't even have a full website.
3

4
00:00:13,380 --> 00:00:18,200
It's just a document that has an h1 element and a paragraph element.
4

5
00:00:18,240 --> 00:00:25,130
It doesn't even have a title in the tab bar and it doesn't have any of the HTML boilerplate.
5

6
00:00:25,230 --> 00:00:27,280
Now if inside your home.
6

7
00:00:27,480 --> 00:00:33,840
ejs you've already added an HTML boilerplate and you've added a title and you've placed all of this content
7

8
00:00:34,230 --> 00:00:37,410
inside the body then that's fine as well.
8

9
00:00:37,410 --> 00:00:45,060
But in this challenge I want you to replace the header and footer basically everything other than your
9

10
00:00:45,090 --> 00:00:48,900
h1 and your paragraph with our layout partials.
10

11
00:00:49,110 --> 00:00:51,190
So you can see inside our views folder
11

12
00:00:51,240 --> 00:00:52,690
you've got a header.
12

13
00:00:52,920 --> 00:01:01,590
ejs and a footer.ejs that's already got some HTML code in it. And the header uses bootstrap and the
13

14
00:01:01,590 --> 00:01:09,390
style sheet that we've got inside our css and our styles.css in order to create a nav bar that
14

15
00:01:09,390 --> 00:01:17,070
has three links on it: home, about us and contact us. And then has some familiar bootstrap classes such
15

16
00:01:17,070 --> 00:01:22,560
as a container nav, nav bar nav and in the footer all those divs are closed off.
16

17
00:01:22,590 --> 00:01:27,240
And we've also got some styling in the footer as well as a paragraph of text.
17

18
00:01:27,360 --> 00:01:35,280
So I want you to go ahead and use EJS to have those layout partials the header and footer to
18

19
00:01:35,280 --> 00:01:42,690
our existing home page so that once you add it in and refresh your website you should see the nav bar,
19

20
00:01:42,900 --> 00:01:50,970
the three links in the nav bar, a brand on the left and a footer at the bottom with some text. And you'll
20

21
00:01:50,970 --> 00:01:59,000
see all of the CSS that we've got inside our styles.css being applied to this web page.
21

22
00:01:59,020 --> 00:02:06,070
So by using the EJS docs as well as Google and Stack Overflow try and remember how we did this and try
22

23
00:02:06,070 --> 00:02:09,920
to complete this challenge.
23

24
00:02:09,940 --> 00:02:10,370
All right.
24

25
00:02:10,370 --> 00:02:17,000
So there's only one hints in this challenge and it's this one. Inside the EJS docs
25

26
00:02:17,040 --> 00:02:24,540
if you scroll down to the part which is called layouts you can see that it allows us to include headers
26

27
00:02:24,630 --> 00:02:33,420
and footers as partials. So you can use this syntax to include our header and footer files. With this
27

28
00:02:33,420 --> 00:02:36,080
hint see if you can complete this challenge
28

29
00:02:36,090 --> 00:02:36,410
now.