0
1
00:00:00,690 --> 00:00:06,180
Now, in the last lesson we spoke about all the amazing things that you can do with Bootstrap, and how
1

2
00:00:06,180 --> 00:00:08,010
generally awesome it is.
2

3
00:00:08,010 --> 00:00:12,780
So in this lesson I want to show you how exactly do you get access to this awesome library.
3

4
00:00:12,810 --> 00:00:15,960
How do you install it into your web site projects?
4

5
00:00:16,140 --> 00:00:22,560
So, to do that, let's head into Atom, and let's add our Web Development project folder in here, so that
5

6
00:00:22,560 --> 00:00:28,410
we can create a new folder called Bootstrap-installation.
6

7
00:00:28,500 --> 00:00:34,600
And inside this folder I'm going to create a new file called index.html.
7

8
00:00:34,920 --> 00:00:40,020
Now that we have this new web site, we can go ahead and create the html boilerplate, and give our web site
8

9
00:00:40,050 --> 00:00:47,880
a title, Bootstrap Installation, and under the title, which is usually where we put in our links that linked
9

10
00:00:47,970 --> 00:00:53,470
to our stylesheets, for example, this is where we can add the Bootstrap framework.
10

11
00:00:53,490 --> 00:00:58,560
So if you head over to getbootstrap.com, you'll see that they've got a whole page that's dedicated
11

12
00:00:58,590 --> 00:01:02,710
to how you can install Bootstrap, and it's super super easy.
12

13
00:01:02,730 --> 00:01:10,850
So, the simplest way is just to copy the BootstrapCDN and paste it into here, and all that this does
13

14
00:01:10,860 --> 00:01:16,660
is that when your browser reads through this code to try and load up the web site, once it gets to
14

15
00:01:16,660 --> 00:01:19,550
this line, it goes over to this
15

16
00:01:19,620 --> 00:01:22,710
URL and downloads the Bootstrap files
16

17
00:01:22,710 --> 00:01:26,260
if the user doesn't already have it cached on their browser.
17

18
00:01:26,310 --> 00:01:29,500
So I just want to quickly explain, firstly, what a CDN is.
18

19
00:01:29,550 --> 00:01:34,790
So CDN stands for Content Delivery Network, and the concept is really simple.
19

20
00:01:34,800 --> 00:01:40,440
So, do you remember how previously we looked at how the Internet is delivered through all of these submarine
20

21
00:01:40,440 --> 00:01:41,330
cables,
21

22
00:01:41,370 --> 00:01:41,860
right?
22

23
00:01:41,880 --> 00:01:49,350
So, for example, if the server for my web site is in the US, say, in the West Coast, and I try to access
23

24
00:01:49,350 --> 00:01:55,230
my web site from the UK, then I would probably need to go through one of these transatlantic cables, and
24

25
00:01:55,230 --> 00:01:58,590
then there’ll be some more wires that goes across the land,
25

26
00:01:58,590 --> 00:02:05,340
and that request reaches my server over here. And then once that request is received, then it has to send
26

27
00:02:05,340 --> 00:02:11,280
back all of those files, the HTML, the CSS, the Javascript, back through all of those routes and back to
27

28
00:02:11,280 --> 00:02:15,080
me, to my browser, so that it can be displayed on my web site.
28

29
00:02:15,240 --> 00:02:21,150
Now, as you can imagine, if that is the only location where your web site exists, then that's quite a long
29

30
00:02:21,150 --> 00:02:22,270
route to travel.
30

31
00:02:22,350 --> 00:02:28,380
And even though these are pretty fast cables, it still generates a delay of, you know, maybe a few milliseconds,
31

32
00:02:28,590 --> 00:02:34,110
or if there's a lot of data that I need to fetch over, like images or videos, there might be a delay of
32

33
00:02:34,110 --> 00:02:41,280
a few seconds, and, I don't know about you, but I generally don't wait for a web site to load beyond maybe
33

34
00:02:41,280 --> 00:02:44,170
like two seconds, at which point I presume,
34

