1
00:00:00,450 --> 00:00:05,130
All right guys. It is a new week and we are on to a new topic.

2
00:00:05,280 --> 00:00:10,680
So for all of you guys who are still sticking with me, a big pat on the back, because we are now going

3
00:00:10,680 --> 00:00:13,980
to do more and more exciting things as we learn more

4
00:00:13,980 --> 00:00:15,280
and as we go along.

5
00:00:15,300 --> 00:00:22,190
So today I'm going to talk about Bootstrap, and this is what's called a front end library.

6
00:00:22,320 --> 00:00:29,200
Now, you'll hear these words quite often: front end, back end, interface... What does it all mean?

7
00:00:29,310 --> 00:00:33,960
So, this cartoon is one of the ways that best represents this concept.

8
00:00:33,990 --> 00:00:39,930
So the front end is basically what the user sees. It’s the beautiful mermaid. It’s the face of your web

9
00:00:39,930 --> 00:00:41,990
site or your mobile app.

10
00:00:42,030 --> 00:00:48,660
Now the back end tends to reside on the server, and is basically behind the scenes sort of business logic

11
00:00:48,750 --> 00:00:52,340
of how your web site or how your app is going to work,

12
00:00:52,350 --> 00:00:54,410
so things that it has to do.

13
00:00:54,480 --> 00:00:59,050
So this is where you code a lot of the functionality of the web site or the app.

14
00:00:59,070 --> 00:01:06,050
So you've got your web sites and your apps that can be designed to have a beautiful user interface,

15
00:01:06,090 --> 00:01:10,460
and, you know, things like animations or buttons.

16
00:01:10,470 --> 00:01:13,550
Basically whatever the user sees is the front end.

17
00:01:13,770 --> 00:01:20,550
Now in the back you've got the server, you've got the databases, you know, less exciting, less pretty,

18
00:01:20,940 --> 00:01:27,810
but nonetheless it's a really really important part of any web site or app, because it's going to determine

19
00:01:28,050 --> 00:01:30,230
how everything is going to work.

20
00:01:30,240 --> 00:01:35,430
These two parts will need to talk to each other in order for data to be delivered.

21
00:01:35,430 --> 00:01:41,760
So for example if you're AirBnB, then in the back end you've got your listings, you can search and

22
00:01:41,760 --> 00:01:46,790
query for them, and then you can deliver them to the front end, say the web site or the app.

23
00:01:46,800 --> 00:01:50,120
Now this division is the front end back end division.

24
00:01:50,280 --> 00:01:56,010
And usually you'll see different languages being used for the front end and the back end.

25
00:01:56,100 --> 00:02:02,340
So on the front we'll be using things like HTML, CSS, Javascript, and this is a lot of the stuff that

26
00:02:02,340 --> 00:02:10,290
you see in web design. Now on the back end you have slightly more powerful languages like C#, Ruby,

27
00:02:10,440 --> 00:02:12,390
PHP, Java, NodeJS,

28
00:02:12,420 --> 00:02:13,180
or SQL

29
00:02:13,180 --> 00:02:20,740
if you're dealing with databases. And this is what will enable your web apps. And it will give your web site

30
00:02:21,040 --> 00:02:28,080
functionality, business logic, data storage, and a whole bunch of really exciting things that we're going

31
00:02:28,080 --> 00:02:30,810
to explore later on in the course.

32
00:02:30,810 --> 00:02:34,500
Now Bootstrap is very firmly on the front end.

33
00:02:34,560 --> 00:02:40,980
It's a bunch of code that was written to be reusable that you can drop into your site and it'll make

34
00:02:40,980 --> 00:02:44,160
designing the web site much much easier for you.

35
00:02:44,190 --> 00:02:51,300
Now Bootstrap was originally developed by Twitter in order to try and get more consistence across web sites

36
00:02:51,300 --> 00:02:52,410
that they design.

37
00:02:52,410 --> 00:02:55,520
But since then they've made it free and open source,

