1
00:00:00,190 --> 00:00:04,280
Well welcome back in this video we're going to continue with the camp.

2
00:00:04,300 --> 00:00:08,970
We're going to add in our header and footer Parshall's so that we can dry up the code so we can have

3
00:00:08,970 --> 00:00:15,300
the basic h team out boiler plate that we're so far missing so we need the head the body the title but

4
00:00:15,300 --> 00:00:19,490
also we want to be able to include Bootstrap which is our second goal here.

5
00:00:19,560 --> 00:00:24,150
So we're going to set up the header and footer Parshall's in our out and all of that then we're going

6
00:00:24,150 --> 00:00:28,150
to include bootstrap and then do some very simple styling using bootstrap.

7
00:00:28,510 --> 00:00:28,980
OK.

8
00:00:29,190 --> 00:00:30,560
So we'll get started here.

9
00:00:30,610 --> 00:00:32,490
I'm inside of V-1 still.

10
00:00:32,580 --> 00:00:34,840
I'll let you know when I go to the next version.

11
00:00:34,890 --> 00:00:38,710
But we're still doing some very basic things that I'm considering basic setup.

12
00:00:38,820 --> 00:00:40,170
So it's still version 1.

13
00:00:40,200 --> 00:00:46,820
First thing I'll do is inside of us we'll add our Parshall's directory so we can do that from here.

14
00:00:46,890 --> 00:00:54,740
Makes directory views slash Parshall's and then we'll add in a header and footer Ejay as file will do

15
00:00:54,750 --> 00:00:58,710
touch use slash Parshall's slash Hetter.

16
00:00:58,730 --> 00:00:59,030
E.J..

17
00:00:59,100 --> 00:01:00,090
Yes.

18
00:01:00,450 --> 00:01:05,920
And then I'll use the up arrow and do the same thing except footer that Ejay us.

19
00:01:06,240 --> 00:01:07,200
So we have that.

20
00:01:07,410 --> 00:01:09,960
Now let's work on filling out the header.

21
00:01:09,960 --> 00:01:15,170
So C9 use Parshall's Hetter And don't forget to use tab autocomplete there.

22
00:01:15,180 --> 00:01:20,240
Makes it a lot easier and we'll add in our basic h tim l boiler plate.

23
00:01:20,280 --> 00:01:25,620
So we need doc and it's always good to practice this from scratch.

24
00:01:25,620 --> 00:01:27,570
It's a doc type HMO.

25
00:01:27,570 --> 00:01:29,520
And then we need the HTML tags.

26
00:01:29,730 --> 00:01:34,000
And then we need a head inside the head.

27
00:01:34,050 --> 00:01:37,340
Put a title and we'll just write the whole camp.

28
00:01:37,560 --> 00:01:44,310
And then we need a body as well but remember not all of this goes in the header file because we want

29
00:01:44,340 --> 00:01:50,310
this to be the header of every page and then we want our content goes here to content from the template

30
00:01:50,310 --> 00:01:51,220
goes right here.

31
00:01:51,480 --> 00:01:53,320
And then we want this to be in the footer.

32
00:01:53,580 --> 00:01:55,030
So let's do that now.

33
00:01:55,080 --> 00:01:57,280
Copy this out or cut it out.

34
00:01:57,360 --> 00:01:58,700
So this is our header.

35
00:01:59,010 --> 00:02:06,060
And then let's open up the footer file and put that in there.

36
00:02:06,510 --> 00:02:13,790
And just to make sure it works ok at the end of the body we'll put another paragraph trademark the upper

37
00:02:13,980 --> 00:02:15,720
camp 2015.

38
00:02:15,870 --> 00:02:19,530
Again I don't really know if that's what a trademark is supposed to do and where it's supposed to go

39
00:02:19,560 --> 00:02:21,720
but we just want some text at the bottom.

40
00:02:21,720 --> 00:02:22,590
So we'll do that.

41
00:02:22,620 --> 00:02:24,290
Save the file.

42
00:02:24,450 --> 00:02:29,670
Now let's include this partial inside the landing page to make sure we have that open and at the very

43
00:02:29,670 --> 00:02:30,460
top.

44
00:02:30,630 --> 00:02:37,310
We want to add in our include tag which remember is and Ejay has tag and read rewrite include.

45
00:02:37,620 --> 00:02:44,310
And then the path to that partial which is if we just double check we're inside the Parshall's directory

