All right so here comes challenge.
Now currently in our website if you right click and go to view page source then you can see that we
don't even have a full website.
It's just a document that has an h1 element and a paragraph element.
It doesn't even have a title in the tab bar and it doesn't have any of the HTML boilerplate.
Now if inside your home.
ejs you've already added an HTML boilerplate and you've added a title and you've placed all of this content
inside the body then that's fine as well.
But in this challenge I want you to replace the header and footer basically everything other than your
h1 and your paragraph with our layout partials.
So you can see inside our views folder
you've got a header.
ejs and a footer.ejs that's already got some HTML code in it. And the header uses bootstrap and the
style sheet that we've got inside our css and our styles.css in order to create a nav bar that
has three links on it: home, about us and contact us. And then has some familiar bootstrap classes such
as a container nav, nav bar nav and in the footer all those divs are closed off.
And we've also got some styling in the footer as well as a paragraph of text.
So I want you to go ahead and use EJS to have those layout partials the header and footer to
our existing home page so that once you add it in and refresh your website you should see the nav bar,
the three links in the nav bar, a brand on the left and a footer at the bottom with some text. And you'll
see all of the CSS that we've got inside our styles.css being applied to this web page.
So by using the EJS docs as well as Google and Stack Overflow try and remember how we did this and try
to complete this challenge.
All right.
So there's only one hints in this challenge and it's this one. Inside the EJS docs
if you scroll down to the part which is called layouts you can see that it allows us to include headers
and footers as partials. So you can use this syntax to include our header and footer files. With this
hint see if you can complete this challenge
now.