Well welcome back in this video we're going to continue with the camp.
We're going to add in our header and footer Parshall's so that we can dry up the code so we can have
the basic h team out boiler plate that we're so far missing so we need the head the body the title but
also we want to be able to include Bootstrap which is our second goal here.
So we're going to set up the header and footer Parshall's in our out and all of that then we're going
to include bootstrap and then do some very simple styling using bootstrap.
OK.
So we'll get started here.
I'm inside of V-1 still.
I'll let you know when I go to the next version.
But we're still doing some very basic things that I'm considering basic setup.
So it's still version 1.
First thing I'll do is inside of us we'll add our Parshall's directory so we can do that from here.
Makes directory views slash Parshall's and then we'll add in a header and footer Ejay as file will do
touch use slash Parshall's slash Hetter.
E.J..
Yes.
And then I'll use the up arrow and do the same thing except footer that Ejay us.
So we have that.
Now let's work on filling out the header.
So C9 use Parshall's Hetter And don't forget to use tab autocomplete there.
Makes it a lot easier and we'll add in our basic h tim l boiler plate.
So we need doc and it's always good to practice this from scratch.
It's a doc type HMO.
And then we need the HTML tags.
And then we need a head inside the head.
Put a title and we'll just write the whole camp.
And then we need a body as well but remember not all of this goes in the header file because we want
this to be the header of every page and then we want our content goes here to content from the template
goes right here.
And then we want this to be in the footer.
So let's do that now.
Copy this out or cut it out.
So this is our header.
And then let's open up the footer file and put that in there.
And just to make sure it works ok at the end of the body we'll put another paragraph trademark the upper
camp 2015.
Again I don't really know if that's what a trademark is supposed to do and where it's supposed to go
but we just want some text at the bottom.
So we'll do that.
Save the file.
Now let's include this partial inside the landing page to make sure we have that open and at the very
top.
We want to add in our include tag which remember is and Ejay has tag and read rewrite include.
And then the path to that partial which is if we just double check we're inside the Parshall's directory
.
So we want Parshall's slash header and we don't need that Ejay.
And let's do the same thing at the bottom with footer.
There we go and let's just add some space here and save.
So this should give us everything up to the first body to the opening tag.
And this should give us everything which is really just three lines so far.
The trademark paragraph the ending body tag and the closing edged him out.
And let's see if that works.
So restart the server or just started in the first place node apt.
Yes this is on the landing page only.
So we need to go back to the landing page and we have a small problem which is that we linked to it
incorrectly and that's a really simple issue to fix.
We just want to change this so that it's not with the slash.
So include partial slash Hetter and partially slash footer.
Remember the slash as we saw is really important.
That tells it to go back in the route which is not what we want so let's try again refresh the page
.
Now we have our trademark at the bottom.
Yup camp 2015.
And we also have you can't really see it.
We also have the head and the body and the title that has been set up for us up here.
Let's do the same thing for the campgrounds file.
So let's take them again from scratch.
Always good practice.
So you want include Parshall's slash Hetter and then I'll copy this one down and reduce that down here
make some more space Parshall's slash footer just like that.
Restart the server now on the landing page we still get the trademark.
But also while I don't even have to do that I'll click on the link that we added.
I also get our trademark Yelp camp 2015.
So now we have a partial for the header and footer.
Let's include our first stylesheet.
So let's start by just including bootstrap and I have a CD and open so you can either use this exact
link or you can just Google bootstrap CDN and include that link.
But I'm going to do this one here bootstrapped three point three point five and then close out of here
and instead of the header file inside the head I'm going to add in a link and remember for a link tag
it's Tref needs to be that you are Elford bootstrap.
And we can also add in Roll Call style sheet and that should give us bootstrap so we can always make
sure by restarting the server and just by refreshing on any of these pages you should see a difference
.
There we go.
So I have any fun or spacing has changed a little bit.
You can look at the landing page as well and that's changed the color of our links the font size of
things.
Still not looking good but it's at least showing us that bootstrap is successfully included.