WEBVTT 0 00:00.450 --> 00:05.130 All right guys. It is a new week and we are on to a new topic. 1 00:05.280 --> 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 2 00:10.680 --> 00:13.980 to do more and more exciting things as we learn more 3 00:13.980 --> 00:15.280 and as we go along. 4 00:15.300 --> 00:22.190 So today I'm going to talk about Bootstrap, and this is what's called a front end library. 5 00:22.320 --> 00:29.200 Now, you'll hear these words quite often: front end, back end, interface... What does it all mean? 6 00:29.310 --> 00:33.960 So, this cartoon is one of the ways that best represents this concept. 7 00:33.990 --> 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 8 00:39.930 --> 00:41.990 site or your mobile app. 9 00:42.030 --> 00:48.660 Now the back end tends to reside on the server, and is basically behind the scenes sort of business logic 10 00:48.750 --> 00:52.340 of how your web site or how your app is going to work, 11 00:52.350 --> 00:54.410 so things that it has to do. 12 00:54.480 --> 00:59.050 So this is where you code a lot of the functionality of the web site or the app. 13 00:59.070 --> 01:06.050 So you've got your web sites and your apps that can be designed to have a beautiful user interface, 14 01:06.090 --> 01:10.460 and, you know, things like animations or buttons. 15 01:10.470 --> 01:13.550 Basically whatever the user sees is the front end. 16 01:13.770 --> 01:20.550 Now in the back you've got the server, you've got the databases, you know, less exciting, less pretty, 17 01:20.940 --> 01:27.810 but nonetheless it's a really really important part of any web site or app, because it's going to determine 18 01:28.050 --> 01:30.230 how everything is going to work. 19 01:30.240 --> 01:35.430 These two parts will need to talk to each other in order for data to be delivered. 20 01:35.430 --> 01:41.760 So for example if you're AirBnB, then in the back end you've got your listings, you can search and 21 01:41.760 --> 01:46.790 query for them, and then you can deliver them to the front end, say the web site or the app. 22 01:46.800 --> 01:50.120 Now this division is the front end back end division. 23 01:50.280 --> 01:56.010 And usually you'll see different languages being used for the front end and the back end. 24 01:56.100 --> 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 25 02:02.340 --> 02:10.290 you see in web design. Now on the back end you have slightly more powerful languages like C#, Ruby, 26 02:10.440 --> 02:12.390 PHP, Java, NodeJS, 27 02:12.420 --> 02:13.180 or SQL 28 02:13.180 --> 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 29 02:21.040 --> 02:28.080 functionality, business logic, data storage, and a whole bunch of really exciting things that we're going 30 02:28.080 --> 02:30.810 to explore later on in the course. 31 02:30.810 --> 02:34.500 Now Bootstrap is very firmly on the front end. 32 02:34.560 --> 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 33 02:40.980 --> 02:44.160 designing the web site much much easier for you. 34 02:44.190 --> 02:51.300 Now Bootstrap was originally developed by Twitter in order to try and get more consistence across web sites 35 02:51.300 --> 02:52.410 that they design. 36 02:52.410 --> 02:55.520 But since then they've made it free and open source, 37 02:55.590 --> 02:59.210 so that means you can see all of the source code on GitHub. 38 02:59.250 --> 03:06.690 And in fact if you go there you'll notice that it has a whopping 122,000 stars, and 39 03:06.720 --> 03:14.040 it's in fact the second most starred repository on all of GitHub, so that just shows you how popular 40 03:14.040 --> 03:14.630 it is. 41 03:14.850 --> 03:21.180 And this is definitely the most popular front end framework or library that you'll ever come across. 42 03:21.180 --> 03:23.350 Now what does it allow you to do? 43 03:23.370 --> 03:30.300 Well, one of the most important things is that, as the number of users are moving away from desktop towards 44 03:30.300 --> 03:34.620 mobile, a lot of web sites need to be responsive. 45 03:34.700 --> 03:40.710 Now this is probably not the best term for what this means, because when people think responsive they 46 03:40.710 --> 03:45.810 think, ‘Oh, it has to be fast’, or, you know, ‘It has to load up immediately’. 47 03:45.990 --> 03:54.300 But actually that's not what responsive is at all. Responsive just means that it responds to the viewport. 48 03:54.300 --> 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 49 04:01.920 --> 04:09.430 a different layout to be able to best take advantage of the size of the screen real estate. 50 04:09.660 --> 04:14.090 So I think a better word would almost be something like adaptable layout. 51 04:14.100 --> 04:20.670 So your web site changes its design depending on where it's being displayed. And Bootstrap makes this 52 04:20.670 --> 04:24.930 super super easy as we'll see in the coming lessons. Now 53 04:24.990 --> 04:30.510 the other really awesome thing about Bootstrap is that you get access to a whole bunch of pre-styled 54 04:30.570 --> 04:36.710 elements that you can simply just drop into your code with very very minimal effort. 55 04:36.780 --> 04:38.530 So let me show you how it works. 56 04:38.580 --> 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 57 04:46.140 --> 04:52.530 and it looked generally nice we had to go to CSS Button Generator and put in the requirements that 58 04:52.530 --> 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 59 04:59.040 --> 05:03.850 somewhere like the CSS Button Generator where it would generate this code for you. 60 05:03.990 --> 05:05.900 What about things that are not buttons? 61 05:06.000 --> 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 62 05:12.420 --> 05:15.500 you would have to write all of this code yourself. 63 05:15.510 --> 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 64 05:21.570 --> 05:27.750 than Code Pen is because they are a playground that allows you to include these frameworks, for example 65 05:27.780 --> 05:30.430 Bootstrap and a number of other ones. 66 05:30.450 --> 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 67 05:36.510 --> 05:43.460 going to remove the Bootstrap framework so we have no frameworks, and then I'm going to create a button 68 05:44.370 --> 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, 69 05:54.000 --> 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. 70 06:00.240 --> 06:02.210 And then you'll see there's our button. 71 06:02.370 --> 06:04.260 This is plain HTML button. 72 06:04.260 --> 06:06.680 It looks pretty boring and pretty bland. 73 06:06.840 --> 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 74 06:13.020 --> 06:15.880 like this and have a hover state. 75 06:16.170 --> 06:19.380 Now I want to show you what you can do with Bootstrap. 76 06:19.380 --> 06:21.290 You don't need any of this. 77 06:21.300 --> 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. 78 06:27.720 --> 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 79 06:35.160 --> 06:38.610 of Bootstrap, so Bootstrap 4, throughout this course. 80 06:38.610 --> 06:44.870 So it's been a long time coming and it was only really released in January 2018. 81 06:44.880 --> 06:50.700 So this is a fantastic time to start learning Bootstrap, because you'll be working with the latest 82 06:51.090 --> 06:53.040 version and the gold standard. 83 06:53.160 --> 06:58.650 So, you know, if you've learnt Bootstrap before, or if you have web sites created using earlier versions, 84 06:59.010 --> 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 85 07:05.220 --> 07:09.690 starting with the proper official version of Bootstrap 4.0. 86 07:10.020 --> 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 87 07:18.150 --> 07:24.570 some classes that are predefined by Bootstrap to start styling our button. 88 07:24.570 --> 07:30.990 So for example we can say that this is a btn and it's going to be a btn-primary. 89 07:30.990 --> 07:37.500 Now if I run that code you'll see that Bootstrap has generated this button for me with no CSS code 90 07:37.500 --> 07:38.690 on my part. 91 07:38.730 --> 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 92 07:45.800 --> 07:46.450 style. 93 07:46.470 --> 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 94 07:51.750 --> 07:56.220 generally looks really really nice with very very minimal effort. 95 07:56.460 --> 07:58.090 So we can do other things as well. 96 07:58.110 --> 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 97 08:04.920 --> 08:07.820 a nice black colored button. 98 08:07.830 --> 08:14.880 Now there's a whole bunch of other types of buttons, for example btn-outline-dark, which gives me a 99 08:15.030 --> 08:16.620 outline button and when I hover it, 100 08:16.620 --> 08:23.540 it becomes filled. I can make it bigger by just saying btn-lg, 101 08:23.640 --> 08:26.070 and that gets me a larger button. 102 08:26.100 --> 08:28.930 So let me show you how Bootstrap works. 103 08:28.980 --> 08:34.860 Now, in order to do that we can go over to the Bootstrap web site, which is getbootstrap.com, and 104 08:34.860 --> 08:39.370 you'll see that we've got version 4.0 selected in the top right corner. 105 08:39.660 --> 08:44.550 And I want to just go ahead and download the source code for Bootstrap. 106 08:44.550 --> 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 107 08:51.840 --> 08:52.120 be. 108 08:52.170 --> 08:55.160 As long as it's got the 4 in front then we are good to go. 109 08:55.410 --> 09:01.620 Now once you open that file, you should see that there's a folder called dist, and inside here there's 110 09:01.620 --> 09:03.230 a folder called css. 111 09:03.240 --> 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 112 09:08.640 --> 09:10.550 it up inside Atom. 113 09:10.560 --> 09:17.430 Now if you scroll through this code you can see that it's got a whole bunch of predefined styles for 114 09:17.680 --> 09:19.310 our HTML elements, 115 09:19.380 --> 09:27.210 for example the body, or the horizontal rule, or the h1 through to h6, and this isn't new for us. 116 09:27.210 --> 09:28.790 We've seen that inside the browser, 117 09:28.800 --> 09:35.220 we’ve got this thing called user agent stylesheet, which is the CSS that gets applied to our web sites 118 09:35.580 --> 09:37.070 by the browser. 119 09:37.320 --> 09:45.270 Now in addition to that if you include Bootstrap on your web site, then it will change the style of your 120 09:45.270 --> 09:46.140 elements. 121 09:46.140 --> 09:52.950 So if you use a horizontal rule while using Bootstrap, then it will look like this, and it will override some 122 09:52.950 --> 09:54.720 of those browser based styles. 123 09:54.840 --> 10:02.960 But more importantly to how Bootstrap works is that it's got a whole bunch of classes that they have styled 124 10:02.990 --> 10:04.990 and specified code for. 125 10:05.120 --> 10:11.690 So that means that if you add a particular class name then it will automatically style it in the way that 126 10:11.690 --> 10:15.320 has been specified by the Bootstrap code. 127 10:15.320 --> 10:17.780 So let's see that in action. 128 10:17.780 --> 10:22.310 I want to show you one of the components that you see a lot on Bootstrap web sites, 129 10:22.340 --> 10:23.920 and this is the jumbotron. 130 10:23.960 --> 10:29.510 This is basically just a header for your web site, and you can see that they've already specified styles, 131 10:29.510 --> 10:35.750 for example the padding, the margin, the background color, the border radius, and all we need to do is just 132 10:35.840 --> 10:39.930 go into our code and add this class. 133 10:40.040 --> 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. 134 10:47.900 --> 10:53.660 And inside this div I'm just going to create a h1 that says Hello World, 135 10:53.660 --> 10:58.770 because remember that divs have no dimension themselves unless they have some content. 136 10:58.940 --> 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 137 11:07.220 --> 11:11.630 I can pop this out to show you what the web site would look like as it is. 138 11:11.840 --> 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 139 11:18.290 --> 11:23.870 to have a different font and different size from what you would normally see if you just had HTML, 140 11:24.290 --> 11:30.040 and all I need to do to get all of this was just to include the class jumbotron. 141 11:30.080 --> 11:35.930 Now if you have a look on Bootstrap and you go into the documentation and look through its components, 142 11:36.140 --> 11:43.190 you'll find that there is the jumbotron, and they tell you exactly how you can use this particular class 143 11:43.370 --> 11:51.550 to get something that looks like this or like this just by including some of their pre-specified classes. 144 11:51.560 --> 11:58.760 So if you wanted to recreate this design here, then you could just copy their code snippet and paste it 145 11:58.850 --> 12:00.050 into here. 146 12:00.100 --> 12:06.440 And because we've already got Bootstrap installed on this playground, then if we just hit run and we 147 12:06.440 --> 12:11.010 can pop this out, you can see that you've got this enabled on your web site. 148 12:11.150 --> 12:13.790 And there was literally zero effort. 149 12:13.790 --> 12:19.940 So if you liked this particular format then you could just go in here and change the text and change 150 12:19.940 --> 12:25.460 the background color, for example, and you would already have a pretty nicely styled web site. 151 12:25.460 --> 12:26.890 Now that's not all. 152 12:26.900 --> 12:32.870 If you go into Bootstrap and you go to Examples, you can see that they've created more extensive 153 12:32.870 --> 12:35.000 components using Bootstrap. 154 12:35.000 --> 12:41.690 For example, if you ever wanted the Apple web site designed, then you can simply look at their product 155 12:41.780 --> 12:49.020 example, and in fact if you go into that download that you had previously for bootstrap-4.0 and you go 156 12:49.020 --> 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 157 12:56.240 --> 12:58.820 you can see it's got all of the examples that they show here. 158 12:58.820 --> 13:05.060 For example Pricing, Checkout, Product, Album, and if you open up index.html, you can see that this 159 13:05.060 --> 13:10.970 is what the site looks like and you can view all of the code that was required to create this inside 160 13:11.000 --> 13:11.670 Atom. 161 13:11.810 --> 13:19.120 So this is the HTML that they wrote, and this is some custom CSS that modifies the bootstrap and customizes it 162 13:19.120 --> 13:20.120 it a little bit. 163 13:20.150 --> 13:22.770 So say if this is the web site that you wanted to make, 164 13:22.790 --> 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 165 13:30.460 --> 13:37.910 site by simply copying this product.css and index.html file, and then modifying the text. 166 13:37.910 --> 13:39.620 So for example this is the h1. 167 13:39.650 --> 13:43.440 You could just change it to whatever you want to call it for your web site, you know, 168 13:43.670 --> 13:49.980 Grapple. And now if you refresh, here’s your web site. So you modify a lot of these examples very easily. 169 13:50.060 --> 13:57.710 Or you can simply add these components by copying the code into your web site. But instead of just modifying 170 13:57.710 --> 14:02.680 these examples let's take it step by step so that we really understand what we're doing. 171 14:02.720 --> 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, 172 14:08.780 --> 14:14.120 but you'll be able to design any sort of layout or design that you want by fully understanding this 173 14:14.120 --> 14:14.980 framework. 174 14:14.990 --> 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 175 14:20.570 --> 14:25.670 web sites when we're not using something that's pre-loaded up like on Code Ply. 176 14:25.850 --> 14:31.720 So in the next lesson we'll be showing you all the different ways how you can install Bootstrap onto 177 14:31.730 --> 14:32.990 your own web site. 178 14:32.990 --> 14:36.000 So for all of that and more I'll see you on the next lesson.