WEBVTT

0
00:00.420 --> 00:03.020
All right so here comes challenge.

1
00:04.050 --> 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
00:11.010 --> 00:13.210
don't even have a full website.

3
00:13.380 --> 00:18.200
It's just a document that has an h1 element and a paragraph element.

4
00:18.240 --> 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
00:25.230 --> 00:27.280
Now if inside your home.

6
00:27.480 --> 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
00:34.230 --> 00:37.410
inside the body then that's fine as well.

8
00:37.410 --> 00:45.060
But in this challenge I want you to replace the header and footer basically everything other than your

9
00:45.090 --> 00:48.900
h1 and your paragraph with our layout partials.

10
00:49.110 --> 00:51.190
So you can see inside our views folder

11
00:51.240 --> 00:52.690
you've got a header.

12
00:52.920 --> 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
01:01.590 --> 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
01:09.390 --> 01:17.070
has three links on it: home, about us and contact us. And then has some familiar bootstrap classes such

15
01:17.070 --> 01:22.560
as a container nav, nav bar nav and in the footer all those divs are closed off.

16
01:22.590 --> 01:27.240
And we've also got some styling in the footer as well as a paragraph of text.

17
01:27.360 --> 01:35.280
So I want you to go ahead and use EJS to have those layout partials the header and footer to

18
01:35.280 --> 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
01:42.900 --> 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
01:50.970 --> 01:59.000
see all of the CSS that we've got inside our styles.css being applied to this web page.

21
01:59.020 --> 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
02:06.070 --> 02:09.920
to complete this challenge.

23
02:09.940 --> 02:10.370
All right.

24
02:10.370 --> 02:17.000
So there's only one hints in this challenge and it's this one. Inside the EJS docs

25
02:17.040 --> 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
02:24.630 --> 02:33.420
and footers as partials. So you can use this syntax to include our header and footer files. With this

27
02:33.420 --> 02:36.080
hint see if you can complete this challenge

28
02:36.090 --> 02:36.410
now.