38
00:02:55,590 --> 00:02:59,210
so that means you can see all of the source code on GitHub.

39
00:02:59,250 --> 00:03:06,690
And in fact if you go there you'll notice that it has a whopping 122,000 stars, and

40
00:03:06,720 --> 00:03:14,040
it's in fact the second most starred repository on all of GitHub, so that just shows you how popular

41
00:03:14,040 --> 00:03:14,630
it is.

42
00:03:14,850 --> 00:03:21,180
And this is definitely the most popular front end framework or library that you'll ever come across.

43
00:03:21,180 --> 00:03:23,350
Now what does it allow you to do?

44
00:03:23,370 --> 00:03:30,300
Well, one of the most important things is that, as the number of users are moving away from desktop towards

45
00:03:30,300 --> 00:03:34,620
mobile, a lot of web sites need to be responsive.

46
00:03:34,700 --> 00:03:40,710
Now this is probably not the best term for what this means, because when people think responsive they

47
00:03:40,710 --> 00:03:45,810
think, ‘Oh, it has to be fast’, or, you know, ‘It has to load up immediately’.

48
00:03:45,990 --> 00:03:54,300
But actually that's not what responsive is at all. Responsive just means that it responds to the viewport.

49
00:03:54,300 --> 00:04:01,830
So that means if you're looking at the same web site on mobile or on iPad or on desktop it should have

50
00:04:01,920 --> 00:04:09,430
a different layout to be able to best take advantage of the size of the screen real estate.

51
00:04:09,660 --> 00:04:14,090
So I think a better word would almost be something like adaptable layout.

52
00:04:14,100 --> 00:04:20,670
So your web site changes its design depending on where it's being displayed. And Bootstrap makes this

53
00:04:20,670 --> 00:04:24,930
super super easy as we'll see in the coming lessons. Now

54
00:04:24,990 --> 00:04:30,510
the other really awesome thing about Bootstrap is that you get access to a whole bunch of pre-styled

55
00:04:30,570 --> 00:04:36,710
elements that you can simply just drop into your code with very very minimal effort.

56
00:04:36,780 --> 00:04:38,530
So let me show you how it works.

57
00:04:38,580 --> 00:04:45,840
Now remember how in the last module in order to create a button that was styled and it had a hover state

58
00:04:46,140 --> 00:04:52,530
and it looked generally nice we had to go to CSS Button Generator and put in the requirements that

59
00:04:52,530 --> 00:04:59,040
we needed, and it generated a whole bunch of CSS code that either we had to write or we had to find

60
00:04:59,040 --> 00:05:03,850
somewhere like the CSS Button Generator where it would generate this code for you.

61
00:05:03,990 --> 00:05:05,900
What about things that are not buttons?

62
00:05:06,000 --> 00:05:12,420
What if you wanted a slider or a navigation bar? Then, you know, if there isn't a generator out there then

63
00:05:12,420 --> 00:05:15,500
you would have to write all of this code yourself.

64
00:05:15,510 --> 00:05:21,570
Now if we copy this code and we go over to Code Ply. And the reason why we're using Code Ply rather

65
00:05:21,570 --> 00:05:27,750
than Code Pen is because they are a playground that allows you to include these frameworks, for example

66
00:05:27,780 --> 00:05:30,430
Bootstrap and a number of other ones.

67
00:05:30,450 --> 00:05:36,510
So let's go ahead and create a new playground on here and I'm going to go into the settings and I'm

68
00:05:36,510 --> 00:05:43,460
going to remove the Bootstrap framework so we have no frameworks, and then I'm going to create a button

69
00:05:44,370 --> 00:05:53,470
as we did before, and we're going to give it a class of btn, to match what we had over here as the selector,

70
00:05:54,000 --> 00:06:00,160
and then I'm going to give our button, maybe let's call it Hello World, and let's go ahead and run.

71
00:06:00,240 --> 00:06:02,210
And then you'll see there's our button.