35
00:02:44,190 --> 00:02:47,280
oh, you know, it's probably down or there's probably some problems.
35

36
00:02:47,280 --> 00:02:51,600
So this is where a Content Delivery Network comes in.
36

37
00:02:51,870 --> 00:02:59,010
So instead of hosting your web site just in a single location, say over here, you actually have a whole
37

38
00:02:59,070 --> 00:03:03,530
bunch of points where that web site can be accessed.
38

39
00:03:03,540 --> 00:03:10,080
So that means that if my request starts off from the UK, then it will look for the location that is the
39

40
00:03:10,080 --> 00:03:16,890
shortest distance to get that web site delivered. And that dramatically cuts down on the latency, or how
40

41
00:03:16,890 --> 00:03:20,190
long it takes for your web site to load up.
41

42
00:03:20,220 --> 00:03:27,870
And in terms of Bootstrap, they've hosted their Bootstrap CSS files on MaxCDN, which has a whole number 
42

43
00:03:27,870 --> 00:03:29,580
of routing points across the world.
43

44
00:03:29,580 --> 00:03:35,760
So that means when your users are trying to load up your web site that's using Bootstrap, then it can
44

45
00:03:35,850 --> 00:03:39,710
access it relatively quickly no matter where in the world they are.
45

46
00:03:39,810 --> 00:03:41,910
So that's a quick lowdown on CDN.
46

47
00:03:42,060 --> 00:03:47,970
And that means that when your browser reaches this link, it'll look for the shortest route to download
47

48
00:03:48,030 --> 00:03:49,460
this CSS file
48

49
00:03:49,590 --> 00:03:55,380
if the user doesn't already have it. Now, because Bootstrap is one of the most popular frameworks that
49

50
00:03:55,440 --> 00:04:03,330
a lot of modern web sites will have, then it's very very likely that your users will have already downloaded
50

51
00:04:03,330 --> 00:04:08,630
this CSS file because they've loaded up a web site that uses the same file.
51

52
00:04:08,790 --> 00:04:12,140
And when that happens your browser actually caches it,
52

53
00:04:12,210 --> 00:04:13,870
so it saves the local copy
53

54
00:04:13,950 --> 00:04:16,220
so you don't have to download it every single time.
54

55
00:04:16,230 --> 00:04:20,820
And that's one of the other advantages of working with Bootstrap. Because it's so common, because it's
55

56
00:04:20,820 --> 00:04:25,880
so popular, your users will probably already have this file on their browser cache,
56

57
00:04:25,980 --> 00:04:28,920
then it will again cut down on the latency.
57

58
00:04:28,920 --> 00:04:32,980
So now this is one way of installing Bootstrap onto our web site.
58

59
00:04:32,980 --> 00:04:41,820
And now if I go ahead and add a h1 for example, then you'll see that it gets styled using the Bootstrap
59

60
00:04:42,090 --> 00:04:42,810
framework.
60

61
00:04:42,990 --> 00:04:44,590
So let's copy the full path,
61

62
00:04:44,600 --> 00:04:48,230
go to our browser and paste this in.
62

63
00:04:48,240 --> 00:04:50,810
You can see that this font is different.
63

64
00:04:50,850 --> 00:04:57,510
So say if I go ahead and comment this out, so I'm going to highlight this line and select command /
64

65
00:04:57,510 --> 00:05:03,740
or control / on Windows, hit save, and we go back over here and we refresh, then you can
65

66
00:05:03,740 --> 00:05:10,790
see this is our default HTML styling, which is this Serif font that looks kind of ugly, but with Bootstrap
66

67
00:05:11,240 --> 00:05:13,020
it looks a little bit nicer.
67

68
00:05:13,040 --> 00:05:18,120
Now, the other way that you can add Bootstrap to your web site, especially if you're creating a web site
68

69
00:05:18,200 --> 00:05:22,230
from scratch, is to just copy and use their starter template.
69

70
00:05:22,310 --> 00:05:25,250
You can see that it's got the HTML5 declaration.
70

