1
00:00:05,280 --> 00:00:06,090
Welcome back.

2
00:00:06,180 --> 00:00:09,110
Let's go over some solutions for the bootstrap project.

3
00:00:09,120 --> 00:00:09,420
All right.

4
00:00:09,420 --> 00:00:11,590
Here I have my age HTML file.

5
00:00:11,590 --> 00:00:16,570
I'm going to work on the main page first and then come back and fill out the sign up page.

6
00:00:16,620 --> 00:00:19,170
So step one was to insert the bootstrap for links.

7
00:00:19,170 --> 00:00:23,580
Lots different ways you can get this one quick easy way is just to go to the documentation page.

8
00:00:23,580 --> 00:00:24,860
Copy and paste them in.

9
00:00:24,960 --> 00:00:27,120
Actually already had them in the Sign-Up page.

10
00:00:27,120 --> 00:00:28,910
So it's going to copy and paste them from here.

11
00:00:29,280 --> 00:00:35,340
So I will copy this and then paste that into the head.

12
00:00:35,340 --> 00:00:36,390
There we go.

13
00:00:36,540 --> 00:00:38,100
Save that change.

14
00:00:38,100 --> 00:00:42,330
Step two was to add a dark nav bar here linked link to a separate sign up page.

15
00:00:42,330 --> 00:00:45,240
So in order to do this let's grab the documentation page.

16
00:00:45,270 --> 00:00:49,170
So I'm going to put it up here and then we'll go to the documentation.

17
00:00:49,170 --> 00:00:50,840
Check out the components.

18
00:00:50,880 --> 00:00:56,860
Scroll down to a nav bar and then basically keep looking until you see the actual color schemes.

19
00:00:56,880 --> 00:00:58,520
Or you can check out over here on the right.

20
00:00:58,620 --> 00:00:59,620
There's color schemes.

21
00:00:59,640 --> 00:01:02,100
So click down and you'll see right here.

22
00:01:02,310 --> 00:01:04,300
The one we want to use is nav bar.

23
00:01:04,390 --> 00:01:07,240
Now Barbash dark B.G. dark.

24
00:01:07,410 --> 00:01:08,620
So we're going to copy that.

25
00:01:08,880 --> 00:01:14,130
And then let's bring the documentation aside and let's put that class in right here.

26
00:01:14,160 --> 00:01:20,540
So say class is equal to nav bar nav bar that Starc B.G. dark.

27
00:01:20,610 --> 00:01:21,150
OK.

28
00:01:21,330 --> 00:01:27,210
And then if you keep looking at the actual NAV or documentation you should then see that you can end

29
00:01:27,420 --> 00:01:36,590
up adding a div here with something like nav bar header and then add an anchor tag.

30
00:01:37,090 --> 00:01:41,680
Technically that nav bar header that can be optional depending on what you actually want the links to

31
00:01:41,680 --> 00:01:42,270
look like.

32
00:01:42,430 --> 00:01:52,290
But let's add a brand the page so we can say class is equal to nav bar dash brand.

33
00:01:52,920 --> 00:01:54,750
And let's have this be the welcome

34
00:01:59,260 --> 00:02:01,230
and that outside of this div what we can do.

35
00:02:01,230 --> 00:02:08,240
Still in the nav bar is I can make an unordered list and here I'll have a list item with an anchor tag.

36
00:02:08,700 --> 00:02:13,780
Let's make sure that anchor tag actually gets in there with an anchor tag and inside this anchor tag

37
00:02:13,800 --> 00:02:21,230
will say sign in let's save that and then check to make sure it's working in our actual page.

38
00:02:21,230 --> 00:02:26,000
So if I bring in my actual page I get to see this nav bar as well as the links that I haven't actually

39
00:02:26,000 --> 00:02:27,350
done anything with yet.

40
00:02:27,380 --> 00:02:27,770
So I see.

41
00:02:27,770 --> 00:02:30,000
Welcome and then seinen.

42
00:02:30,140 --> 00:02:36,290
So what I want to do is actually link these pages are these Walkmen sign and links to the other pages.

43
00:02:36,290 --> 00:02:37,750
So let's do that as well.

44
00:02:38,720 --> 00:02:43,220
So when I come here right now we have class have our brand a.

45
00:02:43,310 --> 00:02:48,470
So for the ATRA for the welcome page let's just have it come back to the current file I'm in.

46
00:02:48,470 --> 00:02:54,040
So right now I'm in Bootstrap solution may let each team know.

47
00:02:54,410 --> 00:03:00,800
So we'll have that link and then for this Tref what I'm going to do is have it be bootstrap solution

48
00:03:00,860 --> 00:03:03,510
underscore Sign-Up.

49
00:03:03,570 --> 00:03:04,440
H Tim L.

50
00:03:04,690 --> 00:03:08,270
And remember you're going to call this whatever you happen to call your age l files for the sign up

51
00:03:08,270 --> 00:03:09,700
page.

52
00:03:09,740 --> 00:03:10,000
OK.