72
00:06:02,370 --> 00:06:04,260
This is plain HTML button.

73
00:06:04,260 --> 00:06:06,680
It looks pretty boring and pretty bland.

74
00:06:06,840 --> 00:06:13,020
And in order to make it look a bit nicer we have to add all of this code in order to make it look 

75
00:06:13,020 --> 00:06:15,880
like this and have a hover state.

76
00:06:16,170 --> 00:06:19,380
Now I want to show you what you can do with Bootstrap.

77
00:06:19,380 --> 00:06:21,290
You don't need any of this.

78
00:06:21,300 --> 00:06:27,120
You don't have to write your own CSS code, or you don't have to find it somewhere and paste in snippets.

79
00:06:27,720 --> 00:06:35,160
All you have to do is add in the Bootstrap framework. And we're going to be working with the latest version

80
00:06:35,160 --> 00:06:38,610
of Bootstrap, so Bootstrap 4, throughout this course.

81
00:06:38,610 --> 00:06:44,870
So it's been a long time coming and it was only really released in January 2018.

82
00:06:44,880 --> 00:06:50,700
So this is a fantastic time to start learning Bootstrap, because you'll be working with the latest

83
00:06:51,090 --> 00:06:53,040
version and the gold standard.

84
00:06:53,160 --> 00:06:58,650
So, you know, if you've learnt Bootstrap before, or if you have web sites created using earlier versions,

85
00:06:59,010 --> 00:07:05,220
even Bootstrap 3, or even some of the alphas, there's been a lot of changes, and it's great that we're

86
00:07:05,220 --> 00:07:09,690
starting with the proper official version of Bootstrap 4.0.

87
00:07:10,020 --> 00:07:18,030
So now that we’ve selected our framework, let's go ahead and hit save, and now what we can do is, we can add

88
00:07:18,150 --> 00:07:24,570
some classes that are predefined by Bootstrap to start styling our button.

89
00:07:24,570 --> 00:07:30,990
So for example we can say that this is a btn and it's going to be a btn-primary.

90
00:07:30,990 --> 00:07:37,500
Now if I run that code you'll see that Bootstrap has generated this button for me with no CSS code

91
00:07:37,500 --> 00:07:38,690
on my part.

92
00:07:38,730 --> 00:07:45,790
All I needed to do was add in three words in order to activate those selectors so that I can get this

93
00:07:45,800 --> 00:07:46,450
style.

94
00:07:46,470 --> 00:07:51,750
And you can see that it's beautifully rounded in its corners, and it's got a hover state, and it just

95
00:07:51,750 --> 00:07:56,220
generally looks really really nice with very very minimal effort.

96
00:07:56,460 --> 00:07:58,090
So we can do other things as well.

97
00:07:58,110 --> 00:08:04,890
So for example if I didn't want the blue one then I can say btn btn-dark, and this will give me

98
00:08:04,920 --> 00:08:07,820
a nice black colored button.

99
00:08:07,830 --> 00:08:14,880
Now there's a whole bunch of other types of buttons, for example btn-outline-dark, which gives me a

100
00:08:15,030 --> 00:08:16,620
outline button and when I hover it,

101
00:08:16,620 --> 00:08:23,540
it becomes filled. I can make it bigger by just saying btn-lg,

102
00:08:23,640 --> 00:08:26,070
and that gets me a larger button.

103
00:08:26,100 --> 00:08:28,930
So let me show you how Bootstrap works.

104
00:08:28,980 --> 00:08:34,860
Now, in order to do that we can go over to the Bootstrap web site, which is getbootstrap.com, and

105
00:08:34,860 --> 00:08:39,370
you'll see that we've got version 4.0 selected in the top right corner.

106
00:08:39,660 --> 00:08:44,550
And I want to just go ahead and download the source code for Bootstrap.

107
00:08:44,550 --> 00:08:51,840
And once you've done that you should have a folder called bootstrap-4.0 or or 4.1 or whatever it may

