WEBVTT 0 00:00.550 --> 00:06.030 Now, before we continue, we should really save all of this good work that we've done here in our Code 1 00:06.030 --> 00:06.800 Ply. 2 00:06.910 --> 00:13.180 We've set up our navigation bar so that when it's on smaller screens, like the phone or the iPad, the 3 00:13.180 --> 00:18.860 links disappear into a button which can toggle our collapsable menu. 4 00:18.970 --> 00:23.430 So we don't want to lose all of this good work that we've done. Now in the previous lesson, 5 00:23.470 --> 00:31.050 you should have downloaded a file called Bootstrap, inside which we have this folder called TinDog Start Here. 6 00:31.090 --> 00:36.850 And this is a skeleton project that I've created for you so that you don't have to go through the 7 00:36.850 --> 00:45.730 tedious process of finding your own images, or creating the blank styles.css, or putting in the HTML 8 00:45.730 --> 00:46.560 skeleton. 9 00:46.600 --> 00:53.140 Now it's a good idea to have this file inside your development folder, wherever that may be, and once 10 00:53.140 --> 00:58.050 you've got it saved in there, then I want you to right click on index.html, and 11 00:58.150 --> 01:00.590 I want you to open it inside Atom. 12 01:00.640 --> 01:06.730 Now, once you've got this file open, it's a good idea to just take a quick look through it to see what 13 01:06.730 --> 01:08.200 we've placed in here. 14 01:08.470 --> 01:11.580 And essentially you've got the html boilerplate, 15 01:11.590 --> 01:19.720 so with the character set, the title, the link to the stylesheet, which is in the CSS folder in the same 16 01:19.720 --> 01:26.320 TinDog Start Here project folder, and then in the body we've got a number of sections that will eventually become 17 01:26.320 --> 01:28.340 the sections in our one page web site. 18 01:28.570 --> 01:34.030 And I've commented out areas where we're going to be interacting with, for example, where we're going 19 01:34.030 --> 01:35.980 to place the navbar. 20 01:36.010 --> 01:43.120 Now I want you to go into your Code Ply and to select all of this code that we created earlier on in order 21 01:43.120 --> 01:46.420 to have this navbar using Bootstrap. 22 01:46.420 --> 01:51.640 And I want you to paste it just below this comment where it says this is the nav bar section, 23 01:51.640 --> 01:54.040 so just in here. 24 01:54.160 --> 02:00.760 Now if you've lost your Code Ply area, or for some reason you can't find the code that you created here, 25 02:01.180 --> 02:07.210 then I will provide a link to the Code Ply that I created that we followed along, so that you can open 26 02:07.210 --> 02:14.770 it up in your browser and just simply copy this code into your new project file. 27 02:14.800 --> 02:22.000 Now, if you keep scrolling, you'll see that there's many sections, and all I've done is to create the skeleton 28 02:22.080 --> 02:23.140 HTML. 29 02:23.290 --> 02:29.670 So some of the content for our web site, for example some text, some buttons where buttons should be, 30 02:29.670 --> 02:31.640 I've incorporated some images, 31 02:31.810 --> 02:40.000 and our job in this module is to style this web site using Bootstrap so that it begins looking like 32 02:40.060 --> 02:41.680 the way that we want it to. 33 02:42.070 --> 02:48.190 And, because we've studied our HTML in the previous modules, I don't want us to have to spend a 34 02:48.190 --> 02:51.840 lot of time creating these h1s or h2s or h3s. 35 02:51.850 --> 02:58.730 I'm confident that, by getting to this point, you already know how to create images or how to create h2s. 36 02:58.810 --> 03:05.670 And we're going to save you a lot of typing by using skeleton projects from now on. 37 03:05.700 --> 03:14.740 Now, if you don't want to use this and you prefer to create your own from scratch, then you can always 38 03:14.830 --> 03:17.400 open up the index.html 39 03:17.620 --> 03:22.580 inside your browser and you can look at what we've added here, 40 03:22.720 --> 03:27.600 all of the text and images, and you can create the HTML yourself. 41 03:27.850 --> 03:33.730 But I strongly recommend you to use the skeleton project because that will allow us to focus on one 42 03:33.730 --> 03:37.500 new thing every module, and it would markedly accelerate your speed of learning. 43 03:37.510 --> 03:45.300 So now that we've added our navigation bar into our code, now the next step is for you to add Bootstrap 44 03:45.400 --> 03:51.850 into our project, because as you can see right now, even though we have that nav bar, here it's not really 45 03:52.090 --> 03:53.250 doing anything, right? 46 03:53.260 --> 04:01.900 This is just plain old HTML. And it's because our CSS file that we've linked to is completely devoid 47 04:01.900 --> 04:02.960 of any code. 48 04:02.980 --> 04:10.200 I've only just included a blank file and named it and linked it up, but it doesn't do any styling yet. 49 04:10.210 --> 04:15.380 Now I want you, as a challenge, to add Bootstrap into your project. 50 04:15.460 --> 04:18.080 So pause the video now and give that a go. 51 04:20.500 --> 04:22.330 Now how did that go? 52 04:22.480 --> 04:26.820 Let's go through it step by step and see if we can make it work. 53 04:26.890 --> 04:32.770 So we'll head to the Bootstrap documentation and we'll go to Get started. 54 04:33.130 --> 04:38.890 And you can see that there's Quick start, right, where we can just simply copy and paste the stylesheet 55 04:38.950 --> 04:46.980 link into our web site. So we can put that just above our own stylesheet and hit save. 56 04:47.210 --> 04:54.010 And let's refresh our page and you can see that we've now got all of our wonderful Bootstrap styling, 57 04:54.010 --> 05:00.370 our h1s have been styled into a Sans-serif font, our nav bar is looking exactly the way that we saw 58 05:00.370 --> 05:02.180 it over here, 59 05:02.740 --> 05:10.480 and, when we shrink it down, it becomes a button instead of all of these links. Our download buttons look 60 05:10.480 --> 05:14.710 different, and everything is now styled using Bootstrap. 61 05:14.710 --> 05:19.800 Now, there's a lot more work to be done, but that's for the lessons yet to come. 62 05:19.810 --> 05:25.750 Now for the keen eyed amongst you, you might have noticed that something is still not quite right with 63 05:25.750 --> 05:28.970 our project, even though we've enabled Bootstrap. 64 05:29.170 --> 05:38.140 And the problem manifests itself when you go down to a tablet or a mobile sized screen. 65 05:38.140 --> 05:45.790 Now we do have this button that appears, but, if you click on it, you'll notice that absolutely nothing 66 05:45.790 --> 05:47.020 happens. 67 05:47.020 --> 05:53.840 Now, if we go back to our Code Ply, you'll see that we have the same code for our navigation bar, 68 05:54.130 --> 05:58.380 but here, if I toggle this, it works perfectly. 69 05:58.630 --> 06:01.350 So why is that? 70 06:01.660 --> 06:09.820 Well, the reason is because, in order for the Bootstrap collapsable menu to work, you actually need some 71 06:09.880 --> 06:12.150 Javascript and jQuery. 72 06:12.550 --> 06:16.420 And, in our case, we actually don't have any of that, 73 06:16.510 --> 06:20.650 and we only have our CSS file from Bootstrap. 74 06:20.650 --> 06:28.240 So, what you can do to make it work is to scroll down on the Bootstrap page, and we can copy these three 75 06:28.240 --> 06:30.100 lines of Javascript 76 06:30.250 --> 06:34.020 and also jQuery to add to our project. 77 06:34.030 --> 06:38.890 So let's go ahead and add that just below our CSS file. 78 06:39.010 --> 06:44.740 Now, in the coming lessons, when we talk about Javascript and jQuery, we’ll dig into these script 79 06:44.770 --> 06:50.450 tags and the optimal ways of adding Javascript to our web site in a little bit more detail. 80 06:50.470 --> 06:56.140 But for now, we're just going to leave our script tags here, and if we hit save and go back to our web 81 06:56.140 --> 07:02.200 site and refresh it, you'll see that now our collapsable menu works. 82 07:02.290 --> 07:08.710 And if you remember, the reason is because Javascript is responsible for any behavior, or anything that 83 07:08.710 --> 07:10.670 your web site can do, 84 07:10.930 --> 07:16.360 and the CSS is only for the style, or the appearance, of the web site. 85 07:16.390 --> 07:23.530 So this is why we need those few extra lines of code in order to make our web site do something, even 86 07:23.530 --> 07:25.340 though it's very simple. 87 07:25.450 --> 07:31.690 Now, in the next lesson, we're going to learn more about the Bootstrap grid system, and we're going to 88 07:31.690 --> 07:38.240 start styling up our web site using some of these Bootstrap components and layout tools. 89 07:38.260 --> 07:41.350 So for all of that and more, I’ll see you on the next lesson.