71
00:05:25,280 --> 00:05:27,810
It's got all of the things that you normally need in your web site,
71

72
00:05:27,820 --> 00:05:31,580
the character set, the Bootstrap CSS,
72

73
00:05:31,700 --> 00:05:37,300
it’s got a title already added for you, the body, the h1, which you can delete if you don't need.
73

74
00:05:37,400 --> 00:05:41,360
And then at the bottom it's got some Bootstrap Javascript and jQuery.
74

75
00:05:41,360 --> 00:05:46,000
Now we're going to be learning about Javascript and jQuery in in the next modules,
75

76
00:05:46,100 --> 00:05:51,140
but for some of the components in Bootstrap to work they actually need some Javascript.
76

77
00:05:51,140 --> 00:05:54,790
So for example if something has to change in appearance on your web site,
77

78
00:05:54,860 --> 00:05:56,960
so, for example, like a dropdown menu,
78

79
00:05:57,050 --> 00:06:03,150
then this actually needs a little bit more code than just HTML and CSS, because this is kind of a functionality,
79

80
00:06:03,200 --> 00:06:03,560
right?
80

81
00:06:03,650 --> 00:06:06,890
And that's what this Javascript and jQuery is going to help achieve.
81

82
00:06:07,100 --> 00:06:14,300
So if you wanted the complete set and for everything that you'll implement in Bootstrap to work, then
82

83
00:06:14,300 --> 00:06:21,050
the easiest way is just to simply paste in the starter template and now you will have everything that
83

84
00:06:21,050 --> 00:06:24,070
you need in order to start using Bootstrap.
84

85
00:06:24,080 --> 00:06:30,890
Now the third way of installing Bootstrap is to simply download the CSS and Javascript source code
85

86
00:06:31,160 --> 00:06:34,320
so that you can include it into your web site.
86

87
00:06:34,370 --> 00:06:41,390
So instead of pointing to a URL on the Internet, you can point to a relative URL that will be included
87

88
00:06:41,570 --> 00:06:43,120
with your web site.
88

89
00:06:43,130 --> 00:06:50,120
So, for example, you might say, you know, go into this CSS folder and find a
89

90
00:06:50,260 --> 00:06:50,940
bootstrap.css.
90

91
00:06:50,990 --> 00:06:54,370
And this is what I want to use for my web site instead.
91

92
00:06:54,380 --> 00:07:01,610
Now the downside to this is that this negates any sort of caching that a user will have. Because this
92

93
00:07:01,610 --> 00:07:03,310
is a completely separate file,
93

94
00:07:03,380 --> 00:07:08,630
the browsers will not recognize this and will not know that it's already been downloaded and already
94

95
00:07:08,630 --> 00:07:14,240
been cached, so we will have to download all of these files when it tries to load up your web site, which
95

96
00:07:14,240 --> 00:07:17,530
leads to possibly a little bit more latency.
96

97
00:07:17,540 --> 00:07:24,890
So throughout this course we'll be working with the easiest way of using Bootstrap which is simply to
97

98
00:07:24,920 --> 00:07:26,610
get it through the CDN.
98

99
00:07:26,630 --> 00:07:31,650
And usually I tend to advise just when you're starting out creating the web site using Bootstrap
99

100
00:07:31,820 --> 00:07:34,280
is just to load up the example code
100

101
00:07:34,280 --> 00:07:37,780
and this means that you'll have everything in there ready to go
101

102
00:07:37,850 --> 00:07:40,740
and it was only one copy and paste away.
102

103
00:07:40,760 --> 00:07:42,110
So that's my recommendation,
103

104
00:07:42,170 --> 00:07:46,340
but of course it's completely up to you how you decide to do it. In the next lesson,
104

105
00:07:46,340 --> 00:07:53,000
we’re going to look closer at how we can design our web site and start replicating the designs using
105

106
00:07:53,060 --> 00:07:53,720
Bootstrap.
106

107
00:07:53,730 --> 00:07:54,600
So I'll see you there.