108
00:08:51,840 --> 00:08:52,120
be.

109
00:08:52,170 --> 00:08:55,160
As long as it's got the 4 in front then we are good to go.

110
00:08:55,410 --> 00:09:01,620
Now once you open that file, you should see that there's a folder called dist, and inside here there's

111
00:09:01,620 --> 00:09:03,230
a folder called css.

112
00:09:03,240 --> 00:09:08,640
Now we're going to go into the bootstrap.css, which is the main CSS file, and you're going to open

113
00:09:08,640 --> 00:09:10,550
it up inside Atom.

114
00:09:10,560 --> 00:09:17,430
Now if you scroll through this code you can see that it's got a whole bunch of predefined styles for

115
00:09:17,680 --> 00:09:19,310
our HTML elements,

116
00:09:19,380 --> 00:09:27,210
for example the body, or the horizontal rule, or the h1 through to h6, and this isn't new for us.

117
00:09:27,210 --> 00:09:28,790
We've seen that inside the browser,

118
00:09:28,800 --> 00:09:35,220
we’ve got this thing called user agent stylesheet, which is the CSS that gets applied to our web sites

119
00:09:35,580 --> 00:09:37,070
by the browser.

120
00:09:37,320 --> 00:09:45,270
Now in addition to that if you include Bootstrap on your web site, then it will change the style of your

121
00:09:45,270 --> 00:09:46,140
elements.

122
00:09:46,140 --> 00:09:52,950
So if you use a horizontal rule while using Bootstrap, then it will look like this, and it will override some

123
00:09:52,950 --> 00:09:54,720
of those browser based styles.

124
00:09:54,840 --> 00:10:02,960
But more importantly to how Bootstrap works is that it's got a whole bunch of classes that they have styled

125
00:10:02,990 --> 00:10:04,990
and specified code for.

126
00:10:05,120 --> 00:10:11,690
So that means that if you add a particular class name then it will automatically style it in the way that

127
00:10:11,690 --> 00:10:15,320
has been specified by the Bootstrap code.

128
00:10:15,320 --> 00:10:17,780
So let's see that in action.

129
00:10:17,780 --> 00:10:22,310
I want to show you one of the components that you see a lot on Bootstrap web sites,

130
00:10:22,340 --> 00:10:23,920
and this is the jumbotron.

131
00:10:23,960 --> 00:10:29,510
This is basically just a header for your web site, and you can see that they've already specified styles,

132
00:10:29,510 --> 00:10:35,750
for example the padding, the margin, the background color, the border radius, and all we need to do is just

133
00:10:35,840 --> 00:10:39,930
go into our code and add this class.

134
00:10:40,040 --> 00:10:47,640
So I'm going to delete the button class and I'm going to create a div that has a class called jumbotron.

135
00:10:47,900 --> 00:10:53,660
And inside this div I'm just going to create a h1 that says Hello World,

136
00:10:53,660 --> 00:10:58,770
because remember that divs have no dimension themselves unless they have some content.

137
00:10:58,940 --> 00:11:07,220
So let's hit run, and you can see that we've got this brilliant jumbotron that is going to occupy and

138
00:11:07,220 --> 00:11:11,630
I can pop this out to show you what the web site would look like as it is.

139
00:11:11,840 --> 00:11:18,280
So you've got this header, which is the jumbotron, and you've got your h1, which has been styled by Bootstrap

140
00:11:18,290 --> 00:11:23,870
to have a different font and different size from what you would normally see if you just had HTML,

141
00:11:24,290 --> 00:11:30,040
and all I need to do to get all of this was just to include the class jumbotron.

142
00:11:30,080 --> 00:11:35,930
Now if you have a look on Bootstrap and you go into the documentation and look through its components,

143
00:11:36,140 --> 00:11:43,190
you'll find that there is the jumbotron, and they tell you exactly how you can use this particular class

