WEBVTT 0 00:00.390 --> 00:00.690 All right. 1 00:00.690 --> 00:03.630 So how did you manage on that mini challenge? 2 00:03.630 --> 00:09.400 Well, if you haven't given it a go, then this is a good time to pause the video and just give it a try 3 00:09.480 --> 00:15.970 before I go through the solution with you. It’s really really important that you try and do this yourself, 4 00:16.020 --> 00:19.530 because I can't be here with you every single time you try to make a web site, 5 00:19.590 --> 00:23.690 so it's really really important that you pick up on these skills by yourself. 6 00:23.820 --> 00:29.660 And remember, I'm watching you, but not in a creepy way, just like, I haven't hacked your web cam or anything, 7 00:29.670 --> 00:33.890 I'm just, you know, saying like metaphorically, you know. 8 00:34.170 --> 00:35.670 Anyways, moving on. 9 00:35.940 --> 00:42.810 So, I presume that you've already given it a go and you've struggled, and maybe you failed, maybe you succeeded. 10 00:42.870 --> 00:45.600 So we're going to run through the solution now. 11 00:45.600 --> 00:48.870 So essentially what we're trying to achieve is this outcome. 12 00:48.870 --> 00:55.650 We've got three features which each have a Font Awesome icon above them, and they are responsive, 13 00:55.650 --> 01:02.340 so when we're in the iPad and the iPhone sizes, there's only one feature per row and they take up 100 14 01:02.340 --> 01:03.590 percent of the width. 15 01:03.630 --> 01:07.900 Plus there's also the fonts and the colors, 16 01:07.950 --> 01:11.840 and also when you roll over these icons they change color. 17 01:11.970 --> 01:15.280 So, we've learned how to do all of this before, 18 01:15.340 --> 01:19.940 and it's a matter of remembering it, giving it a go, and searching Google 19 01:19.950 --> 01:21.300 if we get stuck. 20 01:21.660 --> 01:23.780 So let's get started. 21 01:24.000 --> 01:27.740 So I'm going to keep the final piece over here just to compare, 22 01:27.960 --> 01:35.150 but the site as we have it up to now looks much less interesting and a bit more like this. 23 01:35.160 --> 01:41.490 So, the first thing I'm going to do is, I want to give each of these features their own div, because as 24 01:41.490 --> 01:48.660 you can see, at the moment, if we scroll down to the right section, I've got these three sets of features 25 01:48.750 --> 01:54.230 and they each have an h3 title, and a paragraph just explaining the feature. 26 01:54.330 --> 01:59.700 And, in order to get the responsiveness and to style each feature individually, I'm going to need to 27 01:59.700 --> 02:08.020 give them some form of identification, and that, in HTML and CSS, is going to end up being a div. 28 02:08.300 --> 02:14.880 So I'm going to create three new divs, and I'm going to give each div a custom class name. 29 02:14.880 --> 02:19.470 So I'm going to call them feature-box, which seems to make sense to me. 30 02:19.560 --> 02:23.220 It doesn’t really matter what you call them, as long as they are the same, 31 02:23.220 --> 02:26.470 because we're going to apply the same style to each feature-box. 32 02:26.520 --> 02:30.190 So let's create another div, feature-box. 33 02:30.480 --> 02:40.980 And I'm just going to copy this and paste it and we can now transplant these lines over to here. 34 02:41.010 --> 02:41.290 All right. 35 02:41.290 --> 02:41.640 Great. 36 02:41.700 --> 02:48.780 So now we have our feature boxes and each set of features belongs in its own div which we can style 37 02:48.780 --> 02:52.910 separately or apply the same style to each three. 38 02:52.920 --> 02:59.910 So now the next thing I'm going to do is I'm going to make each div take up a third of the width of 39 02:59.910 --> 03:05.640 the screen on a large desktop or a laptop sized screen, 40 03:05.730 --> 03:12.090 but when it's on an iPad or when it's on an iPhone, I want it to take up 100 percent of the width. So 41 03:12.120 --> 03:15.910 I can do that by applying some Bootstrap classes. 42 03:15.990 --> 03:22.860 So, we remember that we have to use the column class, and then we specify the size that we want it to be 43 03:22.860 --> 03:24.400 responsive to. 44 03:24.570 --> 03:27.340 So we're going to say column large, 45 03:27.360 --> 03:34.500 so that means laptop size and above, is going to take up a third of the row. 46 03:34.500 --> 03:37.690 And remember each row is split up into 12 units. 47 03:37.740 --> 03:41.340 So a third of 12 is 4 units. 48 03:41.340 --> 03:43.470 So col-lg-4. 49 03:43.740 --> 03:50.370 And let's just go ahead and paste this in the other three places. And if you load up your web site right 50 03:50.400 --> 03:57.840 now, you'll see that nothing has changed, and that is because the Bootstrap grid requires that you nest it 51 03:57.960 --> 04:02.220 inside a class that has the name row. 52 04:02.370 --> 04:10.110 So we can specify which ones should go into the same row essentially, so that your responsiveness can 53 04:10.110 --> 04:11.610 happen across different rows, 54 04:11.610 --> 04:18.540 for example. So something like col-lg-4 in three separate rows will be very different from 55 04:18.570 --> 04:20.050 all of them in the same row. 56 04:20.070 --> 04:24.130 So let's hit save and let's check it out and see if it worked. 57 04:24.240 --> 04:24.770 Ok cool. 58 04:24.780 --> 04:32.120 So they are now laid across the same row and they're taking up a third of the screen each. 59 04:32.160 --> 04:41.010 And if I go into iPad size, you can see they're now taking up 100 percent of the width, as does anything 60 04:41.010 --> 04:45.860 smaller than that, so mobile size still taking up 100 percent of the width. 61 04:46.230 --> 04:53.700 So we have succeeded. Kerching! I was planning on getting our sound designer to create these nice sounds 62 04:53.820 --> 04:55.860 for the video but he is sick, 63 04:55.980 --> 04:59.670 so you will just have to live with my terrible sound effects. 64 05:00.300 --> 05:05.800 So it's like Angela SFX from now on. 65 05:06.630 --> 05:13.290 I've recently been trying to challenge my friends on what is the most realistic lightsaber activation 66 05:13.290 --> 05:19.910 sound you can produce without any instruments other than yourself, your own body. 67 05:19.950 --> 05:26.530 And I have found that many people are very bad at sound effects, myself included. 68 05:26.550 --> 05:27.890 Anyways, let's move on. 69 05:27.960 --> 05:29.580 I think I've had too much coffee today. 70 05:29.580 --> 05:30.840 I really apologize. 71 05:30.840 --> 05:31.040 All right. 72 05:31.050 --> 05:32.800 Let's get back to work. 73 05:32.820 --> 05:37.710 The next thing I need to do is that you can see that at the moment our features are right up to the 74 05:37.710 --> 05:44.340 edge of both edges and they're taking up a bit too much space. In order to get it looking a bit more 75 05:44.340 --> 05:45.270 like this, 76 05:45.270 --> 05:47.520 we need to add some padding. 77 05:47.610 --> 05:52.530 So the first bit of padding I'm going to add is to this feature section. 78 05:52.530 --> 05:55.130 So that's this big box here. 79 05:55.170 --> 05:58.110 And you can see the three parts highlighted. 80 05:58.500 --> 06:03.010 So we can go into our CSS and we can select the Features section. 81 06:03.150 --> 06:13.890 So we are now down to title-image and let's add Features Section, and let's just comment that out so 82 06:13.890 --> 06:16.530 we can now target our features. 83 06:16.860 --> 06:18.750 And remember it's an id, 84 06:18.780 --> 06:23.100 so we have to use the hashtag or the pound sign. 85 06:23.280 --> 06:29.820 And I'm going to add a padding around all four sides and it's going to be 7 percent top and bottom and 86 06:29.820 --> 06:31.550 15 percent left and right. 87 06:31.710 --> 06:39.200 So basically almost double the amount of space on the left and right as there is on the top and bottom. 88 06:39.210 --> 06:44.530 So now let's hit refresh and you can see this is looking pretty nice, right? 89 06:44.760 --> 06:51.870 So each of our feature boxes are now centered in the middle of our feature div and you can see that 90 06:51.870 --> 06:57.780 with that little bit more white space it's much easier to read, a lot more organized, and it's getting 91 06:57.780 --> 07:01.310 close to what we want as our final outcome. 92 07:01.320 --> 07:06.680 So the amount of padding that you might have added might differ from mine but as long as you got a similar 93 07:06.690 --> 07:09.840 end outcome then that's absolutely fine. 94 07:09.840 --> 07:13.600 There's many many ways of skinning a cat. 95 07:13.770 --> 07:15.510 It's probably not very vegan friendly. 96 07:15.510 --> 07:17.130 There's many ways to peel a carrot. 97 07:17.160 --> 07:20.010 Maybe let me think on that. 98 07:20.170 --> 07:22.630 Boy this video is going to need a lot of editing. 99 07:22.920 --> 07:27.720 All right. So the next thing we're going to do is, you can see that over here our text is nicely centered 100 07:27.780 --> 07:31.550 inside each feature box, making them feel quite together, 101 07:31.560 --> 07:36.840 but here they look a bit weird, especially when you're using icons like this, 102 07:36.840 --> 07:42.430 you tend to want to have your text centered around the middle of the icon, 103 07:42.450 --> 07:46.350 otherwise, if it's all left aligned, it looks a little bit strange. 104 07:46.890 --> 07:49.770 So let's go ahead and do that. 105 07:49.770 --> 07:56.550 So, remember that previously we added this feature-box class which goes around each and every feature. 106 07:56.760 --> 08:05.070 So now we can target that feature-box class, and we can say something like all the text inside each feature 107 08:05.070 --> 08:08.850 box should be aligned to the center. 108 08:09.060 --> 08:09.960 So let's check it out. 109 08:10.020 --> 08:11.810 Yep looking pretty good. 110 08:11.880 --> 08:18.840 Now each line is still a little bit too long so we can add a bit of padding inside each feature box 111 08:18.990 --> 08:23.730 so that we push it closer together so that the width goes down a little bit and we put all the text 112 08:23.730 --> 08:29.330 onto two lines but it's very easy to glance and read rather than having these long lines. 113 08:29.370 --> 08:34.630 So I'm going to go ahead and add maybe around 5 percent of padding. 114 08:34.800 --> 08:40.230 And now our text is looking a lot shorter and a lot easier to read. 115 08:40.590 --> 08:47.700 Now the next thing we're going to do is we're going to change the fonts of these h3s that we've 116 08:47.700 --> 08:48.910 got over here. 117 08:49.080 --> 08:55.830 So you can see that each of the titles for the features are these h3s, which we can target quite easily 118 08:55.830 --> 09:05.470 up here, so we can say, let’s change the font-family to, 119 09:05.570 --> 09:08.540 I think we can change it to Montserrat-Bold, 120 09:08.700 --> 09:15.090 and this is to establish the visual hierarchy, so that when a user looks at this web site, the first thing 121 09:15.130 --> 09:19.730 the eye is drawn to is usually the blackest, the boldest, the biggest thing, 122 09:19.740 --> 09:24.570 and we want that to be the title first and then the subheading. As a web designer, 123 09:24.570 --> 09:29.920 very often it's kind of like you're a visual tour guide, and you're guiding people through your web site, 124 09:29.940 --> 09:36.810 so you want them to read, for example, the big title first, then maybe your brand, then maybe what all these 125 09:36.870 --> 09:43.340 buttons are about, and you can do that quite easily using the font weights and also the font size. 126 09:43.350 --> 09:48.150 So this is something that you can be aware of the next time you come across a well-designed web site, 127 09:48.420 --> 09:52.680 see how they're establishing visual hierarchy and guiding you through the web site. 128 09:52.780 --> 09:55.270 So I've already made the title very attractive 129 09:55.270 --> 10:04.200 to the eye. I’m going to tone down the subtitle, the feature text, by changing its color to a grey color, so 130 10:04.200 --> 10:07.210 that we make it even lower on the visual hierarchy scale. 131 10:07.350 --> 10:10.880 So the feature text is contained inside some paragraph elements. 132 10:11.010 --> 10:17.010 So I'm going to go ahead and select the paragraph elements and I'm going to change the color to this 133 10:17.130 --> 10:26.250 greyish color which is 8f8f8f. Let's hit save and refresh, and you can see now the visual hierarchy 134 10:26.250 --> 10:27.820 is now unmistakable. 135 10:27.870 --> 10:33.110 There is no way that somebody’s eye is going to be drawn to this line before it is drawn to this one. 136 10:33.120 --> 10:33.360 All right. 137 10:33.360 --> 10:35.520 So that's looking pretty good. 138 10:35.580 --> 10:39.260 Now the next thing is that we need to add some icons, 139 10:39.270 --> 10:40.120 right? 140 10:40.170 --> 10:43.890 And as I told you we're going to get that from Font Awesome. 141 10:43.890 --> 10:47.370 So let's head over and let's search for those images. 142 10:47.550 --> 10:58.840 So I've got the heart one and the target and also the checkmark which is in a circle. 143 10:59.070 --> 11:04.160 So we've got these three icons and we're just going to copy them in there. 144 11:04.170 --> 11:07.300 So it was check, target, heart. 145 11:07.320 --> 11:10.870 So let's just rearrange this a little bit. 146 11:10.980 --> 11:13.220 So the first one is the check circle. 147 11:13.220 --> 11:21.420 So I'm going to copy that and place it inside our HTML inside our feature-box div, so that everything 148 11:21.450 --> 11:25.850 inside each feature is all grouped together. So that one was circle, 149 11:25.860 --> 11:28.600 the next one was bullseye. 150 11:28.750 --> 11:30.260 So that's going to go here. 151 11:30.270 --> 11:34.500 And the last one was the heart, which is going to go here. 152 11:34.590 --> 11:35.340 All right. 153 11:35.340 --> 11:40.100 So now you'll see that we have our tiny icons here. 154 11:40.290 --> 11:43.290 But that's a little bit too small to see, 155 11:43.290 --> 11:45.350 and we need to make it a little bit larger. 156 11:45.360 --> 11:50.930 So, rather helpfully, the Font Awesome icons all come in different sizes. 157 11:51.240 --> 11:56.640 And in order to get a different size, for example, the 3x size, all you have to do is just add the class 158 11:56.740 --> 12:00.600 3x or 5x or 7x into your Font 159 12:00.600 --> 12:01.830 Awesome icon. 160 12:01.860 --> 12:07.080 So in our case I'm going to go for maybe the 4x. So we can go ahead and add, 161 12:07.140 --> 12:08.380 so this is our Font 162 12:08.400 --> 12:09.870 Awesome symbol, Font 163 12:09.990 --> 12:14.340 Awesome check circle and Font Awesome 4x. 164 12:14.340 --> 12:23.100 Now if you refresh you can see that is now a much larger size and it's a lot easier to see and actually 165 12:23.100 --> 12:27.240 looks like a feature icon rather than just something very small. 166 12:27.240 --> 12:32.600 So let's go ahead and add that to all three other classes. 167 12:35.280 --> 12:36.340 Hit save. 168 12:36.370 --> 12:40.980 And now we have our icons sized and looking pretty good. 169 12:40.990 --> 12:43.260 All right. So now we need to style these icons. 170 12:43.270 --> 12:44.860 We need to give them a color. 171 12:44.860 --> 12:51.280 So, in order to style the icon separately from the title and the feature text, then of course we need to 172 12:51.280 --> 12:53.610 give it a custom class. 173 12:53.620 --> 12:58.210 Now of course you can use any of the classes that has already been applied to it. 174 12:58.210 --> 13:06.100 But, for example, if you pick this class, fa-check-circle, then you'll have to add more styles to these other 175 13:06.100 --> 13:06.820 two. 176 13:06.820 --> 13:12.840 Now, if you pick something that's common between all three, say fas, that means if you use any Font 177 13:12.870 --> 13:17.540 Awesome symbol, then you're going to be applying the same style to that future icon as well. 178 13:17.650 --> 13:22.450 So it’s always always a good idea to apply custom classes when you're trying to style it 179 13:22.460 --> 13:29.300 inside the CSS, unless you're just trying to customize some feature of Font Awesome or Bootstrap. 180 13:29.320 --> 13:36.540 So in this case I'm just going to give it a class of icon and I'm going to paste it in all three places 181 13:36.760 --> 13:48.750 and that allows us to now go into our CSS and style our icon. So our icon is going to be colored in this 182 13:48.810 --> 13:51.090 orangey color, and when we hover over it, 183 13:51.090 --> 13:53.860 it’s going to be the same color as this background. 184 13:53.970 --> 13:57.680 So I've already provided those hex values to you. 185 13:57.870 --> 14:07.340 So the normal color is going to be ef8172. Let’s hit save. 186 14:07.380 --> 14:08.870 And check it out. 187 14:09.000 --> 14:10.250 Looking nice. 188 14:10.260 --> 14:10.990 Right? 189 14:11.100 --> 14:16.710 So it’d be nice if there was a little bit of space between this icon and this title, because at the moment 190 14:16.740 --> 14:21.480 they're a bit too squished together. It’s kind of sitting right on top of that feature and it doesn't 191 14:21.480 --> 14:24.200 look very good, a bit too mushed together. 192 14:24.330 --> 14:36.480 So let's add a margin-bottom to the icon of, maybe, say, just 1rem, and you can see with just that little 193 14:36.480 --> 14:39.500 bit of space it looks a lot nicer. 194 14:39.510 --> 14:43.600 Very often small touches can produce really dramatic effects. 195 14:43.650 --> 14:49.320 So the final final thing that we want to do for our challenge is make it change color when we hover 196 14:49.320 --> 14:55.680 over the icons. And the color is going to be this same red color in our color palette. 197 14:55.950 --> 14:59.200 So do your remember how to change hover states? 198 14:59.310 --> 15:03.080 Well we have to use a pseudo class called hover. 199 15:03.120 --> 15:10.890 So we select the icon, we use a colon and we select one of these pseudo states. And the one that we want 200 15:11.430 --> 15:17.580 is called, I’m never going to get to it, I’m just going to type it in, it’s called hover. 201 15:18.450 --> 15:25.260 And we've seen this previously when we looked at classes and pseudo classes and selectors in CSS, 202 15:25.290 --> 15:28.430 but we're going to put it into action in this case. 203 15:28.620 --> 15:38.040 And when our icon is inside the hover state, I'm going to change the color to ff4c68, which is 204 15:38.040 --> 15:41.180 that pinkish color that we've got at the top. 205 15:41.280 --> 15:48.550 So now, dun dun dun, it's changing color every time we hover over it. 206 15:48.690 --> 15:51.460 And that wasn't even very hard, was it? 207 15:51.460 --> 15:53.380 All right. Looking nice. 208 15:53.430 --> 15:56.820 So how did you get on with this challenge? 209 15:56.940 --> 16:00.990 If there was something that you couldn't implement or something you just found out about then don't 210 16:00.990 --> 16:02.440 worry, go back, change 211 16:02.460 --> 16:08.880 your CSS code, change your HTML code, in order to make it work. If you got it all right and it's all looking 212 16:08.880 --> 16:09.410 pretty good, 213 16:09.450 --> 16:14.170 other than maybe you got slightly different values for the margin or the padding, that doesn't matter, 214 16:14.190 --> 16:15.910 you're guessing by eye, right, 215 16:15.990 --> 16:21.810 so that's not a big deal. But it's all about knowing how to use those Bootstrap classes in order to make 216 16:21.810 --> 16:28.770 our features responsive and also things like, you know, the hover states that we learned before, and knowing 217 16:28.770 --> 16:32.870 how to change the font weight, what to select to change the font color, etc., 218 16:32.910 --> 16:34.310 all of that good stuff. 219 16:34.530 --> 16:34.820 All right. 220 16:34.830 --> 16:42.420 So, in the next lesson, we're going to be looking at another Bootstrap component, which is the carousel. 221 16:42.810 --> 16:48.900 And this is like a slide show that we're going to implement so that we end up with a really really cool 222 16:48.900 --> 16:55.780 testimonial section which allows us to go between all of the different testimonials. 223 16:55.890 --> 16:58.550 So you have all of that to look forward to and more. 224 16:58.770 --> 17:00.900 So I will see you on the next lesson.