WEBVTT 0 00:00.870 --> 00:06.270 Now, we're steadily getting closer to our final design for our front page header. 1 00:06.600 --> 00:12.840 But one of the things that you notice is that our download buttons still look extraordinarily out of 2 00:12.840 --> 00:13.510 place. 3 00:13.560 --> 00:18.680 They don't look like they've been styled at all, even though they are using Bootstrap. 4 00:18.720 --> 00:24.680 So, in this lesson, I want to talk about another Bootstrap component which is the Bootstrap button. 5 00:24.730 --> 00:28.700 Now, if you head over to the documentation for the Bootstrap buttons, 6 00:28.830 --> 00:34.650 so just go to Documentation, Components, Buttons, then you can see that there's a whole bunch of buttons 7 00:34.650 --> 00:36.080 that we can choose from, 8 00:36.330 --> 00:42.680 and they come with the Bootstrap palette, which allows you to simply use one of these classes, for example, 9 00:42.690 --> 00:50.150 btn-primary for a blue button and btn-warning for a yellow button, etc.. 10 00:50.400 --> 00:53.250 Now there's also other types of buttons. 11 00:53.280 --> 01:00.300 For example, you can have outline buttons, which become filled in as you hover over them, which looks pretty 12 01:00.300 --> 01:01.160 nice. 13 01:01.170 --> 01:08.050 Now, you can also have larger or smaller buttons, or buttons that take up the entire width of the parent. 14 01:08.070 --> 01:13.980 Now, because we've seen this before and we played around with this in a previous lesson, I want you, as 15 01:13.980 --> 01:23.310 a challenge, to add a dark and light button to style our download buttons here, and it should look somewhat 16 01:23.310 --> 01:26.210 like this as the final outcome. 17 01:26.220 --> 01:34.140 So these are large buttons, and the left one is dark and the right one is a outlined light button. 18 01:34.140 --> 01:40.600 So, pause the video and see if you can complete that challenge with the help of the Bootstrap documentation. 19 01:43.110 --> 01:45.350 All right. So how did that go? 20 01:45.630 --> 01:45.890 All right. 21 01:45.900 --> 01:51.050 So let's head into Atom and let's find the relevant section first. 22 01:51.210 --> 01:55.620 So here is our title section with our little comment here, 23 01:55.950 --> 01:59.850 and we've got our two download buttons. Now, 24 01:59.850 --> 02:03.220 they are button elements of type button, 25 02:03.300 --> 02:09.750 so all we need to do here in order to implement the Bootstrap styles is just to add a class. 26 02:09.810 --> 02:17.430 So, after the type, I'm going to add a class, and the first one to make it into a Bootstrap button is 27 02:17.610 --> 02:18.610 btn. 28 02:18.850 --> 02:21.970 And the next one specifies what type of button I want. 29 02:22.020 --> 02:27.500 So, the left one I wanted a dark button, and that's filled in already. 30 02:27.690 --> 02:31.290 So I will go for the button, button dark, 31 02:31.320 --> 02:33.610 so btn-dark. 32 02:33.720 --> 02:40.610 So let's hit save and let's check to see if we got what we wanted, which looks pretty close, 33 02:40.650 --> 02:41.240 right? 34 02:41.550 --> 02:46.860 And then the next one we wanted was a light outlined button for the one on the right. 35 02:46.860 --> 02:53.310 So let's scroll down to the outline buttons, and let's find that light one which is almost imperceptible, 36 02:53.310 --> 02:57.210 because the background is white, but we can see it when we hover over it. 37 02:57.420 --> 03:03.750 So this is the one that we're looking for, and this requires the class btn-outline-light, which is 38 03:03.750 --> 03:05.150 a little bit longer. 39 03:05.190 --> 03:12.420 So let’s head over here and again add another class, and this one is btn btn-outline-light, 40 03:12.810 --> 03:20.010 hit save and refresh, and we've now got our button styles down. 41 03:20.010 --> 03:24.730 Now, you notice that we specified that we wanted the larger buttons here. 42 03:24.930 --> 03:30.990 So let's head into Bootstrap again and look at the Sizes section of the button component, and you can 43 03:30.990 --> 03:36.990 see that, just by simply adding a class called btn-lg or btn-sm, we can change 44 03:36.990 --> 03:40.930 the size of our buttons without touching the CSS. 45 03:40.950 --> 03:48.820 So, let's go and add yet another class to our button, which is btn-lg or lg, 46 03:48.840 --> 03:54.500 both of them, let's hit save, head back and refresh. 47 03:54.580 --> 04:01.170 And now we've got some lovely Bootstrap buttons, making our web site look a lot nicer than before. 48 04:01.170 --> 04:06.240 Now one thing you might notice that I've got here in our final version of the web site that we don't yet 49 04:06.240 --> 04:14.010 have over here are these pretty little glyphs or icons on the left of our download buttons. 50 04:14.020 --> 04:18.010 Now these things come from a web site called Font 51 04:18.060 --> 04:18.760 Awesome. 52 04:19.080 --> 04:21.580 And it is really really awesome. 53 04:21.600 --> 04:29.610 And the reason is because they have over 900 icons which are free for commercial use and they have a 54 04:29.610 --> 04:37.080 really really generous license, which means that the icons are open source and completely free for use 55 04:37.110 --> 04:39.000 in any of your web sites. 56 04:39.030 --> 04:46.320 So head over here, and we're going to go over to the icon section in order to try and find our Apple and 57 04:46.320 --> 04:47.860 Google Play icon. 58 04:47.880 --> 04:53.790 So let's search for Apple, and the first one that comes up is the one that we want. 59 04:53.790 --> 04:56.760 You can see that this is the full vector that they've drawn. 60 04:57.060 --> 05:02.650 And you can see it in the various different sizes, or how it looks with different backgrounds, 61 05:02.790 --> 05:08.880 and they've even styled it and put it into, you know, some common usage scenarios, so that you can imagine 62 05:09.180 --> 05:10.360 what it might look like. 63 05:10.620 --> 05:17.480 So, in order to use it, all we need to do is just to copy this line, and you can see that, similar to Bootstrap, 64 05:17.560 --> 05:22.500 it’s implementing these glyphs by adding a couple of classes. 65 05:22.500 --> 05:29.580 So, firstly, you’ve got the Font Awesome button, fab, and then you’ve got fa-apple, which specifies 66 05:29.970 --> 05:35.160 exactly which glyph, or which icon, you're looking to insert. 67 05:35.190 --> 05:43.410 Now, before we can use this, however, similar to Bootstrap, we need to add Font Awesome to our web site. 68 05:43.530 --> 05:46.140 So let's head over to get started. 69 05:46.290 --> 05:49.510 And the first thing you see is Use Font 70 05:49.510 --> 05:51.630 Awesome Free CDN, 71 05:51.690 --> 05:54.940 so, similar to what we had with Bootstrap, Font 72 05:54.930 --> 05:59.480 Awesome has a CDN that distributes the resource, 73 05:59.550 --> 06:07.260 so the Font Awesome icons, and allows you to embed this into your web site, so that any users who don't 74 06:07.260 --> 06:13.020 have, who've never opened a web site that required Font Awesome, they'd be able to go here and download 75 06:13.020 --> 06:13.320 it. 76 06:13.440 --> 06:22.520 So let's go ahead and copy this and insert it into our web site, so just below where we've got our CSS. 77 06:22.560 --> 06:28.830 I'm going to paste this in. And this is probably a good time to start commenting on what some of these 78 06:28.830 --> 06:29.720 things are. 79 06:30.000 --> 06:36.270 And, as you find your code getting more lengthy and more complex, it's a good idea to start commenting 80 06:36.270 --> 06:41.070 on things, so that you remember later on when you come back what everything is all about. 81 06:41.280 --> 06:44.220 So, the first one we've it are Google Fonts. 82 06:44.440 --> 06:50.530 So, the way that I prefer to do it is just to type out plain text highlight it and then hit command or 83 06:50.560 --> 06:53.570 hold down control in Windows and hit forward slash, 84 06:53.770 --> 06:57.860 and that basically comments that particular line of text. 85 06:57.880 --> 07:04.000 So those are the Google fonts and these are the CSS stylesheets. 86 07:04.480 --> 07:07.280 And then we've got our Font 87 07:07.300 --> 07:08.330 Awesome. 88 07:08.560 --> 07:15.170 And finally we have our Bootstrap Scripts, put that in as well. 89 07:15.190 --> 07:21.670 So now, when we come back to this, we can see easily at a glance what we've got over here, and it's a good 90 07:21.670 --> 07:27.340 idea to sprinkle these around in your code so that it's really clear to yourself or anybody else who 91 07:27.340 --> 07:29.640 looks at your code what everything is all about. 92 07:29.680 --> 07:34.960 And also, as you're doing the tutorials, and, you know, you're learning about these different components, 93 07:34.990 --> 07:41.740 or how you use selectors in CSS, etc., all these new concepts, once you understood what they're all 94 07:41.740 --> 07:46.700 about, you can add a comment to remind yourself in case you come back to it at a later date. 95 07:47.050 --> 07:56.290 So let's save and let's go ahead and go back to that icon that we found, which was Apple, and let's copy 96 07:56.290 --> 08:03.310 this line of code, and we can now insert it wherever we want to use it, because we now have that CDN where 97 08:03.310 --> 08:06.910 we can download and derive any icons that we want to use. 98 08:06.910 --> 08:11.850 So let's go back to our download button, and, just in the text section, 99 08:11.860 --> 08:18.550 so between the button elements, I'm going to insert this icon, and then I'm going to insert a space 100 08:18.700 --> 08:19.780 in between. 101 08:19.780 --> 08:22.410 Now, you'll notice that, by default, Font 102 08:22.420 --> 08:24.720 Awesome likes to use the i tag. 103 08:24.820 --> 08:34.240 So this is the italic tag, which is not that great in terms of HTML best practice, but the reason that 104 08:34.240 --> 08:40.530 they can use it is because glyphs and icons are not italicized, so it doesn't become slanted. 105 08:40.690 --> 08:47.590 And they say that they use it just because the i tag is pretty much the shortest tag that can be used 106 08:47.650 --> 08:48.810 for this purpose. 107 08:48.850 --> 08:56.500 So you can use what they recommend, which is the i tag, or if you prefer to have a more semantically understandable 108 08:56.800 --> 09:00.420 HTML code, then you can change that into a span as well. 109 09:00.460 --> 09:06.450 And you'll see either the i or the span when people are using Font Awesome out in the wild. 110 09:06.490 --> 09:11.800 So I'm just going to leave it as it is, because it is short and it is quite easy to spot. 111 09:11.980 --> 09:14.930 Now let's hit save and see what this looks like. 112 09:15.160 --> 09:19.810 So let's hit refresh and you can see we've now got a little Apple icon, a space, 113 09:19.960 --> 09:22.310 and then our download text. 114 09:22.330 --> 09:29.800 So, as a challenge, I want you to go into Font Awesome and find the Google Play icon, and implement that 115 09:29.830 --> 09:33.860 in your code so that you have the second button that looks a bit like this. 116 09:33.970 --> 09:37.160 So pause the video and complete the challenge. 117 09:39.160 --> 09:39.530 All right. 118 09:39.540 --> 09:41.300 So that shouldn’t be very hard. 119 09:41.300 --> 09:46.450 We just had to go back to the Font Awesome page and search for Google Play. 120 09:46.880 --> 09:53.240 And now we've got our icons showing up, and this is exactly what we want, and we can just copy this line 121 09:53.240 --> 10:00.620 of code and paste it where we pasted our last icon, which is just before the download button. 122 10:00.620 --> 10:02.430 And then we hit space. 123 10:02.450 --> 10:08.060 Now make sure that you're not pasting it into the actual button element, because it's actually a separate 124 10:08.060 --> 10:11.940 piece of text that belongs between the element tags. 125 10:12.140 --> 10:15.990 So now let's hit save and let's go back and refresh. 126 10:16.160 --> 10:20.370 We've now got an Apple download icon and a Google Play download icon. 127 10:20.570 --> 10:23.970 So it's looking pretty good so far. 128 10:24.030 --> 10:31.130 Now, in the next lesson, I want to finish styling up the title section of our web site, so that it looks 129 10:31.220 --> 10:33.020 more like this. 130 10:33.020 --> 10:34.910 Now if you want to give it a go 131 10:34.910 --> 10:36.330 before we start. 132 10:36.530 --> 10:40.920 Now if you want to give it a go before I start walking you through the step by step, 133 10:41.000 --> 10:48.950 then you can just simply pause this video right now and look at the design that I've got onscreen, and 134 10:48.950 --> 10:52.660 try to use a combination of documentation, 135 10:52.790 --> 10:59.060 so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search 136 10:59.060 --> 11:05.070 for something on Stack Overflow, especially how you might get this image to rotate. 137 11:05.180 --> 11:09.040 So there's quite a bit of styling involved and this is completely optional. 138 11:09.140 --> 11:14.600 But I do recommend giving it a go yourself before watching me go through the solution, just so that you 139 11:14.600 --> 11:19.150 start thinking and challenging yourself on how you might do this yourself. 140 11:19.160 --> 11:25.400 So, pause the video now, and make a copy of your project as it is now to mess around with and try to complete 141 11:25.400 --> 11:26.250 this challenge. 142 11:26.270 --> 11:28.860 Otherwise I will see you on the next lesson.