144
00:11:43,370 --> 00:11:51,550
to get something that looks like this or like this just by including some of their pre-specified classes.

145
00:11:51,560 --> 00:11:58,760
So if you wanted to recreate this design here, then you could just copy their code snippet and paste it

146
00:11:58,850 --> 00:12:00,050
into here.

147
00:12:00,100 --> 00:12:06,440
And because we've already got Bootstrap installed on this playground, then if we just hit run and we

148
00:12:06,440 --> 00:12:11,010
can pop this out, you can see that you've got this enabled on your web site.

149
00:12:11,150 --> 00:12:13,790
And there was literally zero effort.

150
00:12:13,790 --> 00:12:19,940
So if you liked this particular format then you could just go in here and change the text and change

151
00:12:19,940 --> 00:12:25,460
the background color, for example, and you would already have a pretty nicely styled web site.

152
00:12:25,460 --> 00:12:26,890
Now that's not all.

153
00:12:26,900 --> 00:12:32,870
If you go into Bootstrap and you go to Examples, you can see that they've created more extensive

154
00:12:32,870 --> 00:12:35,000
components using Bootstrap.

155
00:12:35,000 --> 00:12:41,690
For example, if you ever wanted the Apple web site designed, then you can simply look at their product

156
00:12:41,780 --> 00:12:49,020
example, and in fact if you go into that download that you had previously for bootstrap-4.0 and you go

157
00:12:49,020 --> 00:12:56,240
into docs and you go into 4.0 or 4.1 or whatever your version may be, then you go into examples, and

158
00:12:56,240 --> 00:12:58,820
you can see it's got all of the examples that they show here.

159
00:12:58,820 --> 00:13:05,060
For example Pricing, Checkout, Product, Album, and if you open up index.html, you can see that this

160
00:13:05,060 --> 00:13:10,970
is what the site looks like and you can view all of the code that was required to create this inside

161
00:13:11,000 --> 00:13:11,670
Atom.

162
00:13:11,810 --> 00:13:19,120
So this is the HTML that they wrote, and this is some custom CSS that modifies the bootstrap and customizes it

163
00:13:19,120 --> 00:13:20,120
it a little bit.

164
00:13:20,150 --> 00:13:22,770
So say if this is the web site that you wanted to make,

165
00:13:22,790 --> 00:13:30,460
so say you wanted to make a company that was an Apple rip off like Grapple, then you could make this web

166
00:13:30,460 --> 00:13:37,910
site by simply copying this product.css and index.html file, and then modifying the text.

167
00:13:37,910 --> 00:13:39,620
So for example this is the h1.

168
00:13:39,650 --> 00:13:43,440
You could just change it to whatever you want to call it for your web site, you know,

169
00:13:43,670 --> 00:13:49,980
Grapple. And now if you refresh, here’s your web site. So you modify a lot of these examples very easily.

170
00:13:50,060 --> 00:13:57,710
Or you can simply add these components by copying the code into your web site. But instead of just modifying

171
00:13:57,710 --> 00:14:02,680
these examples let's take it step by step so that we really understand what we're doing.

172
00:14:02,720 --> 00:14:08,750
And I want to show you exactly how Bootstrap works so that you can not just, you know, rip off these designs,

173
00:14:08,780 --> 00:14:14,120
but you'll be able to design any sort of layout or design that you want by fully understanding this

174
00:14:14,120 --> 00:14:14,980
framework.

175
00:14:14,990 --> 00:14:20,570
So the first thing that we need to do is that we need to know how we can install Bootstrap onto our

176
00:14:20,570 --> 00:14:25,670
web sites when we're not using something that's pre-loaded up like on Code Ply.

177
00:14:25,850 --> 00:14:31,720
So in the next lesson we'll be showing you all the different ways how you can install Bootstrap onto

178
00:14:31,730 --> 00:14:32,990
your own web site.

179
00:14:32,990 --> 00:14:36,000
So for all of that and more I'll see you on the next lesson.