Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,110 --> 00:00:05,373
Okay, so let's keep working on our carousel.
2
00:00:06,640 --> 00:00:09,760
And I'm going to start by actually nicely formatting
3
00:00:09,760 --> 00:00:11,250
these buttons here,
4
00:00:11,250 --> 00:00:13,863
just so that they look like these two here.
5
00:00:14,750 --> 00:00:16,000
All right.
6
00:00:16,000 --> 00:00:19,400
So basically, making them white and round.
7
00:00:19,400 --> 00:00:21,200
And the icon green
8
00:00:21,200 --> 00:00:22,743
and giving it some shadow.
9
00:00:24,380 --> 00:00:27,063
So let's have that here.
10
00:00:28,530 --> 00:00:32,923
Let's add some comment here, like the controls.
11
00:00:34,160 --> 00:00:36,900
And so we want our button here.
12
00:00:36,900 --> 00:00:39,120
So first of all, the background color
13
00:00:41,350 --> 00:00:43,043
was, remember, white.
14
00:00:45,610 --> 00:00:46,720
Okay.
15
00:00:46,720 --> 00:00:49,720
And then since this is actually a button,
16
00:00:49,720 --> 00:00:52,653
it has by default a border that we need to remove.
17
00:00:53,620 --> 00:00:56,770
So that's a problem we run into before.
18
00:00:56,770 --> 00:01:00,060
And so the trick is always to set border to none.
19
00:01:00,060 --> 00:01:03,860
And so then, it actually disappears completely.
20
00:01:03,860 --> 00:01:07,220
But let's set that back.
21
00:01:07,220 --> 00:01:09,880
So here we can simply define some height
22
00:01:11,010 --> 00:01:12,330
and some width.
23
00:01:12,330 --> 00:01:14,120
Let's say 40.
24
00:01:14,120 --> 00:01:16,423
I think that's part of our list here.
25
00:01:17,880 --> 00:01:21,160
Well, actually not,
26
00:01:21,160 --> 00:01:24,130
but let's cheat here in this case
27
00:01:24,130 --> 00:01:27,583
and use the value depths between 32 and 48.
28
00:01:28,670 --> 00:01:29,760
So we need to do that,
29
00:01:29,760 --> 00:01:33,470
so that it looks more like the actual example.
30
00:01:33,470 --> 00:01:37,500
And width, 40 pixels as well.
31
00:01:37,500 --> 00:01:38,730
So there we go.
32
00:01:38,730 --> 00:01:43,010
And finally, we can see actually the icons now as well,
33
00:01:43,010 --> 00:01:44,470
but they are very small.
34
00:01:44,470 --> 00:01:47,560
So we need to change that.
35
00:01:47,560 --> 00:01:50,003
And here they are called button icon.
36
00:01:51,800 --> 00:01:54,173
So button icon.
37
00:01:55,800 --> 00:01:58,510
And again, we will go with the height and width
38
00:01:58,510 --> 00:02:00,263
of 24 pixels.
39
00:02:03,180 --> 00:02:05,780
And there dare we go.
40
00:02:05,780 --> 00:02:06,750
Nice.
41
00:02:06,750 --> 00:02:10,960
Now, the fact that they are actually not squared.
42
00:02:10,960 --> 00:02:15,380
So basically, that the width property is not being respected
43
00:02:15,380 --> 00:02:18,800
as the fact that they are right now, flex items.
44
00:02:18,800 --> 00:02:20,900
And so remember the width,
45
00:02:20,900 --> 00:02:23,500
works a little bit differently there.
46
00:02:23,500 --> 00:02:25,800
So right now the browser is trying to fit
47
00:02:25,800 --> 00:02:29,110
all this content here into the flex container.
48
00:02:29,110 --> 00:02:32,450
And so it will automatically shrink these items here,
49
00:02:32,450 --> 00:02:35,550
even though we set a width of 40 pixels.
50
00:02:35,550 --> 00:02:38,770
So if we actually want to see the real result,
51
00:02:38,770 --> 00:02:41,750
we should now take them out of this flex container.
52
00:02:41,750 --> 00:02:44,500
And the way in which we will do that
53
00:02:44,500 --> 00:02:48,071
is by actually positioning them absolutely.
54
00:02:48,071 --> 00:02:49,080
All right.
55
00:02:49,080 --> 00:02:51,990
So I will show you a little bit later
56
00:02:51,990 --> 00:02:54,460
why we do it that way,
57
00:02:54,460 --> 00:02:56,933
but for now, let's just do that.
58
00:02:58,170 --> 00:03:00,740
So position absolute.
59
00:03:00,740 --> 00:03:02,870
And so remember, by doing that,
60
00:03:02,870 --> 00:03:04,640
we take the element completely
61
00:03:04,640 --> 00:03:08,240
out of the flow of the page, right?
62
00:03:08,240 --> 00:03:10,610
So for the surrounding elements,
63
00:03:10,610 --> 00:03:14,660
it is as if these elements were no longer on the page.
64
00:03:14,660 --> 00:03:16,450
And so then, basically,
65
00:03:16,450 --> 00:03:20,880
only these two elements here remain as flex items.
66
00:03:20,880 --> 00:03:22,110
All right.
67
00:03:22,110 --> 00:03:24,160
So that's very important to remember
68
00:03:24,160 --> 00:03:26,150
about absolute positioning.
69
00:03:26,150 --> 00:03:29,160
And another thing that's very important to remember
70
00:03:29,160 --> 00:03:33,010
is that we need to specify inside of which container
71
00:03:33,010 --> 00:03:36,590
these elements should actually be absolutely positioned.
72
00:03:36,590 --> 00:03:39,310
So in relation to what parent,
73
00:03:39,310 --> 00:03:42,360
the absolute positioning is going to happen.
74
00:03:42,360 --> 00:03:44,890
And remember, that we need to, basically,
75
00:03:44,890 --> 00:03:46,890
choose a parent element
76
00:03:46,890 --> 00:03:50,310
and set that one to position relative.
77
00:03:50,310 --> 00:03:51,143
All right.
78
00:03:52,090 --> 00:03:56,060
So in this case, that is pretty obvious, right?
79
00:03:56,060 --> 00:03:58,650
So the element that should be the parent
80
00:03:58,650 --> 00:03:59,720
of these two here
81
00:04:00,780 --> 00:04:03,480
is this entire carousel.
82
00:04:03,480 --> 00:04:05,360
So it is inside of that
83
00:04:05,360 --> 00:04:08,303
that we want the absolute positioning to happen.
84
00:04:09,760 --> 00:04:11,960
So we need to do this,
85
00:04:11,960 --> 00:04:14,870
even though it is, of course, already the parent,
86
00:04:14,870 --> 00:04:17,553
but we still need to do this.
87
00:04:19,150 --> 00:04:22,160
Okay, let's see what happens now.
88
00:04:22,160 --> 00:04:24,320
And there we go.
89
00:04:24,320 --> 00:04:27,610
So now they are finally back to being squared.
90
00:04:27,610 --> 00:04:28,890
Even though they are, of course,
91
00:04:28,890 --> 00:04:31,060
still not exactly in the position
92
00:04:31,060 --> 00:04:33,000
where we want them to be.
93
00:04:33,000 --> 00:04:35,090
But we will worry about that later.
94
00:04:35,090 --> 00:04:37,463
For now, let's finish formatting them.
95
00:04:38,410 --> 00:04:40,660
And so we want them to be round
96
00:04:40,660 --> 00:04:43,890
and therefore let's use a border radius
97
00:04:45,020 --> 00:04:46,853
with a really high value.
98
00:04:47,920 --> 00:04:49,780
Or actually, since they are squared...
99
00:04:49,780 --> 00:04:52,450
Remember, we can simply say 50%
100
00:04:52,450 --> 00:04:55,510
and that will then make them round as well.
101
00:04:55,510 --> 00:05:00,503
Then here we want actually this to have a color.
102
00:05:01,430 --> 00:05:04,973
So this icon, again, we use the stroke property.
103
00:05:08,010 --> 00:05:08,843
All right.
104
00:05:08,843 --> 00:05:10,560
And there we go.
105
00:05:10,560 --> 00:05:13,940
And then it looks as if this icon here
106
00:05:13,940 --> 00:05:16,083
is not really centered inside the button,
107
00:05:16,920 --> 00:05:20,060
but we can actually fix that quite easily
108
00:05:20,060 --> 00:05:24,143
because this element here is a child element.
109
00:05:25,150 --> 00:05:28,690
And so, we can actually use this nice trick
110
00:05:28,690 --> 00:05:33,080
of simply setting this to a flex container
111
00:05:33,080 --> 00:05:37,150
and then align items to center it horizontally,
112
00:05:37,150 --> 00:05:39,060
or actually vertically,
113
00:05:39,060 --> 00:05:40,540
and justify items
114
00:05:41,660 --> 00:05:44,090
or justify content, of course,
115
00:05:44,090 --> 00:05:45,980
and central as well.
116
00:05:45,980 --> 00:05:49,600
And so now that is nicely centered.
117
00:05:49,600 --> 00:05:53,320
So as we saw here, flexbox is even very helpful
118
00:05:53,320 --> 00:05:56,140
when there is only one flex element.
119
00:05:56,140 --> 00:05:58,830
So one flex item.
120
00:05:58,830 --> 00:05:59,663
So, right?
121
00:05:59,663 --> 00:06:02,950
So in the button, of course, there is only one element.
122
00:06:02,950 --> 00:06:05,890
But still in order to vertically center that,
123
00:06:05,890 --> 00:06:09,810
the easiest way is to declare the parent element
124
00:06:09,810 --> 00:06:11,410
as a flex container
125
00:06:11,410 --> 00:06:14,000
and then center it both horizontally
126
00:06:14,000 --> 00:06:16,490
and vertically like this.
127
00:06:16,490 --> 00:06:17,323
All right.
128
00:06:17,323 --> 00:06:20,720
But now, comes to time where we actually want to position
129
00:06:20,720 --> 00:06:22,660
these two elements.
130
00:06:22,660 --> 00:06:25,510
So this one here should go to the right
131
00:06:25,510 --> 00:06:28,170
and then a little bit outside of it
132
00:06:28,170 --> 00:06:31,123
and the other one to the left, right?
133
00:06:32,310 --> 00:06:36,890
So actually, we need two different classes for each of them,
134
00:06:36,890 --> 00:06:39,780
so we can position them separately.
135
00:06:39,780 --> 00:06:42,360
So this one is...
136
00:06:43,350 --> 00:06:45,310
Yeah, this is one button.
137
00:06:45,310 --> 00:06:48,230
So let's give it here, simply, another class.
138
00:06:48,230 --> 00:06:52,350
So a variation of button, which is button left.
139
00:06:52,350 --> 00:06:54,960
That's why I like to use these two dashes there.
140
00:06:54,960 --> 00:06:59,940
And then button right.
141
00:06:59,940 --> 00:07:00,823
Like this.
142
00:07:04,480 --> 00:07:05,313
Okay.
143
00:07:09,240 --> 00:07:12,273
Actually, let's do it after the real button.
144
00:07:14,170 --> 00:07:18,603
So let's start by saying left, zero.
145
00:07:19,635 --> 00:07:21,113
And 10 on the other one,
146
00:07:25,230 --> 00:07:29,400
We say, right, zero.
147
00:07:29,400 --> 00:07:30,440
Okay.
148
00:07:30,440 --> 00:07:32,150
So that looks good already.
149
00:07:32,150 --> 00:07:33,960
And for some reason they are already
150
00:07:35,230 --> 00:07:36,870
vertically centered,
151
00:07:36,870 --> 00:07:38,683
but let's pretend they are not.
152
00:07:39,640 --> 00:07:40,650
Okay.
153
00:07:40,650 --> 00:07:45,650
So probably that is because of this flex container.
154
00:07:47,040 --> 00:07:48,500
Let's see.
155
00:07:48,500 --> 00:07:50,570
So they're still in a way flex items,
156
00:07:50,570 --> 00:07:54,250
even though they are absolutely positioned.
157
00:07:54,250 --> 00:07:58,000
And so, if we no longer would align these items vertically,
158
00:07:58,000 --> 00:08:01,040
then you see that they would actually also move
159
00:08:01,040 --> 00:08:02,910
to another position.
160
00:08:02,910 --> 00:08:05,430
So for now, as we implement the technique
161
00:08:05,430 --> 00:08:07,260
that I want to show you next,
162
00:08:07,260 --> 00:08:09,053
let's leave it like this.
163
00:08:10,320 --> 00:08:11,153
All right.
164
00:08:12,290 --> 00:08:14,660
So let's go back to these buttons
165
00:08:14,660 --> 00:08:16,860
because now I'm going to explain you
166
00:08:16,860 --> 00:08:19,280
and to show you a brand new technique
167
00:08:19,280 --> 00:08:22,550
that we use in CSS all the time, actually.
168
00:08:22,550 --> 00:08:26,050
And so this one has to be with absolute positioning
169
00:08:26,050 --> 00:08:30,260
and also kind of with centering at the same time.
170
00:08:30,260 --> 00:08:31,770
So to start,
171
00:08:31,770 --> 00:08:34,730
let's go back here to see what we actually want,
172
00:08:34,730 --> 00:08:37,400
which is these two buttons here
173
00:08:37,400 --> 00:08:39,890
to be exactly vertically centered
174
00:08:39,890 --> 00:08:41,700
and even more importantly,
175
00:08:41,700 --> 00:08:46,600
also exactly centered here, basically, on this line.
176
00:08:46,600 --> 00:08:49,350
So on this transition. All right?
177
00:08:49,350 --> 00:08:51,720
So how can we do that?
178
00:08:51,720 --> 00:08:54,880
And let's actually first focus on the vertical centering
179
00:08:54,880 --> 00:08:56,623
using absolute positioning.
180
00:08:58,160 --> 00:08:59,580
Okay?
181
00:08:59,580 --> 00:09:02,490
So we might think that we could vertically center
182
00:09:02,490 --> 00:09:05,810
this element simply by setting the position
183
00:09:07,380 --> 00:09:09,430
here to 50%.
184
00:09:09,430 --> 00:09:11,390
So actually the top.
185
00:09:11,390 --> 00:09:15,110
So here in the top property,
186
00:09:15,110 --> 00:09:17,710
remember that we can specify the distance,
187
00:09:17,710 --> 00:09:19,450
basically, from the top.
188
00:09:19,450 --> 00:09:22,930
And so we can do also that in percentages.
189
00:09:22,930 --> 00:09:23,763
So for example,
190
00:09:23,763 --> 00:09:26,000
we could specify 10%
191
00:09:26,000 --> 00:09:27,903
and then that would look like this.
192
00:09:29,100 --> 00:09:32,370
However, we can also specify 50%.
193
00:09:32,370 --> 00:09:34,560
And so, as I was just saying,
194
00:09:34,560 --> 00:09:39,560
we might think that since 50% is half of 100%,
195
00:09:40,600 --> 00:09:44,310
that this might then vertically center this element.
196
00:09:44,310 --> 00:09:46,150
So let's take a look.
197
00:09:46,150 --> 00:09:49,180
And well, it kind of does.
198
00:09:49,180 --> 00:09:51,000
But it also doesn't.
199
00:09:51,000 --> 00:09:54,310
And the reason for that is that basically 50%
200
00:09:54,310 --> 00:09:58,610
is exactly half of the width of the parent container.
201
00:09:58,610 --> 00:10:01,610
And so that's from here to here.
202
00:10:01,610 --> 00:10:05,160
But that is only the start of the element.
203
00:10:05,160 --> 00:10:07,270
So the element starts right here,
204
00:10:07,270 --> 00:10:10,340
but basically, we would like the center of the element
205
00:10:10,340 --> 00:10:12,330
to be here in the center.
206
00:10:12,330 --> 00:10:13,500
Right?
207
00:10:13,500 --> 00:10:16,060
But that probably sounds a bit confusing.
208
00:10:16,060 --> 00:10:17,620
So let me actually show you now
209
00:10:17,620 --> 00:10:20,483
a visual representation of this technique.
210
00:10:22,090 --> 00:10:24,330
So this is our starting position
211
00:10:24,330 --> 00:10:27,170
where we have to carousel with the position
212
00:10:27,170 --> 00:10:28,540
set to relative
213
00:10:28,540 --> 00:10:33,540
and button left with the position set to absolute, right?
214
00:10:33,800 --> 00:10:35,840
And so now, as we just did,
215
00:10:35,840 --> 00:10:38,650
we set the position to 50%.
216
00:10:38,650 --> 00:10:42,150
And so what that does is to move this element
217
00:10:42,150 --> 00:10:46,620
by exactly 50% of the parent's containers height.
218
00:10:46,620 --> 00:10:47,960
All right?
219
00:10:47,960 --> 00:10:52,820
So for example, if the carousel had a height of 600 pixels,
220
00:10:52,820 --> 00:10:56,760
then this button would have moved down 300 pixels.
221
00:10:56,760 --> 00:11:00,740
So exactly 50% of the parent's container.
222
00:11:00,740 --> 00:11:03,890
And this is really important. Okay?
223
00:11:03,890 --> 00:11:05,940
However, as we see here,
224
00:11:05,940 --> 00:11:09,450
what it did was to basically move the top of the element
225
00:11:09,450 --> 00:11:13,290
exactly to the middle, but not the element itself.
226
00:11:13,290 --> 00:11:15,230
And so that's where the second part
227
00:11:15,230 --> 00:11:17,330
of this technique comes in.
228
00:11:17,330 --> 00:11:19,850
So this technique of vertically centering
229
00:11:19,850 --> 00:11:21,940
with absolute positioning.
230
00:11:21,940 --> 00:11:24,310
And so that second part is by using
231
00:11:24,310 --> 00:11:27,500
the transform property, once again.
232
00:11:27,500 --> 00:11:28,500
Now, in this case,
233
00:11:28,500 --> 00:11:31,310
we use transform not with scale,
234
00:11:31,310 --> 00:11:33,290
but with translating.
235
00:11:33,290 --> 00:11:35,220
And what translate does
236
00:11:35,220 --> 00:11:38,170
is to basically move the element around.
237
00:11:38,170 --> 00:11:40,840
Now, here we can specify the X value,
238
00:11:40,840 --> 00:11:43,180
which is basically horizontally,
239
00:11:43,180 --> 00:11:46,390
and the Y value, which is the second one,
240
00:11:46,390 --> 00:11:48,200
and so that is vertically.
241
00:11:48,200 --> 00:11:49,670
And in this example,
242
00:11:49,670 --> 00:11:52,810
I set that to minus 50%.
243
00:11:52,810 --> 00:11:55,030
And why minus 50?
244
00:11:55,030 --> 00:11:56,870
Well, because that will basically
245
00:11:56,870 --> 00:12:01,660
move the element exactly 50% of its height
246
00:12:01,660 --> 00:12:03,490
back to the top.
247
00:12:03,490 --> 00:12:07,880
And again, these 50% here in the transform property
248
00:12:07,880 --> 00:12:12,010
are actually 50% of the actual element's height.
249
00:12:12,010 --> 00:12:15,070
So not of the parent container's height.
250
00:12:15,070 --> 00:12:18,610
And that is completely different. Okay?
251
00:12:18,610 --> 00:12:20,393
And so the result of doing this
252
00:12:20,393 --> 00:12:25,000
is that now the element will be exactly centered vertically.
253
00:12:25,000 --> 00:12:28,770
So again, the translate property takes two values
254
00:12:28,770 --> 00:12:31,780
where the first one is basically horizontally
255
00:12:31,780 --> 00:12:34,670
and the second one is vertically.
256
00:12:34,670 --> 00:12:37,740
And so by specifying minus 50%,
257
00:12:37,740 --> 00:12:42,110
means that the element will move up because of the minus.
258
00:12:42,110 --> 00:12:47,030
And it will move up by exactly 50% of its actual height.
259
00:12:47,030 --> 00:12:49,810
And so by doing this, after the second step,
260
00:12:49,810 --> 00:12:53,020
it will be completely centered vertically.
261
00:12:53,020 --> 00:12:54,450
All right?
262
00:12:54,450 --> 00:12:56,600
So I hope that made sense,
263
00:12:56,600 --> 00:12:58,610
especially with this animation,
264
00:12:58,610 --> 00:13:00,363
and maybe we can play that again.
265
00:13:01,530 --> 00:13:03,810
So we start here,
266
00:13:03,810 --> 00:13:06,600
which will move the element down here.
267
00:13:06,600 --> 00:13:10,660
So again, 50% of the parent container's height.
268
00:13:10,660 --> 00:13:13,420
Then we add to translate, as I just explained,
269
00:13:13,420 --> 00:13:16,350
which will move it back 50%.
270
00:13:16,350 --> 00:13:17,470
Okay?
271
00:13:17,470 --> 00:13:19,520
And so let's now go back to code
272
00:13:19,520 --> 00:13:21,323
and actually implement this.
273
00:13:22,960 --> 00:13:25,160
Okay. So here we are back.
274
00:13:25,160 --> 00:13:28,830
And actually, let's put this here in the button left,
275
00:13:28,830 --> 00:13:30,853
so that we don't get too confused.
276
00:13:32,860 --> 00:13:35,120
Okay. So that looks the same.
277
00:13:35,120 --> 00:13:38,900
But now let's go back to our transform property.
278
00:13:38,900 --> 00:13:40,180
So transform.
279
00:13:40,180 --> 00:13:44,520
And remember, now we don't use scale like we did before,
280
00:13:44,520 --> 00:13:46,830
but we use translate.
281
00:13:46,830 --> 00:13:50,650
And here, again, we set the first one to zero by now,
282
00:13:50,650 --> 00:13:52,230
which is horizontally.
283
00:13:52,230 --> 00:13:56,070
And then vertically, we want minus 50%
284
00:13:56,070 --> 00:13:58,760
for the reasons that I just explained you.
285
00:13:58,760 --> 00:14:01,840
And so, take a look at this button now.
286
00:14:01,840 --> 00:14:04,040
And there we go.
287
00:14:04,040 --> 00:14:06,560
Now it is vertically centered using
288
00:14:06,560 --> 00:14:09,420
this absolute positioning technique.
289
00:14:09,420 --> 00:14:12,070
Great. So that's beautiful.
290
00:14:12,070 --> 00:14:13,390
But you might be wondering
291
00:14:13,390 --> 00:14:17,670
why we didn't simply use the power of flexbox for this.
292
00:14:17,670 --> 00:14:19,560
And the reason is that...
293
00:14:19,560 --> 00:14:23,150
Well, we actually don't this to be a flex element,
294
00:14:23,150 --> 00:14:24,740
that's the first thing.
295
00:14:24,740 --> 00:14:26,890
The second thing is that sometimes
296
00:14:26,890 --> 00:14:29,280
we actually want to position an element
297
00:14:29,280 --> 00:14:30,990
absolutely like this,
298
00:14:30,990 --> 00:14:34,150
and then it is important that you know this unique.
299
00:14:34,150 --> 00:14:36,210
And third is because,
300
00:14:36,210 --> 00:14:38,640
actually, if we want to use translate
301
00:14:38,640 --> 00:14:41,600
also horizontally, right?
302
00:14:41,600 --> 00:14:44,720
Because in this case, if we simply used flexbox,
303
00:14:44,720 --> 00:14:46,840
then actually this wouldn't work.
304
00:14:46,840 --> 00:14:48,440
First because, remember,
305
00:14:48,440 --> 00:14:50,860
it created all those extra gaps
306
00:14:50,860 --> 00:14:54,400
for all of these elements that we did not want.
307
00:14:54,400 --> 00:14:57,140
And then also because it would be impossible
308
00:14:57,140 --> 00:14:59,080
to place these elements,
309
00:14:59,080 --> 00:15:02,130
basically, outside of the container.
310
00:15:02,130 --> 00:15:04,543
Which is exactly what we're going to do now.
311
00:15:05,510 --> 00:15:07,140
Right?
312
00:15:07,140 --> 00:15:10,320
So what I mean here is that this translate,
313
00:15:10,320 --> 00:15:12,540
of course, is not only vertically,
314
00:15:12,540 --> 00:15:14,063
but also horizontally,
315
00:15:15,220 --> 00:15:18,030
So we can specify a value here.
316
00:15:18,030 --> 00:15:21,120
So let's experiment first with some other value.
317
00:15:21,120 --> 00:15:24,533
Let's say 10 pixels, just so you see how it works.
318
00:15:25,370 --> 00:15:29,173
And so what happens is that it moved 10 pixels to the side.
319
00:15:30,080 --> 00:15:31,210
Right?
320
00:15:31,210 --> 00:15:35,343
But what if we set it to 50%?
321
00:15:36,340 --> 00:15:40,310
Well then, basically, it will move half of its own width
322
00:15:40,310 --> 00:15:42,040
to the right side.
323
00:15:42,040 --> 00:15:44,210
So that's almost what we want,
324
00:15:44,210 --> 00:15:47,800
but we want it to move to the left side, right?
325
00:15:47,800 --> 00:15:50,690
And so we say minus 50%.
326
00:15:50,690 --> 00:15:52,660
And there you go.
327
00:15:52,660 --> 00:15:55,713
Now it is exactly where we want it to be.
328
00:15:56,740 --> 00:15:59,063
So right in the center here,
329
00:15:59,063 --> 00:16:03,040
basically vertically centered with this border here.
330
00:16:03,040 --> 00:16:05,570
So this end of the element,
331
00:16:05,570 --> 00:16:07,360
and to make that even more visible,
332
00:16:07,360 --> 00:16:10,403
let's add a box shadow here.
333
00:16:12,070 --> 00:16:13,330
Okay. So...
334
00:16:15,910 --> 00:16:18,910
Vertically, 12 pixels.
335
00:16:18,910 --> 00:16:20,910
Then let's blur it, 24.
336
00:16:20,910 --> 00:16:21,743
And once again,
337
00:16:21,743 --> 00:16:24,483
I'm just using these here very quickly.
338
00:16:26,450 --> 00:16:29,673
And with experience this will become easier for you.
339
00:16:32,390 --> 00:16:33,223
All right.
340
00:16:33,223 --> 00:16:36,470
And so now we can see that beautifully, right?
341
00:16:36,470 --> 00:16:38,883
It is really exactly at the center.
342
00:16:40,270 --> 00:16:41,810
Now we could, of course,
343
00:16:41,810 --> 00:16:45,810
also have done it completely without the transform.
344
00:16:45,810 --> 00:16:47,303
So if we did this,
345
00:16:48,180 --> 00:16:50,330
of course, it would look like this
346
00:16:50,330 --> 00:16:53,500
and we could then try to guess these values here,
347
00:16:53,500 --> 00:16:54,900
kind of manually.
348
00:16:54,900 --> 00:16:56,690
But the problem is that, again,
349
00:16:56,690 --> 00:16:59,650
these top and left values are not in relation
350
00:16:59,650 --> 00:17:03,460
to the element itself, but to the parent element.
351
00:17:03,460 --> 00:17:07,670
So that is really one of the main takeaways of this lecture.
352
00:17:07,670 --> 00:17:12,343
So in relation to parent element,
353
00:17:14,250 --> 00:17:16,810
so I'm actually writing that down here for you,
354
00:17:16,810 --> 00:17:20,787
and this is in relation to element itself.
355
00:17:22,750 --> 00:17:26,130
And so here we could now say minus one,
356
00:17:26,130 --> 00:17:27,973
25 pixels or something.
357
00:17:29,090 --> 00:17:31,570
And in this case, we do actually know the width
358
00:17:31,570 --> 00:17:32,760
of these elements.
359
00:17:32,760 --> 00:17:36,870
So we could have said, minus 20 pixels
360
00:17:36,870 --> 00:17:39,000
and then that would have worked.
361
00:17:39,000 --> 00:17:42,240
But usually that is actually not the case.
362
00:17:42,240 --> 00:17:44,590
And so that is over simplifying it.
363
00:17:44,590 --> 00:17:46,970
So usually, we would have to mess here manually
364
00:17:46,970 --> 00:17:50,500
with some pixels or even some percentage,
365
00:17:50,500 --> 00:17:51,930
which is even worse.
366
00:17:51,930 --> 00:17:54,143
Like 3%, for example.
367
00:17:55,360 --> 00:17:56,410
At the end, that is too much.
368
00:17:56,410 --> 00:17:59,173
So we would try 2%, which is not enough.
369
00:18:00,420 --> 00:18:03,063
And so, yeah. This is not a good idea.
370
00:18:04,230 --> 00:18:07,590
It is better to put these to some default,
371
00:18:07,590 --> 00:18:11,713
like zero and 50, and then use this.
372
00:18:12,651 --> 00:18:13,484
All right.
373
00:18:14,730 --> 00:18:16,967
Then here we need to do the same transform
374
00:18:16,967 --> 00:18:18,730
in the button right
375
00:18:18,730 --> 00:18:20,393
but in the opposite direction.
376
00:18:22,270 --> 00:18:25,180
So of course we need this top here as well.
377
00:18:25,180 --> 00:18:26,940
So let's put that...
378
00:18:26,940 --> 00:18:28,270
Well, let's copy it.
379
00:18:28,270 --> 00:18:30,820
Just so it's a bit easier for you to understand,
380
00:18:30,820 --> 00:18:34,720
but we could also have simply put it here into the button,
381
00:18:34,720 --> 00:18:37,320
which is the class that both of them have in common.
382
00:18:38,950 --> 00:18:42,780
But anyway, now it looks like this.
383
00:18:42,780 --> 00:18:43,770
And so in this case,
384
00:18:43,770 --> 00:18:46,580
we actually wanted to move to the right.
385
00:18:46,580 --> 00:18:49,103
And so here, this value needs to be positive.
386
00:18:50,470 --> 00:18:52,833
Okay. And there it is.
387
00:18:54,090 --> 00:18:57,310
So we have our buttons here completely positioned
388
00:18:57,310 --> 00:19:01,030
in the exact position where we wanted them to be.
389
00:19:01,030 --> 00:19:02,723
And so once again,
390
00:19:02,723 --> 00:19:05,853
that is a perfect use case for absolute positioning.
391
00:19:06,920 --> 00:19:09,790
Now let's turn this back on.
392
00:19:09,790 --> 00:19:12,713
So to put the text back to where it was.
393
00:19:14,020 --> 00:19:16,100
And also we need some...
394
00:19:16,100 --> 00:19:18,690
We want the cursor here to be a mouse
395
00:19:19,540 --> 00:19:20,463
on these buttons.
396
00:19:21,340 --> 00:19:22,950
So that's something I forgot.
397
00:19:22,950 --> 00:19:26,170
And it's a trick that we already used before.
398
00:19:26,170 --> 00:19:29,603
So cursor set to pointer.
399
00:19:30,630 --> 00:19:31,463
All right.
400
00:19:32,600 --> 00:19:35,460
So that looks almost the same.
401
00:19:35,460 --> 00:19:37,023
It is a little bit different.
402
00:19:38,100 --> 00:19:41,340
But that's... Well, because we use some different values.
403
00:19:41,340 --> 00:19:43,650
But what matters is that we are still missing
404
00:19:43,650 --> 00:19:45,550
these dots here.
405
00:19:45,550 --> 00:19:47,930
So these are basically also buttons
406
00:19:47,930 --> 00:19:52,107
and they are located also outside of this container.
407
00:19:52,107 --> 00:19:52,953
All right?
408
00:19:54,030 --> 00:19:57,040
So if it's outside of its own container,
409
00:19:57,040 --> 00:19:58,150
that looks, again,
410
00:19:58,150 --> 00:20:02,020
as if we will need some absolute positioning here.
411
00:20:02,020 --> 00:20:03,110
Right?
412
00:20:03,110 --> 00:20:07,573
And so, let's go ahead and now code this part very quickly.
413
00:20:08,860 --> 00:20:10,450
So right here at the very end,
414
00:20:10,450 --> 00:20:12,600
where these controls start,
415
00:20:12,600 --> 00:20:16,550
let's add some container element.
416
00:20:16,550 --> 00:20:17,763
Let's say some div,
417
00:20:19,380 --> 00:20:21,763
which I'm going to call the dots.
418
00:20:23,070 --> 00:20:26,020
And then let's put four button elements in there.
419
00:20:26,020 --> 00:20:29,080
So for these four elements.
420
00:20:29,080 --> 00:20:33,773
So the button with a class of dot.
421
00:20:35,890 --> 00:20:39,040
And now, what should we put in here?
422
00:20:39,040 --> 00:20:41,450
Well, we can simply leave it empty.
423
00:20:41,450 --> 00:20:43,420
But usually, it's a better practice
424
00:20:43,420 --> 00:20:45,830
to create an empty space.
425
00:20:45,830 --> 00:20:48,140
So something that looks like this.
426
00:20:48,140 --> 00:20:50,190
But remember that HTML actually
427
00:20:50,190 --> 00:20:52,950
ignores empty spaces like this.
428
00:20:52,950 --> 00:20:55,700
So instead of writing an empty space like this,
429
00:20:55,700 --> 00:21:00,090
it is a common technique to use an HTML entity for that.
430
00:21:00,090 --> 00:21:01,998
And that entity...
431
00:21:01,998 --> 00:21:03,750
So that entity that represents
432
00:21:03,750 --> 00:21:06,583
the empty space is NBSP like this.
433
00:21:09,190 --> 00:21:10,400
So you'll see it here.
434
00:21:10,400 --> 00:21:12,530
It's a non breaking space.
435
00:21:12,530 --> 00:21:14,493
That's what "NBSP" means.
436
00:21:16,220 --> 00:21:17,053
All right.
437
00:21:17,053 --> 00:21:19,870
So again, that's just in order to not leave
438
00:21:19,870 --> 00:21:21,830
this button completely empty,
439
00:21:21,830 --> 00:21:23,683
which is not a good idea usually.
440
00:21:25,750 --> 00:21:28,180
Okay, copy it four times.
441
00:21:28,180 --> 00:21:30,823
And then we need dots and dot.
442
00:21:38,410 --> 00:21:39,243
Okay.
443
00:21:39,243 --> 00:21:40,360
And let's start with these.
444
00:21:40,360 --> 00:21:42,570
Giving it some height.
445
00:21:42,570 --> 00:21:43,573
And some width.
446
00:21:45,110 --> 00:21:47,900
And individual styling here is not really important.
447
00:21:47,900 --> 00:21:50,210
For me, what matters most at this point
448
00:21:50,210 --> 00:21:54,193
is more the stuff about laying out the elements, actually.
449
00:21:55,040 --> 00:21:57,990
So again, since this is a button,
450
00:21:57,990 --> 00:22:00,040
we need to reset the background color
451
00:22:00,880 --> 00:22:02,950
or set it to something.
452
00:22:02,950 --> 00:22:04,533
So let's set it to white.
453
00:22:05,880 --> 00:22:07,850
That then it looks like we have
454
00:22:07,850 --> 00:22:10,593
some border going on here, right?
455
00:22:11,750 --> 00:22:16,350
So border and that is two pixel border.
456
00:22:16,350 --> 00:22:18,563
Solid and/or green.
457
00:22:20,550 --> 00:22:23,450
Okay. Let's check that out.
458
00:22:23,450 --> 00:22:24,920
And here it is.
459
00:22:24,920 --> 00:22:28,380
Now we cannot really see the border because it is green.
460
00:22:28,380 --> 00:22:31,700
And this whole dots element is of course now
461
00:22:31,700 --> 00:22:33,640
yet another flex item
462
00:22:33,640 --> 00:22:36,253
because we didn't yet position it absolutely.
463
00:22:37,820 --> 00:22:39,760
But let's do that a bit later
464
00:22:39,760 --> 00:22:42,480
and continue with styling the dots.
465
00:22:42,480 --> 00:22:45,020
So here, let's also make them round
466
00:22:45,020 --> 00:22:50,020
with a border radius of 50%
467
00:22:50,100 --> 00:22:53,903
and give it the cursor like this.
468
00:22:54,930 --> 00:22:55,813
Okay.
469
00:22:57,450 --> 00:22:58,550
All right.
470
00:22:58,550 --> 00:23:02,203
And now we need to also put them side by side, I guess.
471
00:23:03,100 --> 00:23:04,240
All right.
472
00:23:04,240 --> 00:23:05,570
So for that...
473
00:23:05,570 --> 00:23:09,270
Well, actually let's first position them absolutely.
474
00:23:09,270 --> 00:23:13,173
So position absolute.
475
00:23:15,110 --> 00:23:16,733
Okay. There they are.
476
00:23:18,060 --> 00:23:21,550
And now, of course, we want them to be in the center.
477
00:23:21,550 --> 00:23:25,000
So right here and then at the bottom for now.
478
00:23:25,000 --> 00:23:26,860
And so we will now, again,
479
00:23:26,860 --> 00:23:30,720
use the exact same technique that we used before.
480
00:23:30,720 --> 00:23:33,440
Only it being horizontally this time.
481
00:23:33,440 --> 00:23:37,490
But the technique itself works in the exact same way.
482
00:23:37,490 --> 00:23:40,730
So what I just explained you before in that slide.
483
00:23:40,730 --> 00:23:45,110
So this time, instead of setting the top to 50%,
484
00:23:45,110 --> 00:23:48,400
I will set the left to a 50%.
485
00:23:48,400 --> 00:23:50,840
So left, 50%.
486
00:23:50,840 --> 00:23:52,980
And so that will move, basically,
487
00:23:52,980 --> 00:23:56,410
the start of the element right to the middle
488
00:23:56,410 --> 00:23:58,250
of the parent container.
489
00:23:58,250 --> 00:24:01,750
Because, again, top and left use the dimensions
490
00:24:01,750 --> 00:24:04,293
of the parent element as the reference.
491
00:24:05,400 --> 00:24:06,233
Okay?
492
00:24:06,233 --> 00:24:10,197
But now, we use transform and then translate.
493
00:24:12,900 --> 00:24:15,730
And now the first value is the horizontal one.
494
00:24:15,730 --> 00:24:18,710
And so we move it back 50%,
495
00:24:18,710 --> 00:24:22,283
which, remember, is in relation to itself.
496
00:24:24,700 --> 00:24:25,750
All right.
497
00:24:25,750 --> 00:24:28,493
And so now it's in the center.
498
00:24:30,600 --> 00:24:31,720
Nice.
499
00:24:31,720 --> 00:24:33,763
Let's also put it at the very bottom.
500
00:24:36,510 --> 00:24:38,060
Bottom, zero.
501
00:24:38,060 --> 00:24:39,600
There we go.
502
00:24:39,600 --> 00:24:41,650
And now let's move it down.
503
00:24:41,650 --> 00:24:42,960
And so for that,
504
00:24:42,960 --> 00:24:45,683
I really like to use the transform property.
505
00:24:46,580 --> 00:24:51,580
So again, I like to put these here to zero or to 50%.
506
00:24:51,980 --> 00:24:55,610
Or some really round value like that.
507
00:24:55,610 --> 00:24:57,480
And then here we can use translate
508
00:24:57,480 --> 00:25:00,210
to position it exactly where we want.
509
00:25:00,210 --> 00:25:02,230
So let's say 32 pixels,
510
00:25:02,230 --> 00:25:04,710
which is one of our values.
511
00:25:04,710 --> 00:25:07,083
And yeah, that looks nice.
512
00:25:08,810 --> 00:25:12,070
And so now let's actually put some space between them.
513
00:25:12,070 --> 00:25:16,040
And to do that, I will make this a flex container
514
00:25:16,040 --> 00:25:17,883
and declare some gap on it.
515
00:25:19,460 --> 00:25:21,040
Okay.
516
00:25:21,040 --> 00:25:24,800
And if this is all going a little bit too fast for you,
517
00:25:24,800 --> 00:25:29,030
especially the constant use of the flex property,
518
00:25:29,030 --> 00:25:34,030
then, of course, feel 100% free to maybe review that part.
519
00:25:34,090 --> 00:25:37,030
So maybe the part about flexbox.
520
00:25:37,030 --> 00:25:41,510
But anyway, let's not define some quick gap here.
521
00:25:41,510 --> 00:25:42,653
12 pixels.
522
00:25:43,580 --> 00:25:45,780
All right. Beautiful.
523
00:25:45,780 --> 00:25:48,980
And with this, we might be...
524
00:25:48,980 --> 00:25:50,440
Well, almost done.
525
00:25:50,440 --> 00:25:55,010
So the first one here, still needs to be green.
526
00:25:55,010 --> 00:25:57,543
So let's give the first one a special class.
527
00:25:58,730 --> 00:26:00,850
So maybe that's yet another trend
528
00:26:00,850 --> 00:26:04,050
that you are starting to see.
529
00:26:04,050 --> 00:26:06,780
So that we have one class for everything.
530
00:26:06,780 --> 00:26:09,610
And then we have specialized classes,
531
00:26:09,610 --> 00:26:13,820
which give some of them, basically, some additional power.
532
00:26:13,820 --> 00:26:16,680
And in this case, that additional power will be
533
00:26:16,680 --> 00:26:18,483
that green background color.
534
00:26:20,900 --> 00:26:21,943
There we go.
535
00:26:23,032 --> 00:26:27,250
And that looks basically the same.
536
00:26:27,250 --> 00:26:29,080
Just again, some spacing that's different.
537
00:26:29,080 --> 00:26:31,120
The content is also different.
538
00:26:31,120 --> 00:26:33,220
But besides that...
539
00:26:33,220 --> 00:26:35,683
Here we actually need to fix a bit the padding.
540
00:26:36,580 --> 00:26:39,260
And I think that's something I mentioned in the beginning.
541
00:26:39,260 --> 00:26:40,950
So let's do that.
542
00:26:40,950 --> 00:26:42,360
And also that's an opportunity,
543
00:26:42,360 --> 00:26:45,133
actually, to you show something else.
544
00:26:46,010 --> 00:26:48,690
So here, of course, we could simply write,
545
00:26:48,690 --> 00:26:51,420
padding to the right.
546
00:26:51,420 --> 00:26:54,763
Should be like 48 pixels.
547
00:26:55,690 --> 00:26:56,950
So that's better.
548
00:26:56,950 --> 00:26:59,510
Let's just remove that last word there.
549
00:26:59,510 --> 00:27:02,090
I don't like the way that looks.
550
00:27:02,090 --> 00:27:03,343
Even this one maybe.
551
00:27:04,640 --> 00:27:05,473
Cool.
552
00:27:07,470 --> 00:27:08,303
Yeah.
553
00:27:08,303 --> 00:27:09,989
But anyway, going back here,
554
00:27:09,989 --> 00:27:11,800
this of course works
555
00:27:11,800 --> 00:27:15,080
because we set the general padding to 32.
556
00:27:15,080 --> 00:27:18,310
Then we override the padding on the left to 86.
557
00:27:18,310 --> 00:27:22,480
And then we override the padding to the right to 84.
558
00:27:22,480 --> 00:27:25,890
However, we can set that all in one go.
559
00:27:25,890 --> 00:27:29,390
So remember how the padding property has a shorthand,
560
00:27:29,390 --> 00:27:33,750
which allows us to set the top and bottom in the first value
561
00:27:33,750 --> 00:27:37,810
and the left and right in the second value, right?
562
00:27:37,810 --> 00:27:38,763
So like this.
563
00:27:40,220 --> 00:27:43,940
So this would be top and bottom and this left and right.
564
00:27:43,940 --> 00:27:47,470
However, we can also take that further.
565
00:27:47,470 --> 00:27:50,000
So we can specify four values,
566
00:27:50,000 --> 00:27:53,550
and those four values will then be top, right,
567
00:27:53,550 --> 00:27:55,520
bottom, and left.
568
00:27:55,520 --> 00:27:59,060
So basically, clockwise starting at the top.
569
00:27:59,060 --> 00:28:00,990
So let me take out all of this
570
00:28:01,860 --> 00:28:04,113
and replace it with just one declaration.
571
00:28:05,440 --> 00:28:07,620
Again, it starts at the top
572
00:28:07,620 --> 00:28:11,780
and then goes clockwise around the four borders, basically,
573
00:28:11,780 --> 00:28:14,270
the four sides of the box.
574
00:28:14,270 --> 00:28:17,290
So in the top, we want 32 pixels.
575
00:28:17,290 --> 00:28:20,660
On the right, we want 48 pixels.
576
00:28:20,660 --> 00:28:22,890
And the bottom, 32 pixels.
577
00:28:22,890 --> 00:28:24,603
And to the left, 48.
578
00:28:25,620 --> 00:28:27,150
Give it a save.
579
00:28:27,150 --> 00:28:32,150
And that is wrong because actually on the left, it is 86.
580
00:28:32,900 --> 00:28:35,333
So this one here.
581
00:28:37,770 --> 00:28:39,960
And so now it is correct.
582
00:28:39,960 --> 00:28:44,120
And so now we did actually finish this small project.
583
00:28:44,120 --> 00:28:46,830
It was a bit bigger than I thought it would be.
584
00:28:46,830 --> 00:28:49,160
But still, I think it was fun.
585
00:28:49,160 --> 00:28:51,990
And the final result looks fantastic.
586
00:28:51,990 --> 00:28:55,110
And we did learn a lot of things here.
587
00:28:55,110 --> 00:28:56,740
Actually, starting with this.
588
00:28:56,740 --> 00:28:59,120
So this is something new.
589
00:28:59,120 --> 00:29:01,600
Then we learned how to scale an image.
590
00:29:01,600 --> 00:29:04,900
And then finally, we learned this very important technique
591
00:29:04,900 --> 00:29:08,210
where we could place an element anywhere that we wanted
592
00:29:08,210 --> 00:29:12,350
by using combination of absolute positioning
593
00:29:12,350 --> 00:29:14,903
and transform with translate.
594
00:29:15,770 --> 00:29:18,020
So maybe experiment a little bit
595
00:29:18,020 --> 00:29:19,950
with the transform property,
596
00:29:19,950 --> 00:29:21,780
with the translate function.
597
00:29:21,780 --> 00:29:23,700
So try different values here
598
00:29:23,700 --> 00:29:26,750
for horizontal and vertical placement.
599
00:29:26,750 --> 00:29:31,170
And that will then help you solidify this new knowledge.
600
00:29:31,170 --> 00:29:34,330
And then, I see you back here for our next component,
601
00:29:34,330 --> 00:29:36,630
which is going to be a table.
602
00:29:36,630 --> 00:29:39,693
And I promise, that's going to be a little bit simpler.
41802
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.