WEBVTT 0 00:01.090 --> 00:02.170 Did you give it a go? 1 00:02.680 --> 00:03.280 I hope so. 2 00:03.280 --> 00:05.770 But if you didn't, or you weren't quite sure where to go, 3 00:05.800 --> 00:06.280 don't worry. 4 00:06.280 --> 00:08.770 I'm going to go through everything with you right now. 5 00:08.800 --> 00:10.810 It is quite a difficult one. 6 00:10.840 --> 00:12.850 There is a lot of CSS you need to know. 7 00:12.850 --> 00:15.430 And if you're not experienced with CSS, it might be a bit tricky. 8 00:15.430 --> 00:16.990 But anyway, have some of your coffee. 9 00:16.990 --> 00:17.920 This is still the same one. 10 00:17.920 --> 00:20.620 I'm going to stick with it through all of these challenges. 11 00:21.240 --> 00:22.690 Mmm it's good. 12 00:22.690 --> 00:23.080 It's good. 13 00:23.080 --> 00:23.770 Let's begin. 14 00:23.920 --> 00:26.680 As always, I want to start with an HTML document. 15 00:26.710 --> 00:31.810 We're going to create a head and style section, because, yes, we're going to need to plug in a lot of 16 00:31.810 --> 00:32.650 CSS. 17 00:32.680 --> 00:35.530 We could put it in an external CSS file. 18 00:35.530 --> 00:39.460 It's just one checkbox, so I don't want to do that. 19 00:39.490 --> 00:42.070 Then we can create a body section. Within the body, of course, 20 00:42.070 --> 00:42.880 a form. 21 00:44.210 --> 00:45.530 And within the form 22 00:45.530 --> 00:47.930 we want a checkbox. 23 00:47.930 --> 00:53.120 And I just want to stop here, and I want to remind you that when it comes to developing something or 24 00:53.120 --> 00:56.870 designing something, there are many, many different ways to do something. 25 00:56.870 --> 01:03.590 So here what I want to do is I want to wrap everything within a UL element, and specifically in a list 26 01:03.590 --> 01:04.190 item. 27 01:04.190 --> 01:09.350 I just do this because when it comes to styling and with CSS, I can just target these elements very 28 01:09.350 --> 01:10.940 easily to make it look nice. 29 01:10.940 --> 01:13.430 But really it's not the only way to do this. 30 01:13.430 --> 01:14.660 And what do we want next? 31 01:14.690 --> 01:20.330 You guessed it, we want an input, but this time of type checkbox. We can just give it a name of power 32 01:20.330 --> 01:21.410 and an ID of power. 33 01:21.410 --> 01:25.580 If we save this, refresh the browser, save this, refresh your browser, and 34 01:25.580 --> 01:26.270 there we go. 35 01:26.270 --> 01:29.870 And yes, we've got that bullet point because this is an <li> element. 36 01:29.900 --> 01:32.630 Don't worry, we're going to deal with styling shortly. 37 01:32.630 --> 01:36.800 And of course we've got the default checkbox that the browser provides us. 38 01:37.040 --> 01:38.960 Again, we're going to be changing this completely. 39 01:38.990 --> 01:40.310 Okay, so that's our input. 40 01:41.540 --> 01:44.660 Let's just make this edit a bit bigger so it's a bit more clear. 41 01:44.810 --> 01:51.260 Remember in the intro to this challenge, we saw the word "on" and "off" right, when the power toggle button 42 01:51.260 --> 01:52.370 goes on and off. 43 01:52.370 --> 01:54.140 So how can we create that? 44 01:54.140 --> 01:55.100 Well, very simple. 45 01:55.100 --> 01:56.630 Why don't we put it in a label? 46 01:56.640 --> 02:01.280 The for attribute of the label has to match the ID of the input, which we called power. 47 02:01.280 --> 02:07.420 And now I actually want to wrap ... why don't we wrap that word "on" and "off" in a span? 48 02:07.430 --> 02:13.100 Okay, so we've got a span. And this one can be on. And let's create another span, 49 02:14.350 --> 02:14.980 span, 50 02:14.980 --> 02:19.180 and this one can be off. If we save this and we go to our browser, 51 02:19.210 --> 02:20.050 look, there we go. 52 02:20.050 --> 02:25.420 We've got the on and off. And obviously we want to target only the on when it's on, and the off when it's 53 02:25.450 --> 02:25.750 off. 54 02:25.750 --> 02:29.440 In order to do that, we let's put a class on each span. 55 02:30.150 --> 02:39.550 Let's go back to our editor here and this span can have a class of "on", and this next span can have a 56 02:39.550 --> 02:41.530 class of "off". 57 02:42.160 --> 02:43.990 Okay right now this does nothing. 58 02:44.200 --> 02:45.040 Let me show you. 59 02:45.220 --> 02:45.940 There we go. 60 02:45.940 --> 02:46.960 It's done nothing. 61 02:47.230 --> 02:51.760 But, in terms of our code, it's doing a lot, isn't it? 62 02:51.760 --> 02:54.330 Because now we can target these with CSS. 63 02:54.340 --> 02:56.430 Now, how are we going to do the CSS? 64 02:56.440 --> 03:00.100 Well, let me start off by saying that we are going to be using flexbox. 65 03:00.100 --> 03:03.700 Don't worry if you haven't done flexbox before. This course 66 03:03.700 --> 03:06.490 you know, it's not about CSS and detailed CSS. 67 03:06.490 --> 03:08.530 I'm just showing you how you can go about doing it. 68 03:08.530 --> 03:17.420 But very, very basically, you can view flexbox kind of as an entire module and not a single property. 69 03:17.420 --> 03:21.890 And what I mean by that is that you've got a whole lot of properties you have to deal with when dealing 70 03:21.890 --> 03:27.500 with flexbox, for example, some properties you need to set on the parent, aka the flex container 71 03:27.500 --> 03:32.600 and other properties you need to set on the children within that container, aka the flex items. 72 03:32.600 --> 03:36.110 But anyway, I'm going to be showing you exactly how this works as I go on. 73 03:36.110 --> 03:41.120 But in order not to distract you, let me remove myself and let's concentrate on the CSS. 74 03:41.390 --> 03:41.690 Okay? 75 03:41.690 --> 03:42.350 So let's get into it. 76 03:42.380 --> 03:44.330 We've got our style section up here. 77 03:44.540 --> 03:47.090 Let's put our browser side by side, so 78 03:47.090 --> 03:49.280 you can see what's going on as we style. 79 03:49.280 --> 03:53.090 It's always very helpful, especially when you just start out. Okay, the first thing we want to do is 80 03:53.120 --> 03:56.690 we want to deal with our list item element, don't we? 81 03:56.720 --> 04:01.910 First thing I want to do is let's just affect its width to 100 pixels. 82 04:01.910 --> 04:07.340 And now remember I said I want to use flexbox, so let's set up flexbox. 83 04:07.340 --> 04:07.880 Okay. 84 04:07.970 --> 04:11.870 In order to that, we set its display property to flex. 85 04:12.790 --> 04:15.550 Doing that removes that bullet point, which is really, really cool. 86 04:33.630 --> 04:35.850 Then I want to just align items to the center. 87 04:36.480 --> 04:37.830 Let's justify content. 88 04:38.010 --> 04:38.790 That's always a good thing. 89 04:39.960 --> 04:43.260 And you can see there how the browser has added space. 90 04:43.780 --> 04:46.040 So this justify-content property, 91 04:46.060 --> 04:54.160 it defines how the browser distributes space between and around content items along the main axis of 92 04:54.160 --> 04:55.780 a flex container. 93 04:55.780 --> 05:03.880 And when we set this property to space-around, it just evenly distributes each line with equal space 94 05:03.880 --> 05:04.720 between them. 95 05:04.760 --> 05:06.190 Okay, so that's all that that does. 96 05:06.400 --> 05:09.730 Anyway, I don't want to harp on too much about that. And then position 97 05:09.730 --> 05:11.140 I want to set this to relative. 98 05:11.700 --> 05:13.260 What do I want to do next? 99 05:14.090 --> 05:15.740 Let's work with that label. 100 05:16.160 --> 05:27.470 Let's size the label, and let's make the on and off parts sit on top of one another using positioning. 101 05:27.980 --> 05:30.080 Remember we put the on and off in that span. 102 05:30.110 --> 05:31.280 Let me just scroll down here. 103 05:31.310 --> 05:32.450 In that span. 104 05:32.480 --> 05:36.730 Well, I want us to use absolute positioning so they're not next to each other. 105 05:36.740 --> 05:38.320 They are literally in the same place. 106 05:38.330 --> 05:39.920 So I'll show you how we can do that now. 107 05:40.070 --> 05:42.290 Firstly, let's target our label. 108 05:42.590 --> 05:46.400 Okay, Let's give it a width of, say, 20 pixels. 109 05:47.540 --> 05:53.780 The height of 20 pixels and a line-height of, you guessed it, 20 pixels. 110 05:54.540 --> 05:57.680 I'm just trying to make sure everything is uniform and in center. 111 05:57.690 --> 05:58.800 That's all I'm trying to do. 112 05:59.250 --> 06:01.810 And you'll see how it all works and fits in shortly. 113 06:01.830 --> 06:08.550 Then, as I mentioned, I want to target our label and then a descendant of this label is a span, and 114 06:08.550 --> 06:11.970 that's the span I want to set its position property to absolute. 115 06:12.000 --> 06:14.790 That's what I was meaning when I wanted them on top of each other. 116 06:14.790 --> 06:18.630 So now you can see the "on" and the "off" are literally on top of each other, which is great because we're 117 06:18.630 --> 06:20.730 only going to be showing one at a time. 118 06:21.270 --> 06:23.190 Okay, well, what is next? 119 06:23.490 --> 06:28.170 Well, the next step, my dear students, is to custom make our toggle. 120 06:28.170 --> 06:30.510 And in order to do that, remember what we have to do. 121 06:30.510 --> 06:35.580 First, we have to remove the default styling of the checkbox that's given to us by the browser. 122 06:35.580 --> 06:37.620 So that ugly little square there, 123 06:37.650 --> 06:39.390 we want to remove entirely. 124 06:39.390 --> 06:46.290 And then what I want to do is I want to target the ::before and ""after pseudo elements to create our custom 125 06:46.320 --> 06:47.880 toggle, right? 126 06:47.880 --> 06:48.900 So it's not that difficult. 127 06:48.900 --> 06:49.890 Let's give it a go. 128 06:49.920 --> 06:51.300 Let's just do a comment here. 129 06:51.330 --> 06:53.090 It's always good to comment your code, by the way. 130 06:53.100 --> 06:57.430 So what I want to do is I want to remove the default styling 131 06:58.500 --> 07:06.090 of the checkbox using the appearance property, and create the outer 132 07:06.120 --> 07:07.560 toggle area. 133 07:07.890 --> 07:08.510 There we go. 134 07:08.610 --> 07:09.690 That's what we're going to do now. 135 07:09.850 --> 07:10.110 Right. 136 07:10.110 --> 07:11.410 But how are we going to do this? 137 07:11.430 --> 07:16.500 Well, in order to start, we need to remove the default styling of the input of type checkbox. 138 07:16.500 --> 07:22.170 So let's target the input where its type is set to checkbox. 139 07:22.200 --> 07:29.520 We're being very explicit here, and we want its appearance ... appearance, to be none. 140 07:29.880 --> 07:30.580 There we go. 141 07:30.600 --> 07:31.410 We've removed it. 142 07:56.800 --> 07:57.730 Okay, so there we go. 143 07:57.730 --> 07:59.140 We've removed the default styling. 144 07:59.140 --> 08:00.030 Very, very simple. 145 08:00.040 --> 08:04.860 But what I want to do now is I want to create our own custom design of the outer toggle. 146 08:04.870 --> 08:07.090 I'm not talking about the inner little round circle. 147 08:07.090 --> 08:09.250 I'm talking about the container for our toggle. 148 08:09.250 --> 08:10.930 So let's create that now. 149 08:11.020 --> 08:16.210 And what's really cool is it's so, so easy and this is how much power we have as developers. 150 08:16.210 --> 08:17.370 It's really, really awesome. 151 08:17.380 --> 08:20.740 Let's just create a border: 2px solid black. 152 08:21.220 --> 08:21.960 How does that look? 153 08:21.970 --> 08:22.540 There you go. 154 08:22.540 --> 08:24.430 Just basically a black dot. 155 08:24.580 --> 08:26.740 And I don't want it to be square. 156 08:26.740 --> 08:33.130 And in order to change its kind of squareness to more round, we change the border-radius property and 157 08:33.130 --> 08:34.570 that comes down to personal preference. 158 08:34.570 --> 08:35.980 I'll just set it at 12 pixels. 159 08:35.980 --> 08:36.400 How's that? 160 08:36.400 --> 08:39.880 So it's a round circle, but of course we are designing the container, right? 161 08:39.880 --> 08:41.830 So that's way too small. 162 08:41.860 --> 08:43.990 So let's set its width to 44 pixels. 163 08:44.870 --> 08:47.690 Better and let's define its height. 164 08:48.140 --> 08:49.790 Let's make that 24 pixels. 165 08:49.820 --> 08:51.080 How cool is that? 166 08:51.230 --> 08:53.560 You can see it's coming along. 167 08:53.570 --> 08:53.840 Wow. 168 08:53.840 --> 08:57.860 It's so nice when when things happen in an orderly fashion. 169 08:58.640 --> 09:01.110 Let's now change the background color. 170 09:01.180 --> 09:01.490 Okay. 171 09:01.520 --> 09:03.320 We can just change it to triple "e", 172 09:03.350 --> 09:04.010 ehw's that? 173 09:04.040 --> 09:05.950 Yeah, it's like a nice, light gray. 174 09:05.960 --> 09:06.950 I think that's cool. 175 09:06.950 --> 09:10.820 And then we don't want things to just happen instantly. 176 09:10.820 --> 09:12.460 We want things to transition. 177 09:12.470 --> 09:15.200 It just looks cool when you actually see things move. 178 09:15.290 --> 09:21.830 So all the CSS properties related to this, and that's why I'm using the word all, I want 179 09:22.070 --> 09:29.210 any change to transition in 0.4 seconds. Right now, of course it doesn't do anything because when we 180 09:29.240 --> 09:31.310 click on this toggle, nothing happens. 181 09:31.310 --> 09:33.710 But that is going to change shortly, my dear students.