53
00:03:10,020 --> 00:03:11,490
So let's save that.

54
00:03:11,570 --> 00:03:14,340
And that finishes off our navigation bar.

55
00:03:15,140 --> 00:03:20,300
So again what we did here is we have this brand and then we have this list item inside us an ordered

56
00:03:20,300 --> 00:03:20,990
list.

57
00:03:20,990 --> 00:03:24,420
All of this goes inside this nav bar.

58
00:03:24,440 --> 00:03:28,320
OK so lots of different ways you could have also done that navigation bar.

59
00:03:28,460 --> 00:03:30,110
That was probably the simplest way.

60
00:03:30,110 --> 00:03:33,860
Step three is to create a Jumbotron here for a header and some lorem ipsum.

61
00:03:33,860 --> 00:03:35,390
So that's actually pretty straightforward.

62
00:03:35,390 --> 00:03:41,340
We just take a div created class out of it and it's optional if you want to put it in a container or

63
00:03:41,340 --> 00:03:41,800
not.

64
00:03:41,830 --> 00:03:43,350
I like putting things in containers.

65
00:03:43,610 --> 00:03:48,710
But more importantly we really wanted to do is make sure we have a Jumbotron inside that class container

66
00:03:48,710 --> 00:03:50,270
basically has it centered.

67
00:03:50,270 --> 00:03:53,340
If you don't have the container it will just spread out to the entirety of the page.

68
00:03:53,360 --> 00:03:55,280
Either is totally fine.

69
00:03:55,280 --> 00:04:02,220
Then let's add in a heading one here will say cool puppy looks and we'll add in some form some in two

70
00:04:02,220 --> 00:04:03,330
paragraphs.

71
00:04:03,330 --> 00:04:05,030
So just Lorem up some.

72
00:04:05,190 --> 00:04:11,090
And then we'll create another pair of tagged and we'll put in some more lordships on there.

73
00:04:11,500 --> 00:04:13,540
So those changes and let's check it out.

74
00:04:13,540 --> 00:04:16,620
By refreshing our page and bringing it over.

75
00:04:16,740 --> 00:04:22,060
So if I refresh my page and look at it I get to see cool puppy looks larm Epson Laura ipsum.

76
00:04:22,080 --> 00:04:24,520
And then this walk up and sign in.

77
00:04:24,640 --> 00:04:28,290
So we're going to bring that back out here and actually let's check the sign and see if that link is

78
00:04:28,290 --> 00:04:28,680
working.

79
00:04:28,680 --> 00:04:31,010
If I click sign in it's taken me to a blank file.

80
00:04:31,020 --> 00:04:33,900
That makes sense because there's nothing on that sign up page yet.

81
00:04:33,930 --> 00:04:37,350
We'll go back and now we need to do is add in that carousel.

82
00:04:37,350 --> 00:04:38,530
So how do we actually do that.

83
00:04:38,580 --> 00:04:41,750
Well we need to do is check out the bootstrap documentation.

84
00:04:42,120 --> 00:04:47,460
So welcome back to the bootstrap docs which actually have open right here and in the bootstrap box will

85
00:04:47,460 --> 00:04:53,520
come the documentation and I can search for carrousel eventually they'll find their way here.

86
00:04:53,530 --> 00:04:57,350
Carrousel it says how it works you can read through these examples.

87
00:04:57,350 --> 00:05:03,640
I can see the slides only I can see the slides with controls and then with indicators as well.

88
00:05:03,680 --> 00:05:06,060
Lots of different options here with captions.

89
00:05:06,080 --> 00:05:09,130
It's really up to you what you wanted to do it fade away.

90
00:05:09,200 --> 00:05:13,070
We're going to go ahead and maybe choose the simpler one just with controls.

91
00:05:13,340 --> 00:05:14,600
So we just copy this code

92
00:05:17,500 --> 00:05:22,930
and then we're going to bring that over to our project and then we're going to paste that in.

93
00:05:22,930 --> 00:05:25,580
So now let's take a look at what's actually happening here.

94
00:05:25,580 --> 00:05:26,830
I have these divs.

95
00:05:26,860 --> 00:05:33,050
So the outermost div says Id carrousel example controls class carrousel slide data right.

96
00:05:33,190 --> 00:05:36,060
The other div than another div than an image.

97
00:05:36,190 --> 00:05:37,190
And then the source.

98
00:05:37,210 --> 00:05:39,240
So notice here here's the image.

99
00:05:39,280 --> 00:05:40,370
And here's the source.

100
00:05:40,420 --> 00:05:43,210
So this is what I want to replace of my own images.

101
00:05:43,360 --> 00:05:48,430
So it's nice that we added some spacing here so we can clearly see what's happening here.

102
00:05:48,430 --> 00:05:50,350
Essentially each slide in the Carousel.

103
00:05:50,380 --> 00:05:54,690
It's this div with an image tag in it pointing to the source of the image.

104
00:05:54,700 --> 00:05:58,480
So what we need to do is replace these with our own source images.

