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 2 00:00:06,180 --> 00:00:08,010 generally awesome it is. 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. 4 00:00:12,810 --> 00:00:15,960 How do you install it into your web site projects? 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 6 00:00:22,560 --> 00:00:28,410 we can create a new folder called Bootstrap-installation. 7 00:00:28,500 --> 00:00:34,600 And inside this folder I'm going to create a new file called index.html. 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 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 10 00:00:47,970 --> 00:00:53,470 to our stylesheets, for example, this is where we can add the Bootstrap framework. 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 12 00:00:58,590 --> 00:01:02,710 to how you can install Bootstrap, and it's super super easy. 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 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 15 00:01:16,660 --> 00:01:19,550 this line, it goes over to this 16 00:01:19,620 --> 00:01:22,710 URL and downloads the Bootstrap files 17 00:01:22,710 --> 00:01:26,260 if the user doesn't already have it cached on their browser. 18 00:01:26,310 --> 00:01:29,500 So I just want to quickly explain, firstly, what a CDN is. 19 00:01:29,550 --> 00:01:34,790 So CDN stands for Content Delivery Network, and the concept is really simple. 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 21 00:01:40,440 --> 00:01:41,330 cables, 22 00:01:41,370 --> 00:01:41,860 right? 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 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 25 00:01:55,230 --> 00:01:58,590 then there’ll be some more wires that goes across the land, 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 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 28 00:02:11,280 --> 00:02:15,080 me, to my browser, so that it can be displayed on my web site. 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 30 00:02:21,150 --> 00:02:22,270 route to travel. 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, 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 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 34 00:02:41,280 --> 00:02:44,170 like two seconds, at which point I presume, 35 00:02:44,190 --> 00:02:47,280 oh, you know, it's probably down or there's probably some problems. 36 00:02:47,280 --> 00:02:51,600 So this is where a Content Delivery Network comes in. 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 38 00:02:59,070 --> 00:03:03,530 bunch of points where that web site can be accessed. 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 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 41 00:03:16,890 --> 00:03:20,190 long it takes for your web site to load up. 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 43 00:03:27,870 --> 00:03:29,580 of routing points across the world. 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 45 00:03:35,850 --> 00:03:39,710 access it relatively quickly no matter where in the world they are. 46 00:03:39,810 --> 00:03:41,910 So that's a quick lowdown on CDN. 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 48 00:03:48,030 --> 00:03:49,460 this CSS file 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 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 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. 52 00:04:08,790 --> 00:04:12,140 And when that happens your browser actually caches it, 53 00:04:12,210 --> 00:04:13,870 so it saves the local copy 54 00:04:13,950 --> 00:04:16,220 so you don't have to download it every single time. 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 56 00:04:20,820 --> 00:04:25,880 so popular, your users will probably already have this file on their browser cache, 57 00:04:25,980 --> 00:04:28,920 then it will again cut down on the latency. 58 00:04:28,920 --> 00:04:32,980 So now this is one way of installing Bootstrap onto our web site. 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 60 00:04:42,090 --> 00:04:42,810 framework. 61 00:04:42,990 --> 00:04:44,590 So let's copy the full path, 62 00:04:44,600 --> 00:04:48,230 go to our browser and paste this in. 63 00:04:48,240 --> 00:04:50,810 You can see that this font is different. 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 / 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 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 67 00:05:11,240 --> 00:05:13,020 it looks a little bit nicer. 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 69 00:05:18,200 --> 00:05:22,230 from scratch, is to just copy and use their starter template. 70 00:05:22,310 --> 00:05:25,250 You can see that it's got the HTML5 declaration. 71 00:05:25,280 --> 00:05:27,810 It's got all of the things that you normally need in your web site, 72 00:05:27,820 --> 00:05:31,580 the character set, the Bootstrap CSS, 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. 74 00:05:37,400 --> 00:05:41,360 And then at the bottom it's got some Bootstrap Javascript and jQuery. 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, 76 00:05:46,100 --> 00:05:51,140 but for some of the components in Bootstrap to work they actually need some Javascript. 77 00:05:51,140 --> 00:05:54,790 So for example if something has to change in appearance on your web site, 78 00:05:54,860 --> 00:05:56,960 so, for example, like a dropdown menu, 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, 80 00:06:03,200 --> 00:06:03,560 right? 81 00:06:03,650 --> 00:06:06,890 And that's what this Javascript and jQuery is going to help achieve. 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 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 84 00:06:21,050 --> 00:06:24,070 you need in order to start using Bootstrap. 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 86 00:06:31,160 --> 00:06:34,320 so that you can include it into your web site. 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 88 00:06:41,570 --> 00:06:43,120 with your web site. 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 90 00:06:50,260 --> 00:06:50,940 bootstrap.css. 91 00:06:50,990 --> 00:06:54,370 And this is what I want to use for my web site instead. 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 93 00:07:01,610 --> 00:07:03,310 is a completely separate file, 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 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 96 00:07:14,240 --> 00:07:17,530 leads to possibly a little bit more latency. 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 98 00:07:24,920 --> 00:07:26,610 get it through the CDN. 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 100 00:07:31,820 --> 00:07:34,280 is just to load up the example code 101 00:07:34,280 --> 00:07:37,780 and this means that you'll have everything in there ready to go 102 00:07:37,850 --> 00:07:40,740 and it was only one copy and paste away. 103 00:07:40,760 --> 00:07:42,110 So that's my recommendation, 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, 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 106 00:07:53,060 --> 00:07:53,720 Bootstrap. 107 00:07:53,730 --> 00:07:54,600 So I'll see you there.