46
00:02:44,330 --> 00:02:44,590
.

47
00:02:44,820 --> 00:02:51,380
So we want Parshall's slash header and we don't need that Ejay.

48
00:02:51,870 --> 00:02:55,890
And let's do the same thing at the bottom with footer.

49
00:02:55,890 --> 00:03:00,490
There we go and let's just add some space here and save.

50
00:03:00,510 --> 00:03:05,310
So this should give us everything up to the first body to the opening tag.

51
00:03:05,310 --> 00:03:08,500
And this should give us everything which is really just three lines so far.

52
00:03:08,640 --> 00:03:13,830
The trademark paragraph the ending body tag and the closing edged him out.

53
00:03:14,130 --> 00:03:15,550
And let's see if that works.

54
00:03:15,930 --> 00:03:20,440
So restart the server or just started in the first place node apt.

55
00:03:20,520 --> 00:03:23,190
Yes this is on the landing page only.

56
00:03:23,430 --> 00:03:28,440
So we need to go back to the landing page and we have a small problem which is that we linked to it

57
00:03:28,470 --> 00:03:31,640
incorrectly and that's a really simple issue to fix.

58
00:03:31,650 --> 00:03:34,610
We just want to change this so that it's not with the slash.

59
00:03:34,770 --> 00:03:38,820
So include partial slash Hetter and partially slash footer.

60
00:03:38,820 --> 00:03:41,810
Remember the slash as we saw is really important.

61
00:03:41,820 --> 00:03:47,850
That tells it to go back in the route which is not what we want so let's try again refresh the page

62
00:03:47,850 --> 00:03:48,560
.

63
00:03:48,630 --> 00:03:50,720
Now we have our trademark at the bottom.

64
00:03:50,730 --> 00:03:52,310
Yup camp 2015.

65
00:03:52,560 --> 00:03:55,070
And we also have you can't really see it.

66
00:03:55,080 --> 00:03:59,590
We also have the head and the body and the title that has been set up for us up here.

67
00:04:00,090 --> 00:04:03,780
Let's do the same thing for the campgrounds file.

68
00:04:03,810 --> 00:04:07,350
So let's take them again from scratch.

69
00:04:07,560 --> 00:04:08,700
Always good practice.

70
00:04:08,700 --> 00:04:18,450
So you want include Parshall's slash Hetter and then I'll copy this one down and reduce that down here

71
00:04:19,770 --> 00:04:25,620
make some more space Parshall's slash footer just like that.

72
00:04:25,710 --> 00:04:30,940
Restart the server now on the landing page we still get the trademark.

73
00:04:31,200 --> 00:04:36,560
But also while I don't even have to do that I'll click on the link that we added.

74
00:04:36,690 --> 00:04:39,990
I also get our trademark Yelp camp 2015.

75
00:04:40,500 --> 00:04:42,940
So now we have a partial for the header and footer.

76
00:04:43,230 --> 00:04:45,720
Let's include our first stylesheet.

77
00:04:45,720 --> 00:04:51,930
So let's start by just including bootstrap and I have a CD and open so you can either use this exact

78
00:04:51,930 --> 00:04:55,980
link or you can just Google bootstrap CDN and include that link.

79
00:04:56,070 --> 00:05:01,080
But I'm going to do this one here bootstrapped three point three point five and then close out of here

80
00:05:01,650 --> 00:05:09,930
and instead of the header file inside the head I'm going to add in a link and remember for a link tag

81
00:05:09,990 --> 00:05:14,270
it's Tref needs to be that you are Elford bootstrap.

82
00:05:14,550 --> 00:05:21,420
And we can also add in Roll Call style sheet and that should give us bootstrap so we can always make

83
00:05:21,420 --> 00:05:28,230
sure by restarting the server and just by refreshing on any of these pages you should see a difference

84
00:05:28,230 --> 00:05:28,510
.

85
00:05:28,530 --> 00:05:29,290
There we go.

86
00:05:29,550 --> 00:05:32,830
So I have any fun or spacing has changed a little bit.

87
00:05:32,850 --> 00:05:39,120
You can look at the landing page as well and that's changed the color of our links the font size of

88
00:05:39,120 --> 00:05:39,830
things.

89
00:05:39,870 --> 00:05:45,780
Still not looking good but it's at least showing us that bootstrap is successfully included.