WEBVTT 0 00:00.690 --> 00:06.180 Now, in the last lesson we spoke about all the amazing things that you can do with Bootstrap, and how 1 00:06.180 --> 00:08.010 generally awesome it is. 2 00:08.010 --> 00:12.780 So in this lesson I want to show you how exactly do you get access to this awesome library. 3 00:12.810 --> 00:15.960 How do you install it into your web site projects? 4 00:16.140 --> 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 00:22.560 --> 00:28.410 we can create a new folder called Bootstrap-installation. 6 00:28.500 --> 00:34.600 And inside this folder I'm going to create a new file called index.html. 7 00:34.920 --> 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 00:40.050 --> 00:47.880 a title, Bootstrap Installation, and under the title, which is usually where we put in our links that linked 9 00:47.970 --> 00:53.470 to our stylesheets, for example, this is where we can add the Bootstrap framework. 10 00:53.490 --> 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 00:58.590 --> 01:02.710 to how you can install Bootstrap, and it's super super easy. 12 01:02.730 --> 01:10.850 So, the simplest way is just to copy the BootstrapCDN and paste it into here, and all that this does 13 01:10.860 --> 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 01:16.660 --> 01:19.550 this line, it goes over to this 15 01:19.620 --> 01:22.710 URL and downloads the Bootstrap files 16 01:22.710 --> 01:26.260 if the user doesn't already have it cached on their browser. 17 01:26.310 --> 01:29.500 So I just want to quickly explain, firstly, what a CDN is. 18 01:29.550 --> 01:34.790 So CDN stands for Content Delivery Network, and the concept is really simple. 19 01:34.800 --> 01:40.440 So, do you remember how previously we looked at how the Internet is delivered through all of these submarine 20 01:40.440 --> 01:41.330 cables, 21 01:41.370 --> 01:41.860 right? 22 01:41.880 --> 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 01:49.350 --> 01:55.230 my web site from the UK, then I would probably need to go through one of these transatlantic cables, and 24 01:55.230 --> 01:58.590 then there’ll be some more wires that goes across the land, 25 01:58.590 --> 02:05.340 and that request reaches my server over here. And then once that request is received, then it has to send 26 02:05.340 --> 02:11.280 back all of those files, the HTML, the CSS, the Javascript, back through all of those routes and back to 27 02:11.280 --> 02:15.080 me, to my browser, so that it can be displayed on my web site. 28 02:15.240 --> 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 02:21.150 --> 02:22.270 route to travel. 30 02:22.350 --> 02:28.380 And even though these are pretty fast cables, it still generates a delay of, you know, maybe a few milliseconds, 31 02:28.590 --> 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 02:34.110 --> 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 02:41.280 --> 02:44.170 like two seconds, at which point I presume, 34 02:44.190 --> 02:47.280 oh, you know, it's probably down or there's probably some problems. 35 02:47.280 --> 02:51.600 So this is where a Content Delivery Network comes in. 36 02:51.870 --> 02:59.010 So instead of hosting your web site just in a single location, say over here, you actually have a whole 37 02:59.070 --> 03:03.530 bunch of points where that web site can be accessed. 38 03:03.540 --> 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 03:10.080 --> 03:16.890 shortest distance to get that web site delivered. And that dramatically cuts down on the latency, or how 40 03:16.890 --> 03:20.190 long it takes for your web site to load up. 41 03:20.220 --> 03:27.870 And in terms of Bootstrap, they've hosted their Bootstrap CSS files on MaxCDN, which has a whole number 42 03:27.870 --> 03:29.580 of routing points across the world. 43 03:29.580 --> 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 03:35.850 --> 03:39.710 access it relatively quickly no matter where in the world they are. 45 03:39.810 --> 03:41.910 So that's a quick lowdown on CDN. 46 03:42.060 --> 03:47.970 And that means that when your browser reaches this link, it'll look for the shortest route to download 47 03:48.030 --> 03:49.460 this CSS file 48 03:49.590 --> 03:55.380 if the user doesn't already have it. Now, because Bootstrap is one of the most popular frameworks that 49 03:55.440 --> 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 04:03.330 --> 04:08.630 this CSS file because they've loaded up a web site that uses the same file. 51 04:08.790 --> 04:12.140 And when that happens your browser actually caches it, 52 04:12.210 --> 04:13.870 so it saves the local copy 53 04:13.950 --> 04:16.220 so you don't have to download it every single time. 54 04:16.230 --> 04:20.820 And that's one of the other advantages of working with Bootstrap. Because it's so common, because it's 55 04:20.820 --> 04:25.880 so popular, your users will probably already have this file on their browser cache, 56 04:25.980 --> 04:28.920 then it will again cut down on the latency. 57 04:28.920 --> 04:32.980 So now this is one way of installing Bootstrap onto our web site. 58 04:32.980 --> 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 04:42.090 --> 04:42.810 framework. 60 04:42.990 --> 04:44.590 So let's copy the full path, 61 04:44.600 --> 04:48.230 go to our browser and paste this in. 62 04:48.240 --> 04:50.810 You can see that this font is different. 63 04:50.850 --> 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 04:57.510 --> 05:03.740 or control / on Windows, hit save, and we go back over here and we refresh, then you can 65 05:03.740 --> 05:10.790 see this is our default HTML styling, which is this Serif font that looks kind of ugly, but with Bootstrap 66 05:11.240 --> 05:13.020 it looks a little bit nicer. 67 05:13.040 --> 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 05:18.200 --> 05:22.230 from scratch, is to just copy and use their starter template. 69 05:22.310 --> 05:25.250 You can see that it's got the HTML5 declaration. 70 05:25.280 --> 05:27.810 It's got all of the things that you normally need in your web site, 71 05:27.820 --> 05:31.580 the character set, the Bootstrap CSS, 72 05:31.700 --> 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 05:37.400 --> 05:41.360 And then at the bottom it's got some Bootstrap Javascript and jQuery. 74 05:41.360 --> 05:46.000 Now we're going to be learning about Javascript and jQuery in in the next modules, 75 05:46.100 --> 05:51.140 but for some of the components in Bootstrap to work they actually need some Javascript. 76 05:51.140 --> 05:54.790 So for example if something has to change in appearance on your web site, 77 05:54.860 --> 05:56.960 so, for example, like a dropdown menu, 78 05:57.050 --> 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 06:03.200 --> 06:03.560 right? 80 06:03.650 --> 06:06.890 And that's what this Javascript and jQuery is going to help achieve. 81 06:07.100 --> 06:14.300 So if you wanted the complete set and for everything that you'll implement in Bootstrap to work, then 82 06:14.300 --> 06:21.050 the easiest way is just to simply paste in the starter template and now you will have everything that 83 06:21.050 --> 06:24.070 you need in order to start using Bootstrap. 84 06:24.080 --> 06:30.890 Now the third way of installing Bootstrap is to simply download the CSS and Javascript source code 85 06:31.160 --> 06:34.320 so that you can include it into your web site. 86 06:34.370 --> 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 06:41.570 --> 06:43.120 with your web site. 88 06:43.130 --> 06:50.120 So, for example, you might say, you know, go into this CSS folder and find a 89 06:50.260 --> 06:50.940 bootstrap.css. 90 06:50.990 --> 06:54.370 And this is what I want to use for my web site instead. 91 06:54.380 --> 07:01.610 Now the downside to this is that this negates any sort of caching that a user will have. Because this 92 07:01.610 --> 07:03.310 is a completely separate file, 93 07:03.380 --> 07:08.630 the browsers will not recognize this and will not know that it's already been downloaded and already 94 07:08.630 --> 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 07:14.240 --> 07:17.530 leads to possibly a little bit more latency. 96 07:17.540 --> 07:24.890 So throughout this course we'll be working with the easiest way of using Bootstrap which is simply to 97 07:24.920 --> 07:26.610 get it through the CDN. 98 07:26.630 --> 07:31.650 And usually I tend to advise just when you're starting out creating the web site using Bootstrap 99 07:31.820 --> 07:34.280 is just to load up the example code 100 07:34.280 --> 07:37.780 and this means that you'll have everything in there ready to go 101 07:37.850 --> 07:40.740 and it was only one copy and paste away. 102 07:40.760 --> 07:42.110 So that's my recommendation, 103 07:42.170 --> 07:46.340 but of course it's completely up to you how you decide to do it. In the next lesson, 104 07:46.340 --> 07:53.000 we’re going to look closer at how we can design our web site and start replicating the designs using 105 07:53.060 --> 07:53.720 Bootstrap. 106 07:53.730 --> 07:54.600 So I'll see you there.