WEBVTT 0 00:00.380 --> 00:01.550 All right, so here we are, 1 00:01.580 --> 00:03.920 with a blank Visual Studio Code open. 2 00:03.920 --> 00:06.320 I've just created a folder called test, and nothing's in here. 3 00:06.350 --> 00:09.410 Okay, so let's start by just creating our HTML. 4 00:09.440 --> 00:11.330 This is very, very easy. 5 00:11.330 --> 00:13.280 This is the easiest starting point. 6 00:13.670 --> 00:15.260 Okay, so what do we want to do? 7 00:15.290 --> 00:20.000 Well, yes, we want an HTML template. Within our HTML 8 00:20.000 --> 00:21.590 we want a <head> section. 9 00:21.830 --> 00:22.730 Head section. 10 00:22.730 --> 00:27.100 And within here, let's just link to our CSS file, 11 00:27.110 --> 00:27.770 right? 12 00:28.160 --> 00:32.360 Uh, yeah, let's call it styles.css. 13 00:32.540 --> 00:33.940 We haven't created it yet. 14 00:34.400 --> 00:35.660 styles.css. 15 00:35.690 --> 00:36.360 There you go. 16 00:36.380 --> 00:39.860 We can just leave it empty for now, but we know it's there. 17 00:39.890 --> 00:46.400 Then I want to set up our body. And within our body, I want us to separate the default checkboxes to 18 00:46.400 --> 00:47.880 the custom checkboxes. 19 00:47.900 --> 00:53.240 So firstly, default checkbox styling 20 00:54.210 --> 00:56.370 applied by the browser. 21 00:56.640 --> 00:57.570 This is not us. 22 00:57.600 --> 00:58.440 How do we do that? 23 00:58.440 --> 01:04.560 Well, let's just wrap it in h1 tags, and we can call this default checkboxes. Pretty straightforward. 24 01:04.590 --> 01:05.560 There's our h1. 25 01:05.580 --> 01:08.480 Now we can actually set up our checkboxes themselves. 26 01:08.490 --> 01:11.490 I want to wrap the labels inline - it's just quicker, 27 01:11.670 --> 01:13.200 we don't need a "for" attribute. 28 01:13.200 --> 01:16.320 I do want to apply a class of default. 29 01:19.160 --> 01:22.160 And I'm doing this so we can later style these. 30 01:22.740 --> 01:25.250 Um, this can be our options, right? 31 01:25.250 --> 01:26.720 So this can be option number one. 32 01:27.350 --> 01:30.920 And of course we need an input of type checkbox. 33 01:31.770 --> 01:35.970 We don't need a name or ID because we are applying default styling. 34 01:35.970 --> 01:37.920 So let's just have a look at this with Live Server. 35 01:38.520 --> 01:39.660 Live Server. 36 01:41.430 --> 01:42.160 There we go. 37 01:42.180 --> 01:43.170 Default checkboxes. 38 01:43.170 --> 01:43.800 And there's the one. 39 01:43.800 --> 01:45.600 You can toggle it off and on. 40 01:45.600 --> 01:46.680 But remember what I said? 41 01:46.680 --> 01:49.620 I wanted the first one to be checked by default. 42 01:49.650 --> 01:50.880 How do we do that? 43 01:51.210 --> 01:52.170 I gave you a clue. 44 01:52.170 --> 01:54.540 I said that there's an attribute. 45 01:55.910 --> 01:56.570 That's right, 46 01:56.570 --> 01:58.910 it's called the "checked" attribute. 47 01:59.110 --> 02:03.980 So if we do this, go back to the browser refresh, we can see it's checked. 48 02:03.980 --> 02:07.880 And this checked attribute, by the way, is a boolean attribute. 49 02:07.880 --> 02:09.710 It's either there or it's not. 50 02:09.710 --> 02:11.510 So we could do this. 51 02:12.700 --> 02:15.460 It does the same thing, but we don't have to. 52 02:15.460 --> 02:21.040 And I'm always a fan of writing less if we can get away with it. And here we can. 53 02:21.040 --> 02:23.440 So this is literally how I would set it up. 54 02:23.440 --> 02:26.290 And we just want a few more, don't we? 55 02:26.320 --> 02:28.840 So let's just copy this label with the checkbox. 56 02:29.630 --> 02:33.440 This one is number two, and you guessed it, that's number three. 57 02:33.470 --> 02:35.540 Let's save, go to the browser ... 58 02:35.570 --> 02:38.780 oh, but of course, we don't want the checked attribute on all of them. 59 02:41.420 --> 02:41.870 There we go. 60 02:41.900 --> 02:43.010 Let's go to the browser. 61 02:43.990 --> 02:44.800 And here we go. 62 02:45.040 --> 02:46.690 How awesome is this? 63 02:47.710 --> 02:54.550 But, you will notice in the assignment I didn't have the checked items running horizontally, did I? 64 02:54.580 --> 02:55.600 They were below each other. 65 02:55.600 --> 02:56.800 So how can we do that? 66 02:57.700 --> 02:59.380 Very, very simple with CSS. 67 02:59.410 --> 03:00.400 Do you know what it is? 68 03:00.730 --> 03:03.580 It comes down to the display property in CSS. 69 03:03.610 --> 03:06.570 We don't want these displayed inline, next to each other. 70 03:06.580 --> 03:08.800 We want them displayed as a block. 71 03:09.010 --> 03:11.020 Meaning each item, 72 03:11.020 --> 03:11.650 each element 73 03:11.650 --> 03:15.430 we want to take up an entire block on the page. 74 03:15.430 --> 03:21.910 So all we have to do is go to our editor, go to the CSS file, target the default class 75 03:22.120 --> 03:24.040 remember, if we go to our HTML, 76 03:24.070 --> 03:26.830 we've given each label a class of default. 77 03:27.640 --> 03:28.630 That's all I'm doing here. 78 03:28.630 --> 03:32.230 And then we want to display:block. 79 03:32.440 --> 03:34.030 We save this, 80 03:34.060 --> 03:35.830 go back to our browser now. 81 03:36.250 --> 03:36.670 Boom 💥. 82 03:37.090 --> 03:37.840 How cool is this? 83 03:37.870 --> 03:40.440 So this is the first part of the solution. 84 03:40.450 --> 03:43.660 Now I want to start styling our custom checkboxes. 85 03:43.660 --> 03:44.650 Let's get into it. 86 03:45.130 --> 03:52.510 In order to do that, let's go to our editor, and it's time to style our custom checkboxes. 87 03:52.540 --> 03:54.670 Custom checkboxes. 88 03:55.320 --> 03:59.280 And the HTML is going to be very, very simple. 89 03:59.280 --> 04:05.490 What do I want to do? Well, firstly, let's set up a header called Custom Checkboxes. 90 04:07.040 --> 04:07.800 There we go. 91 04:07.850 --> 04:11.000 And now I want to, of course, include a label. 92 04:11.000 --> 04:15.920 And this time, instead of giving it a class of default, I want to give it a class of custom, because 93 04:15.920 --> 04:20.030 this is, you know, we're going to apply custom CSS styling to this. 94 04:20.360 --> 04:25.490 Of course, in here I want to include our input of type checkbox. 95 04:26.390 --> 04:27.680 And we should have a name. 96 04:27.680 --> 04:28.670 But you know what, 97 04:28.850 --> 04:33.020 for this example, we don't need a name because I'm not concerned about submitting it to a server. 98 04:33.200 --> 04:36.210 And here we do want the default to be checked, right? 99 04:36.230 --> 04:37.790 Because this is the very first one. 100 04:37.790 --> 04:44.970 And of course, we need the number one. Before I copy and paste this block of code for the others, 101 04:44.990 --> 04:48.830 there's one other element I want to put here, and I'm going to be putting a span element. 102 04:48.830 --> 04:55.010 The reason I'm doing that, is remember I gave you a bit of a clue in the introduction to this kind of 103 04:55.010 --> 05:00.530 challenge, and that was in order to create our own custom checkboxes, we have to remove the styling 104 05:00.530 --> 05:03.440 that the browser automatically applies to a checkbox. 105 05:03.740 --> 05:11.000 And that means we have to create a new style, and I'm going to create that new style in a new element. 106 05:11.030 --> 05:14.560 We could have used a div element, we could have used any element we wanted. 107 05:14.570 --> 05:17.600 I'm just using a span element. And you'll see how it works shortly, 108 05:17.600 --> 05:19.220 but I just wanted to give you the heads up. 109 05:19.460 --> 05:23.900 There's our input and as I just mentioned, I want to include a span element. 110 05:23.930 --> 05:26.610 We don't have to have any content inside the span. 111 05:26.610 --> 05:30.810 We're going to be creating this content entirely with CSS. 112 05:30.810 --> 05:36.180 I just want to give it a class so we can target it with CSS and let's give it a class of 113 05:37.240 --> 05:38.230 checkmark. 114 05:38.350 --> 05:39.070 How's that? 115 05:39.160 --> 05:42.880 And this, my dear students, is a brilliant time to copy and paste, 116 05:42.880 --> 05:43.450 right. 117 05:43.630 --> 05:47.230 I think we did four on the challenge video. 118 05:47.590 --> 05:49.750 Two, three. 119 05:50.810 --> 05:51.500 Four. 120 05:51.530 --> 05:56.870 And, you know, in practice this would be two, option three and option four. 121 05:57.290 --> 06:00.080 And we don't need the checked attribute on these. 122 06:00.980 --> 06:01.910 Save this. 123 06:01.910 --> 06:02.960 Go to the browser. 124 06:03.260 --> 06:04.060 Wow. 125 06:04.070 --> 06:06.260 And there we go. 126 06:06.290 --> 06:07.970 You can see that we're getting there. 127 06:08.030 --> 06:12.560 Okay, But now it's time to go to our CSS file and spazz this up. 128 06:12.560 --> 06:13.340 We are almost done 129 06:13.340 --> 06:14.540 so please, please stick with me. 130 06:14.540 --> 06:16.670 I know it can be quite daunting, all of this. 131 06:16.670 --> 06:19.400 It can get quite confusing, but that's what I'm here for. 132 06:20.800 --> 06:26.080 Our HTML is done. And all we have to do now, is we have to go to our styles.css file. 133 06:26.080 --> 06:26.740 And you know what, 134 06:26.740 --> 06:27.880 let me put them side by side 135 06:27.880 --> 06:29.980 then you can kind of see the effects as we go along. 136 06:30.010 --> 06:34.030 First thing I want to do is let's change this h1 color to rgb() 137 06:34.990 --> 06:37.420 136, 0, 0. 138 06:37.450 --> 06:38.170 There we go. 139 06:38.410 --> 06:39.590 A nice maroon color. 140 06:39.610 --> 06:40.280 How's that? 141 06:40.300 --> 06:44.650 First step is is I want to hide the browser's ugly default checkboxes. 142 06:44.680 --> 06:46.060 Okay, so let's do that. 143 06:46.090 --> 06:48.190 We're going to target the custom 144 06:49.250 --> 06:49.970 class. 145 06:50.390 --> 06:58.850 And we want to target the input. And we want to set its height to zero and its width to zero. 146 06:58.970 --> 06:59.630 We save that. 147 06:59.630 --> 07:01.130 And you can see those checkboxes, 148 07:01.130 --> 07:02.930 those little squares have disappeared. 149 07:02.930 --> 07:04.100 That's what we want. 150 07:04.130 --> 07:06.500 Let me put a comment here, just so you know what's going on. 151 07:07.130 --> 07:09.380 Hide the browser's ugly 152 07:10.430 --> 07:12.560 default checkbox. 153 07:12.980 --> 07:13.910 That's what we've done. 154 07:16.050 --> 07:18.450 And right now it's pointless. 155 07:18.490 --> 07:19.830 You know, it's useless. 156 07:19.920 --> 07:20.550 We can't use it. 157 07:20.550 --> 07:21.090 But that's okay. 158 07:21.090 --> 07:22.350 We're going to design our own one now. 159 07:22.350 --> 07:27.450 And let's start. Our custom checkbox styling. 160 07:31.200 --> 07:31.470 Okay. 161 07:31.470 --> 07:32.760 What do we want here? 162 07:32.790 --> 07:35.040 Well, we want to target the custom class, 163 07:35.610 --> 07:36.060 right. 164 07:36.060 --> 07:42.600 If I go to our index file, you can see we've put that custom class on every single label. 165 07:42.990 --> 07:44.700 Okay, so that's what we're doing. 166 07:44.700 --> 07:46.010 We're targeting that custom class 167 07:46.020 --> 07:48.810 now. Firstly, display should be block 168 07:49.020 --> 07:53.340 so they go beneath each other. And let's apply some padding. 169 07:53.520 --> 07:57.240 Padding-left: 35px. 170 07:57.270 --> 08:04.680 The reason I'm giving padding-left is so that we can create our custom checkbox to the left, right. 171 08:04.680 --> 08:07.800 And then you can see that they are pretty much on top of each other. 172 08:07.800 --> 08:12.250 So let's apply a margin to the bottom of each item. 173 08:12.270 --> 08:13.410 Margin bottom. 174 08:13.950 --> 08:15.140 Let's say 12 pixels. 175 08:15.150 --> 08:15.620 How's that? 176 08:15.630 --> 08:16.860 Yep, that's better. 177 08:16.860 --> 08:25.020 And then I want, you know, when I hover the mouse over each checkbox, I want the mouse to become 178 08:25.020 --> 08:29.910 a pointer, just a visual cue to the user that it is actually a clickable button. 179 08:30.330 --> 08:33.660 So let's target the cursor property, and change that to pointer. 180 08:33.670 --> 08:34.420 Very, very simple. 181 08:34.420 --> 08:37.510 Now when I hover over each one, it changes to little hand. 182 08:38.050 --> 08:40.360 It's all these little things that really make a big difference. 183 08:40.810 --> 08:44.320 Now what I want to do, is I want to change the font size. 184 08:44.320 --> 08:45.790 Let's make it slightly bigger. 185 08:45.790 --> 08:47.140 Should we say 20 pixels? 186 08:47.560 --> 08:49.090 Yeah, that looks good. 187 08:49.330 --> 08:49.600 Okay. 188 08:49.600 --> 08:50.110 I think. 189 08:50.110 --> 08:51.370 I think that's it for now. 190 08:51.670 --> 08:52.900 I think that's looking good. 191 08:53.290 --> 08:54.400 What's the next step? 192 08:54.550 --> 09:02.770 Well, the next step is going to be creating creating our custom checkbox square. 193 09:06.100 --> 09:08.530 So let's get cracking. 194 09:08.740 --> 09:09.760 How do we do that? 195 09:09.790 --> 09:14.350 Well, if we go to our index file, you can see that we've included all these spans. 196 09:14.380 --> 09:16.900 It's got a class of checkmark and nothing is in it. 197 09:16.900 --> 09:19.600 And this span is what I want to start styling. 198 09:19.630 --> 09:20.710 So let's do it. 199 09:20.740 --> 09:24.130 Let's target our checkmark class 200 09:24.950 --> 09:27.410 and let's start applying styling to that. 201 09:28.220 --> 09:31.310 Let's give it firstly a background-colour 202 09:32.430 --> 09:33.210 of ... 203 09:33.540 --> 09:34.560 rgb() 204 09:35.010 --> 09:35.760 rgb() 205 09:37.230 --> 09:40.440 134, 134, 134. 206 09:41.780 --> 09:47.420 Just a light gray, and let's give it a width and a height. 207 09:48.200 --> 09:53.640 And the reason we can't see it is we need to apply a position of absolute to all of this. 208 09:53.660 --> 09:54.380 And there we go. 209 09:54.410 --> 09:56.360 There are our boxes. 210 09:57.140 --> 09:58.010 You know what I want to do, though? 211 09:58.010 --> 09:59.510 I don't want them to the right, do we? 212 09:59.540 --> 10:01.610 We want to actually push these all to the left. 213 10:01.610 --> 10:03.170 So let's just say left is zero. 214 10:03.200 --> 10:04.030 There we go. 215 10:04.040 --> 10:09.920 But if I do this, can you see that those square boxes are literally right at the left of the entire 216 10:09.920 --> 10:10.730 viewport? 217 10:10.730 --> 10:11.630 I don't want that. 218 10:11.630 --> 10:17.150 I want it to be relative to its parent element, and that is this custom class. 219 10:17.150 --> 10:22.790 So in the custom class, and if we go to the index file, you can see here the <label> is the parent element, 220 10:22.790 --> 10:23.080 right, 221 10:23.150 --> 10:27.290 with class of custom. I want this to be what it's relative to. 222 10:27.320 --> 10:33.350 So on this class, I want to add a position of relative and then it should push those squares to the 223 10:33.350 --> 10:33.650 right. 224 10:33.680 --> 10:34.640 There we go. 225 10:34.670 --> 10:35.270 How cool is that? 226 10:35.270 --> 10:41.270 So it's literally to the left of this entire parent element, not the entire viewport. 227 10:41.300 --> 10:42.320 That's important. 228 10:42.330 --> 10:43.230 So how cool is this? 229 10:43.230 --> 10:47.100 You can already see our checkboxes are starting to take shape. 230 10:47.130 --> 10:47.490 Okay. 231 10:47.490 --> 10:50.100 But, you know, let's start working with the hover. 232 10:50.100 --> 10:55.980 And in order to do that, we can target the CSS pseudo class of :hover. 233 10:56.100 --> 11:03.030 So on mouse over, add a gray background color. 234 11:03.740 --> 11:04.340 How's that? 235 11:06.750 --> 11:07.340 How do we do that? 236 11:07.350 --> 11:10.470 Well, let's target our custom class. 237 11:10.470 --> 11:14.280 And yes, we want to target its :hover state. 238 11:15.270 --> 11:18.150 And then we want to affect the checkmark, 239 11:18.180 --> 11:24.600 checkmark class when that happens, and we just want to change its background-color. 240 11:27.480 --> 11:28.730 Let's do #ccc. 241 11:28.890 --> 11:29.820 How does that look? 242 11:30.000 --> 11:31.140 So let's take our mouse 🖱, 243 11:31.140 --> 11:32.100 let's hover over one. 244 11:32.130 --> 11:34.200 Hover over two, three and four. 245 11:34.230 --> 11:35.250 How cool is that? 246 11:35.490 --> 11:36.590 Very, very easy, right? 247 11:36.600 --> 11:38.040 Very, very intuitive. 248 11:38.220 --> 11:39.060 What's next? 249 11:39.090 --> 11:43.230 Well, when the checkbox is checked, I want to add a blue background. 250 11:43.260 --> 11:45.300 You'll see how easy this is as well. 251 11:45.330 --> 11:46.350 All we need to do 252 11:47.100 --> 11:48.270 well, let me do a comment first. 253 11:48.270 --> 11:50.430 When the checked 254 11:51.730 --> 11:53.440 state is on, 255 11:54.470 --> 11:57.980 add a blue background. 256 11:58.370 --> 11:59.420 How do we do that? 257 11:59.780 --> 12:00.740 Can you try? 258 12:00.950 --> 12:03.290 Give it a go before I show you the solution. 259 12:03.950 --> 12:04.280 All right. 260 12:04.280 --> 12:05.090 Well, it's very easy. 261 12:05.090 --> 12:09.470 All we have got to do is target our custom class, because that's our label, our wrapper. 262 12:09.620 --> 12:13.760 And within there, we want to target the input when it's checked 263 12:13.760 --> 12:19.610 state is on. But we don't want to target the actual input element itself when it's checked. 264 12:19.640 --> 12:21.350 Because remember, we hid it. 265 12:21.380 --> 12:23.700 We set its height and width to zero. 266 12:23.720 --> 12:31.820 So what we want to do, is we want to select all the descendants that have a class of checkmark, right. 267 12:31.820 --> 12:32.930 That's what we want to do. 268 12:32.930 --> 12:34.670 Those are all those spans, for example. 269 12:34.670 --> 12:37.730 And then all we want to do is change its background-color 270 12:37.730 --> 12:38.690 to what? 271 12:38.720 --> 12:46.760 To a funky, nice blue color ... #2196F3. 272 12:49.120 --> 12:50.050 And that's cool. 273 12:50.050 --> 12:50.470 That's cool. 274 12:50.470 --> 12:51.130 That's cool. 275 12:51.130 --> 12:53.590 And we can toggle, we can refresh the page. 276 12:54.100 --> 12:55.420 How awesome is this? 277 12:56.080 --> 12:57.470 How cool is this? 278 12:57.490 --> 12:59.200 Oh man, I have a lot of fun doing this. 279 12:59.200 --> 13:01.840 Let's refresh the page now. 280 13:02.080 --> 13:07.870 Okay, we could leave it here, but you might be thinking, "Clyde, I really want to create a little 281 13:07.870 --> 13:10.720 check, checkmark inside that box." 282 13:10.720 --> 13:11.470 How do we do that? 283 13:11.470 --> 13:19.270 Well, in order to add that little check box or that check ✔ item, I'm going to be using a pseudo element. (background music playing)