Original subtitles

0 Now, in the last lesson we spoke about all the amazing things that you can do with Bootstrap, and how 1

generally awesome it is. 2

So in this lesson I want to show you how exactly do you get access to this awesome library. 3

How do you install it into your web site projects? 4

So, to do that, let's head into Atom, and let's add our Web Development project folder in here, so that 5

we can create a new folder called Bootstrap-installation. 6

And inside this folder I'm going to create a new file called index.html. 7

Now that we have this new web site, we can go ahead and create the html boilerplate, and give our web site 8

a title, Bootstrap Installation, and under the title, which is usually where we put in our links that linked 9

to our stylesheets, for example, this is where we can add the Bootstrap framework. 10

So if you head over to getbootstrap.com, you'll see that they've got a whole page that's dedicated 11

to how you can install Bootstrap, and it's super super easy. 12

So, the simplest way is just to copy the BootstrapCDN and paste it into here, and all that this does 13

is that when your browser reads through this code to try and load up the web site, once it gets to 14

this line, it goes over to this 15

URL and downloads the Bootstrap files 16

if the user doesn't already have it cached on their browser. 17

So I just want to quickly explain, firstly, what a CDN is. 18

So CDN stands for Content Delivery Network, and the concept is really simple. 19

So, do you remember how previously we looked at how the Internet is delivered through all of these submarine 20

cables, 21

right? 22

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

my web site from the UK, then I would probably need to go through one of these transatlantic cables, and 24

then there’ll be some more wires that goes across the land, 25

and that request reaches my server over here. And then once that request is received, then it has to send 26

back all of those files, the HTML, the CSS, the Javascript, back through all of those routes and back to 27

me, to my browser, so that it can be displayed on my web site. 28

Now, as you can imagine, if that is the only location where your web site exists, then that's quite a long 29

route to travel. 30

And even though these are pretty fast cables, it still generates a delay of, you know, maybe a few milliseconds, 31

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

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

like two seconds, at which point I presume, 34

oh, you know, it's probably down or there's probably some problems. 35

So this is where a Content Delivery Network comes in. 36

So instead of hosting your web site just in a single location, say over here, you actually have a whole 37

bunch of points where that web site can be accessed. 38

So that means that if my request starts off from the UK, then it will look for the location that is the 39

shortest distance to get that web site delivered. And that dramatically cuts down on the latency, or how 40

long it takes for your web site to load up. 41

And in terms of Bootstrap, they've hosted their Bootstrap CSS files on MaxCDN, which has a whole number 42

of routing points across the world. 43

So that means when your users are trying to load up your web site that's using Bootstrap, then it can 44

access it relatively quickly no matter where in the world they are. 45

So that's a quick lowdown on CDN. 46

And that means that when your browser reaches this link, it'll look for the shortest route to download 47

this CSS file 48

if the user doesn't already have it. Now, because Bootstrap is one of the most popular frameworks that 49

a lot of modern web sites will have, then it's very very likely that your users will have already downloaded 50

this CSS file because they've loaded up a web site that uses the same file. 51

And when that happens your browser actually caches it, 52

so it saves the local copy 53

so you don't have to download it every single time. 54

And that's one of the other advantages of working with Bootstrap. Because it's so common, because it's 55

so popular, your users will probably already have this file on their browser cache, 56

then it will again cut down on the latency. 57

So now this is one way of installing Bootstrap onto our web site. 58

And now if I go ahead and add a h1 for example, then you'll see that it gets styled using the Bootstrap 59

framework. 60

So let's copy the full path, 61

go to our browser and paste this in. 62

You can see that this font is different. 63

So say if I go ahead and comment this out, so I'm going to highlight this line and select command / 64

or control / on Windows, hit save, and we go back over here and we refresh, then you can 65

see this is our default HTML styling, which is this Serif font that looks kind of ugly, but with Bootstrap 66

it looks a little bit nicer. 67

Now, the other way that you can add Bootstrap to your web site, especially if you're creating a web site 68

from scratch, is to just copy and use their starter template. 69

You can see that it's got the HTML5 declaration. 70

It's got all of the things that you normally need in your web site, 71

the character set, the Bootstrap CSS, 72

it’s got a title already added for you, the body, the h1, which you can delete if you don't need. 73

And then at the bottom it's got some Bootstrap Javascript and jQuery. 74

Now we're going to be learning about Javascript and jQuery in in the next modules, 75

but for some of the components in Bootstrap to work they actually need some Javascript. 76

So for example if something has to change in appearance on your web site, 77

so, for example, like a dropdown menu, 78

then this actually needs a little bit more code than just HTML and CSS, because this is kind of a functionality, 79

right? 80

And that's what this Javascript and jQuery is going to help achieve. 81

So if you wanted the complete set and for everything that you'll implement in Bootstrap to work, then 82

the easiest way is just to simply paste in the starter template and now you will have everything that 83

you need in order to start using Bootstrap. 84

Now the third way of installing Bootstrap is to simply download the CSS and Javascript source code 85

so that you can include it into your web site. 86

So instead of pointing to a URL on the Internet, you can point to a relative URL that will be included 87

with your web site. 88

So, for example, you might say, you know, go into this CSS folder and find a 89

bootstrap.css. 90

And this is what I want to use for my web site instead. 91

Now the downside to this is that this negates any sort of caching that a user will have. Because this 92

is a completely separate file, 93

the browsers will not recognize this and will not know that it's already been downloaded and already 94

been cached, so we will have to download all of these files when it tries to load up your web site, which 95

leads to possibly a little bit more latency. 96

So throughout this course we'll be working with the easiest way of using Bootstrap which is simply to 97

get it through the CDN. 98

And usually I tend to advise just when you're starting out creating the web site using Bootstrap 99

is just to load up the example code 100

and this means that you'll have everything in there ready to go 101

and it was only one copy and paste away. 102

So that's my recommendation, 103

but of course it's completely up to you how you decide to do it. In the next lesson, 104

we’re going to look closer at how we can design our web site and start replicating the designs using 105

Bootstrap. 106

So I'll see you there.