105
00:05:58,540 --> 00:06:03,530
So we're going to exit or cut this out and then paste it in here.

106
00:06:05,730 --> 00:06:09,670
There we go and we're going to do that for these other images as well.

107
00:06:09,690 --> 00:06:12,960
So we'll cut that paste it from the source here

108
00:06:16,730 --> 00:06:21,560
and we have a couple more so we'll cut this paste that as well.

109
00:06:24,590 --> 00:06:27,140
And you notice here these divs are actually a little different.

110
00:06:27,140 --> 00:06:31,280
Here's an anchor tag and here's another eight or 10 but these are outside of this div.

111
00:06:31,310 --> 00:06:33,430
And that's because these are the actual controls.

112
00:06:33,470 --> 00:06:34,430
This is the previous.

113
00:06:34,430 --> 00:06:35,350
And here's the next.

114
00:06:35,360 --> 00:06:37,050
So we want to actually keep those.

115
00:06:37,070 --> 00:06:42,050
So we're going to do is copy and paste these a few more times so many images we have left we have three

116
00:06:42,050 --> 00:06:42,640
images left.

117
00:06:42,650 --> 00:06:49,540
Let's put them in one two and three and we're going to copy these.

118
00:06:49,820 --> 00:06:50,990
So we'll cut this out.

119
00:06:52,190 --> 00:07:02,370
Grab that source image paste it in let's do it for two more get this guy out.

120
00:07:02,580 --> 00:07:05,760
Grab this guy paste it in.

121
00:07:05,950 --> 00:07:13,580
And last one Arap source cut it out highlight it paste it in.

122
00:07:13,840 --> 00:07:19,570
Let's save that and make sure that all works by going back to the Web site and the browser.

123
00:07:19,690 --> 00:07:28,600
I'll bring in my browser refresh and I see this puppy at the bottom and I can cycle now perfectly great.

124
00:07:28,630 --> 00:07:32,130
So now the last step is to actually implement a form when I click seinen.

125
00:07:32,230 --> 00:07:33,350
Right now it's blank.

126
00:07:33,400 --> 00:07:34,690
So let's fix that.

127
00:07:35,730 --> 00:07:38,400
Coming back to the other sign up page it says copy and paste.

128
00:07:38,400 --> 00:07:40,030
Now apart from the other page here as well.

129
00:07:40,050 --> 00:07:41,250
So let's do that.

130
00:07:41,280 --> 00:07:44,110
I was going to grab the entirety of that Nev..

131
00:07:44,190 --> 00:07:49,490
So grab all of this now of copy this paste it in.

132
00:07:49,710 --> 00:07:50,310
That change.

133
00:07:50,310 --> 00:07:53,790
Let's see that that change was affected coming back here.

134
00:07:53,790 --> 00:07:57,140
If I click sign in now I see the same nav bar.

135
00:07:57,150 --> 00:07:58,880
Now we just need to add in the form.

136
00:07:59,130 --> 00:08:04,290
So it's up to you how much you want to go into this but what we can do is back of that documentation

137
00:08:04,860 --> 00:08:09,940
come down check out the forms click on that and this one looks good.

138
00:08:09,960 --> 00:08:11,450
Email address and password.

139
00:08:11,610 --> 00:08:21,520
So I'll just copy that form come back to the sign and Page HTL and put that right here save those changes.

140
00:08:21,580 --> 00:08:25,140
Refresh my project and there I see this.

141
00:08:25,150 --> 00:08:25,400
OK.

142
00:08:25,420 --> 00:08:30,030
So let's put this whole form inside of a Jumbotron of class.

143
00:08:30,080 --> 00:08:31,650
So I'll say this.

144
00:08:31,990 --> 00:08:41,680
Now we can also put it inside of container say container the Jumbotron.

145
00:08:41,710 --> 00:08:42,900
Let's grab this entire form

146
00:08:46,930 --> 00:08:49,920
cut it and then stick it here.

147
00:08:50,030 --> 00:08:52,710
Save that if I refresh this page.

148
00:08:52,750 --> 00:08:54,240
Now it looks a lot nicer.

149
00:08:54,250 --> 00:08:54,730
OK.

150
00:08:54,970 --> 00:08:56,810
That was the basics of the bootstrap.

151
00:08:56,890 --> 00:09:01,750
Main thing to understand is you can always leverage the documentation and then edit it to fix your own

152
00:09:01,750 --> 00:09:02,580
examples.

153
00:09:02,800 --> 00:09:07,690
So I would click welcome we come back to the home page and I could see this nice carousel of these funny

154
00:09:07,690 --> 00:09:09,120
puppy pictures.

155
00:09:09,160 --> 00:09:09,700
OK.

156
00:09:09,820 --> 00:09:10,720
That's it for the project.

157
00:09:10,720 --> 00:09:12,160
And that's it for the crash courses.

158
00:09:12,280 --> 00:09:14,740
Coming up next we'll start learning about Python.

159
00:09:14,740 --> 00:09:15,440
We'll see you there.