Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,117 --> 00:00:04,500
Welcome back to our last lecture here,
2
00:00:04,500 --> 00:00:08,160
and to the last media query that we need to implement
3
00:00:08,160 --> 00:00:11,510
in order to now finally make our website
4
00:00:11,510 --> 00:00:13,913
also respond to smaller phones.
5
00:00:15,600 --> 00:00:17,800
Now, many times for mobile,
6
00:00:17,800 --> 00:00:21,683
I like to use the media query at about 600 pixels.
7
00:00:22,580 --> 00:00:24,980
However, we just did a media query
8
00:00:24,980 --> 00:00:28,280
at about 700 pixels, I think.
9
00:00:28,280 --> 00:00:31,320
And by the way, there is something really nice here
10
00:00:31,320 --> 00:00:34,540
in this device view that I didn't show you yet.
11
00:00:34,540 --> 00:00:38,010
Which is that you can click here on this menu,
12
00:00:38,010 --> 00:00:41,790
and then here, show media queries.
13
00:00:41,790 --> 00:00:44,800
And so then it adds that view here at the top,
14
00:00:44,800 --> 00:00:48,043
which will show us exactly what media queries we have.
15
00:00:49,020 --> 00:00:50,890
So this is the ones that we added,
16
00:00:50,890 --> 00:00:52,580
and we can then click on them
17
00:00:52,580 --> 00:00:55,470
and it will then move our screen there.
18
00:00:55,470 --> 00:00:58,403
So exactly to that position of that media query.
19
00:00:59,560 --> 00:01:02,330
So 75m is 1200,
20
00:01:02,330 --> 00:01:04,910
then the next one was 944,
21
00:01:04,910 --> 00:01:08,480
and then the one that we implemented in the last lecture
22
00:01:08,480 --> 00:01:12,440
was this one here, so at 704 pixels.
23
00:01:12,440 --> 00:01:13,440
And so that's
24
00:01:13,440 --> 00:01:14,950
I don't think there's a need
25
00:01:14,950 --> 00:01:18,620
to implement the next one at 600.
26
00:01:18,620 --> 00:01:21,580
So that's just a 100 pixels less.
27
00:01:21,580 --> 00:01:25,203
And so at this point, the design still looks quite nice.
28
00:01:27,466 --> 00:01:30,260
All right, so visually, everything is okay,
29
00:01:30,260 --> 00:01:32,640
so no need to add another one.
30
00:01:32,640 --> 00:01:36,363
So let's maybe jump another 100 pixels to 500,
31
00:01:38,370 --> 00:01:39,570
okay,
32
00:01:39,570 --> 00:01:42,090
And once again, I'm doing all this here
33
00:01:42,090 --> 00:01:45,200
basically so that you can follow my methodology,
34
00:01:45,200 --> 00:01:47,020
and so that you can learn, basically,
35
00:01:47,020 --> 00:01:48,680
the entire thought process
36
00:01:48,680 --> 00:01:51,290
that goes into choosing these break points.
37
00:01:51,290 --> 00:01:54,030
Because there is something really, really important
38
00:01:54,030 --> 00:01:57,240
once you will implement your own designs.
39
00:01:57,240 --> 00:02:01,970
But anyway, let's now inspect this here at 500 pixels.
40
00:02:01,970 --> 00:02:04,820
And here, there is some problem.
41
00:02:04,820 --> 00:02:07,320
So these logos are way too big.
42
00:02:07,320 --> 00:02:11,063
So this last one is already even moving out of the page.
43
00:02:12,170 --> 00:02:15,760
Then here, this image is starting to get really small,
44
00:02:15,760 --> 00:02:19,130
and here the content is really big.
45
00:02:19,130 --> 00:02:21,660
So the visual balance here in this section
46
00:02:21,660 --> 00:02:23,940
is not really nice anymore,
47
00:02:23,940 --> 00:02:25,483
and the same here and here.
48
00:02:26,407 --> 00:02:29,650
And here, once again, the cart is getting really small
49
00:02:31,170 --> 00:02:33,623
and while here it still looks okay.
50
00:02:34,630 --> 00:02:38,230
Here maybe the gallery could be a little bit bigger
51
00:02:38,230 --> 00:02:41,560
at this point, and also here,
52
00:02:41,560 --> 00:02:44,373
this looks a little bit bad right now.
53
00:02:45,430 --> 00:02:49,060
So even or button here, already wrapped in three lines
54
00:02:49,060 --> 00:02:50,700
and here also in two lines,
55
00:02:50,700 --> 00:02:53,680
which makes this icon here really small.
56
00:02:53,680 --> 00:02:55,303
So that's not good at all.
57
00:02:57,180 --> 00:02:59,140
And also here.
58
00:02:59,140 --> 00:03:01,330
So here there is not really space for having
59
00:03:01,330 --> 00:03:03,120
these two columns anymore.
60
00:03:03,120 --> 00:03:06,203
And so that's yet another thing that we need to fix.
61
00:03:07,720 --> 00:03:09,463
Right, so,
62
00:03:11,820 --> 00:03:16,080
so basically what this means is that at 500 pixels,
63
00:03:16,080 --> 00:03:19,080
the design is already too bad because if we set
64
00:03:19,080 --> 00:03:23,870
a break point at 500, for example, then at 506,
65
00:03:23,870 --> 00:03:27,470
let's say, the design would still be like this.
66
00:03:27,470 --> 00:03:32,090
So it would still look similar and it would still be bad.
67
00:03:32,090 --> 00:03:33,220
Right?
68
00:03:33,220 --> 00:03:37,090
So let's try to find something in between here,
69
00:03:37,090 --> 00:03:39,900
like 550 pixels.
70
00:03:39,900 --> 00:03:42,513
So while it is still not ideal,
71
00:03:43,950 --> 00:03:45,973
I think it's a bit more acceptable.
72
00:03:47,460 --> 00:03:50,550
So here it is still at the text on one line,
73
00:03:50,550 --> 00:03:53,430
here the images are quite a lot bigger than before,
74
00:03:53,430 --> 00:03:57,330
and here at least the logo still fit on the page.
75
00:03:57,330 --> 00:04:01,683
So let's set our break point at 550, approximately.
76
00:04:04,890 --> 00:04:07,853
And of course actually out side of this.
77
00:04:09,520 --> 00:04:12,703
So add media max width,
78
00:04:14,610 --> 00:04:17,800
and let's do 550 divided by 16
79
00:04:18,965 --> 00:04:22,313
and here I'm going to round it actually to just 34.
80
00:04:23,260 --> 00:04:28,220
So that will then be 544 pixels.
81
00:04:28,220 --> 00:04:29,053
All right.
82
00:04:30,110 --> 00:04:31,930
So 34 M
83
00:04:35,440 --> 00:04:38,563
and then quickly getting this comment here.
84
00:04:43,340 --> 00:04:47,630
So below 544 pixels,
85
00:04:47,630 --> 00:04:50,053
which is four phones.
86
00:04:51,040 --> 00:04:54,980
Now okay, So from now on what we will do
87
00:04:54,980 --> 00:04:58,830
is to have all the grids in just one column.
88
00:04:58,830 --> 00:05:02,450
So there will no longer be multiple columns because now we
89
00:05:02,450 --> 00:05:04,763
don't have enough space for that anymore.
90
00:05:05,840 --> 00:05:06,840
So here,
91
00:05:06,840 --> 00:05:10,190
what we did in the previous media query was to take the two
92
00:05:10,190 --> 00:05:13,860
columns and four columns and transform them into two.
93
00:05:13,860 --> 00:05:16,040
And so again, now it's time to change
94
00:05:16,040 --> 00:05:18,610
that into just one column and the
95
00:05:18,610 --> 00:05:22,803
same, of course, for E D grid that has two columns.
96
00:05:26,730 --> 00:05:28,030
All right.
97
00:05:28,030 --> 00:05:30,740
So that will already make a big difference.
98
00:05:30,740 --> 00:05:32,630
And since we're working on the grid,
99
00:05:32,630 --> 00:05:37,420
let's also dramatically decrease the gap.
100
00:05:37,420 --> 00:05:39,520
So the vertically gap in this case,
101
00:05:39,520 --> 00:05:43,910
because that's going to be the only gap that's left now.
102
00:05:43,910 --> 00:05:45,440
So this is actually grid
103
00:05:47,910 --> 00:05:52,323
row-gap, and let's say 4.8 REM.
104
00:05:53,590 --> 00:05:55,623
And so let's go check it out.
105
00:06:00,090 --> 00:06:03,110
So you see that here, we already have the new media query,
106
00:06:03,110 --> 00:06:07,470
so we can click there and here, of course, for now,
107
00:06:07,470 --> 00:06:08,570
things are similar
108
00:06:11,160 --> 00:06:15,440
and well, this doesn't seem to really have changed.
109
00:06:15,440 --> 00:06:16,313
Let me reload.
110
00:06:17,250 --> 00:06:20,623
Oh and, actually I think I didn't even change.
111
00:06:21,620 --> 00:06:22,453
Yeah.
112
00:06:22,453 --> 00:06:25,010
So of course this should be 1fr,
113
00:06:25,010 --> 00:06:26,980
it's actually just write 1fr then
114
00:06:29,360 --> 00:06:31,453
and yeah, there we go.
115
00:06:32,930 --> 00:06:33,763
All right.
116
00:06:33,763 --> 00:06:36,870
Now the images are huge here and they're also not in the
117
00:06:36,870 --> 00:06:40,760
right order anymore because basically what we want is the
118
00:06:40,760 --> 00:06:44,350
image to be first, just like here.
119
00:06:44,350 --> 00:06:47,110
So first the image then the text.
120
00:06:47,110 --> 00:06:50,140
But since previously we had that Z pattern.
121
00:06:50,140 --> 00:06:54,120
This is the order of the elements now in the HTML.
122
00:06:54,120 --> 00:06:56,150
So we will need to fix that.
123
00:06:56,150 --> 00:06:59,470
But first let's take a look at all of this
124
00:06:59,470 --> 00:07:02,270
and indeed it looks now very big,
125
00:07:02,270 --> 00:07:06,400
but it will be enough to just reduce this a tiny bit and
126
00:07:06,400 --> 00:07:08,963
immediately it will start looking okay again.
127
00:07:10,860 --> 00:07:15,240
All right, so there's a ton of space here now.
128
00:07:15,240 --> 00:07:20,240
And so, so there's a ton of space here now, everywhere,
129
00:07:20,610 --> 00:07:25,610
but again, let's say we are at like something like 420.
130
00:07:27,320 --> 00:07:29,943
And so then suddenly it does look okay.
131
00:07:31,350 --> 00:07:33,380
Right, except for this one here,
132
00:07:33,380 --> 00:07:37,340
because this grid is not one of those that we just changed.
133
00:07:37,340 --> 00:07:40,180
So here we will need to do that manually.
134
00:07:40,180 --> 00:07:44,203
But for now what matters is, yeah, that this is now better.
135
00:07:45,520 --> 00:07:48,253
So the images also make a lot more sense now here,
136
00:07:49,100 --> 00:07:53,240
but yeah, let's now change things one by one.
137
00:07:53,240 --> 00:07:56,360
And I'm going to start with removing a lot of the spacing
138
00:07:56,360 --> 00:07:57,713
here in the hero.
139
00:07:58,650 --> 00:08:01,620
So let's say that we make this even smaller.
140
00:08:01,620 --> 00:08:03,080
For example, something like
141
00:08:03,080 --> 00:08:06,410
the iPhone X will look like this.
142
00:08:06,410 --> 00:08:10,540
And so then we have way too much space here on the sides,
143
00:08:10,540 --> 00:08:11,610
right?
144
00:08:11,610 --> 00:08:15,880
So that space is because way back we added that.
145
00:08:15,880 --> 00:08:17,973
I think it was here in this media query.
146
00:08:18,840 --> 00:08:22,060
Oh, and I cannot click it because if I want to click it,
147
00:08:22,060 --> 00:08:24,413
I need to change back here to responsive.
148
00:08:26,640 --> 00:08:29,800
So yeah, we added that huge space back here,
149
00:08:29,800 --> 00:08:33,620
but now down here, it is too much.
150
00:08:33,620 --> 00:08:35,743
And so we need to override that again.
151
00:08:37,130 --> 00:08:39,310
So let's maybe work at this width here,
152
00:08:39,310 --> 00:08:42,330
which is kind of representative of many phones.
153
00:08:42,330 --> 00:08:45,460
So many phones are usually around this.
154
00:08:45,460 --> 00:08:47,953
So between like 350 and 450.
155
00:08:49,980 --> 00:08:51,690
Okay, so again,
156
00:08:51,690 --> 00:08:54,373
removing now a lot of the spacing that we have here.
157
00:08:57,730 --> 00:09:01,233
So let's actually see what we did back then.
158
00:09:02,970 --> 00:09:05,133
So we had the hero,
159
00:09:06,700 --> 00:09:09,460
so let's just grab that and then override
160
00:09:10,620 --> 00:09:12,793
what we want to change in this situation.
161
00:09:13,960 --> 00:09:16,680
So this here of course will stay the same.
162
00:09:16,680 --> 00:09:19,390
We can also leave the gap, I think,
163
00:09:19,390 --> 00:09:23,500
but depending let's put it actually back to 3.2,
164
00:09:23,500 --> 00:09:24,933
which is what we had before.
165
00:09:26,600 --> 00:09:27,433
Okay.
166
00:09:28,730 --> 00:09:30,780
Now I'm not sure if that actually changed
167
00:09:32,180 --> 00:09:35,490
but here it is actually quite visible that it did change.
168
00:09:35,490 --> 00:09:38,603
So here the space is now way less than it was before.
169
00:09:42,750 --> 00:09:44,740
And here, it becomes even more visible,
170
00:09:44,740 --> 00:09:47,233
once we reach this point here.
171
00:09:50,990 --> 00:09:53,840
Now there's also way too much vertical space
172
00:09:53,840 --> 00:09:56,280
like here and here.
173
00:09:56,280 --> 00:09:59,650
So let's remove that as well, but that
174
00:09:59,650 --> 00:10:02,060
I think we didn't touch before.
175
00:10:02,060 --> 00:10:04,830
So let's come back here to the top
176
00:10:05,730 --> 00:10:07,333
where that section actually is.
177
00:10:09,050 --> 00:10:10,940
So here we are.
178
00:10:10,940 --> 00:10:12,293
So section hero,
179
00:10:15,580 --> 00:10:18,760
of course the background color should stay the same.
180
00:10:18,760 --> 00:10:23,300
And now I will just basically change both two half
181
00:10:23,300 --> 00:10:27,285
so 2.4 there, and 4.8
182
00:10:27,285 --> 00:10:30,430
maybe that's a little bit too, a little.
183
00:10:30,430 --> 00:10:32,590
So the next one is 6.4.
184
00:10:33,730 --> 00:10:34,563
Okay.
185
00:10:35,820 --> 00:10:37,293
So that's better as well.
186
00:10:38,190 --> 00:10:39,790
The same thing here.
187
00:10:39,790 --> 00:10:43,630
So again, judging now on a real phone,
188
00:10:43,630 --> 00:10:45,410
that looks quite decent.
189
00:10:45,410 --> 00:10:49,110
So now it is all the content fits here vertically.
190
00:10:49,110 --> 00:10:52,200
There's just some problem here with the button.
191
00:10:52,200 --> 00:10:55,920
And so let me also fix that as well.
192
00:10:55,920 --> 00:10:58,840
So the button right now has a little bit too much space
193
00:10:58,840 --> 00:11:00,490
maybe here on the sides.
194
00:11:00,490 --> 00:11:04,720
And also I think it's probably not high enough.
195
00:11:04,720 --> 00:11:06,020
So on mobile phones,
196
00:11:06,020 --> 00:11:09,910
we really need to make sure that buttons are big enough so
197
00:11:09,910 --> 00:11:13,210
that we can actually tap them easily on phones.
198
00:11:13,210 --> 00:11:14,943
So let's change that,
199
00:11:16,670 --> 00:11:19,070
right here in the general
200
00:11:19,070 --> 00:11:20,570
is where we have four buttons.
201
00:11:24,710 --> 00:11:26,873
So let's grab this code here.
202
00:11:32,210 --> 00:11:36,403
And so let's actually increase the vertical padding to 2.4.
203
00:11:37,750 --> 00:11:41,380
Let's say, and then vertically, we need a lot less.
204
00:11:41,380 --> 00:11:43,393
So let's say half.
205
00:11:44,400 --> 00:11:46,490
So just like this.
206
00:11:46,490 --> 00:11:50,530
And now they do again fit side by side and they are also
207
00:11:50,530 --> 00:11:54,143
bigger and which will make them easier to tap.
208
00:11:55,450 --> 00:11:57,310
All right, now just the image here.
209
00:11:57,310 --> 00:11:59,710
Maybe it's a bit too small now,
210
00:11:59,710 --> 00:12:02,893
so let's increase the width right there.
211
00:12:08,810 --> 00:12:11,283
So I think we had changed this already before.
212
00:12:13,250 --> 00:12:15,360
But we need to override that again
213
00:12:15,360 --> 00:12:17,783
and here of course, hero image.
214
00:12:19,010 --> 00:12:20,623
So that will fix that.
215
00:12:21,680 --> 00:12:23,610
Yup, that's a bit nicer.
216
00:12:23,610 --> 00:12:26,010
And now let's talk about these logos.
217
00:12:26,010 --> 00:12:28,210
So of course there are way too big.
218
00:12:28,210 --> 00:12:31,830
So now this one and this one do no longer fit.
219
00:12:31,830 --> 00:12:33,453
So let's decrease that.
220
00:12:35,840 --> 00:12:39,540
And again, this we already did before,
221
00:12:39,540 --> 00:12:42,060
but now we need to make them even smaller
222
00:12:42,060 --> 00:12:45,293
at a height of 1.2 REM.
223
00:12:46,480 --> 00:12:48,310
So really small.
224
00:12:48,310 --> 00:12:50,693
And now they fit just nice.
225
00:12:52,010 --> 00:12:56,893
Even if the phone would be only like 300 pixels wide.
226
00:12:59,630 --> 00:13:03,080
All right, let's, again stay at
227
00:13:03,080 --> 00:13:08,080
something like 400 and yeah, let's move on here.
228
00:13:08,230 --> 00:13:12,320
And so now we need to switch basically this row with this
229
00:13:12,320 --> 00:13:15,370
row right here, because of course, remember that
230
00:13:15,370 --> 00:13:20,213
each of these is basically its own row, right?
231
00:13:21,470 --> 00:13:24,800
So we can see that nicely if we turn on the grid,
232
00:13:24,800 --> 00:13:25,733
then here we go.
233
00:13:29,510 --> 00:13:33,030
So basically what I'm going to do now is to manually select
234
00:13:33,030 --> 00:13:34,790
this element here.
235
00:13:34,790 --> 00:13:37,313
So this row, and then make it the first row.
236
00:13:38,340 --> 00:13:41,690
Then these two here are still correct.
237
00:13:41,690 --> 00:13:44,923
And then also I will change this one here with this one.
238
00:13:46,382 --> 00:13:47,215
Okay.
239
00:13:49,520 --> 00:13:52,563
So, back in our HTML,
240
00:13:56,140 --> 00:14:00,180
I could now add a new class to these elements
241
00:14:00,180 --> 00:14:01,713
that I want to select now.
242
00:14:02,570 --> 00:14:06,280
So in particular, this step image box,
243
00:14:06,280 --> 00:14:10,343
but instead I will simply use the nth child pseudo class.
244
00:14:11,200 --> 00:14:12,820
Okay.
245
00:14:12,820 --> 00:14:17,820
So again, this year is one of the rows of this grid, right?
246
00:14:19,570 --> 00:14:22,560
And so I will now select this one
247
00:14:26,210 --> 00:14:29,463
and I can then say nth child number two.
248
00:14:30,770 --> 00:14:34,400
And now here it is number two and not number one,
249
00:14:34,400 --> 00:14:39,250
because this is actually exactly the second child of this
250
00:14:39,250 --> 00:14:41,260
element right here.
251
00:14:41,260 --> 00:14:45,380
So this number here does refer to the number of the children
252
00:14:45,380 --> 00:14:49,240
of the element and not of the number of the children
253
00:14:49,240 --> 00:14:51,790
that has this class here.
254
00:14:51,790 --> 00:14:52,623
All right.
255
00:14:53,740 --> 00:14:58,550
So indeed, this one here is the first that has this class.
256
00:14:58,550 --> 00:15:03,300
Right, but it is in fact, the second child of the container.
257
00:15:03,300 --> 00:15:05,280
So of this element right here.
258
00:15:05,280 --> 00:15:09,390
And so therefore we need to write the number two here,
259
00:15:09,390 --> 00:15:12,653
even though for the selector, we still need this.
260
00:15:13,690 --> 00:15:15,930
Okay, so that's a bit confusing.
261
00:15:15,930 --> 00:15:19,200
I know, but that is just how it works.
262
00:15:19,200 --> 00:15:22,350
So you just need to keep in mind that this number here is
263
00:15:22,350 --> 00:15:27,350
the actual basically order of the child in the container.
264
00:15:27,500 --> 00:15:30,623
So it has nothing to do with the class name.
265
00:15:31,930 --> 00:15:33,693
Okay, but anyway,
266
00:15:35,520 --> 00:15:40,310
here, what I want to do is to make this the first row.
267
00:15:40,310 --> 00:15:43,940
So basically move this year into the first row.
268
00:15:43,940 --> 00:15:48,663
And so that does indeed fix it.
269
00:15:50,330 --> 00:15:51,580
Right?
270
00:15:51,580 --> 00:15:54,367
And now I just need to select this last one
271
00:15:54,367 --> 00:15:56,373
and move it up, also one.
272
00:15:58,090 --> 00:15:58,923
So,
273
00:16:02,130 --> 00:16:05,120
that is the sixth child.
274
00:16:05,120 --> 00:16:08,260
And so right now it is in grid row number six.
275
00:16:08,260 --> 00:16:10,740
And if I want to move that up one,
276
00:16:10,740 --> 00:16:12,173
I can just write five.
277
00:16:13,730 --> 00:16:14,593
All right.
278
00:16:15,450 --> 00:16:17,100
And there it is.
279
00:16:17,100 --> 00:16:19,820
So that was switched, and all the other elements
280
00:16:19,820 --> 00:16:23,020
they are of course, simply laid out automatically
281
00:16:23,020 --> 00:16:24,893
according to their source order.
282
00:16:26,160 --> 00:16:27,770
All right.
283
00:16:27,770 --> 00:16:30,450
Now the thing here is that the spacing
284
00:16:30,450 --> 00:16:32,210
is now a bit ambiguous.
285
00:16:32,210 --> 00:16:36,810
So basically the spacing between the image and the number
286
00:16:36,810 --> 00:16:39,850
two here is the same as the spacing between the image
287
00:16:39,850 --> 00:16:41,790
and a previous step.
288
00:16:41,790 --> 00:16:44,370
And so that doesn't make a lot of sense.
289
00:16:44,370 --> 00:16:46,270
So instead of course, this image
290
00:16:46,270 --> 00:16:49,693
should be closer to this number where it belongs to.
291
00:16:50,740 --> 00:16:53,860
And the same for this one, and the same for this one.
292
00:16:53,860 --> 00:16:55,940
So it's sitting here at the middle and
293
00:16:55,940 --> 00:16:58,300
that doesn't make a lot of sense.
294
00:16:58,300 --> 00:17:03,300
Now we can't change the gap selectively in just some places.
295
00:17:03,400 --> 00:17:06,800
Right, so the gap property applies everywhere,
296
00:17:06,800 --> 00:17:09,143
but we can do a small trick.
297
00:17:10,020 --> 00:17:13,023
So we can select all of these boxes here.
298
00:17:14,120 --> 00:17:16,283
So basically all of these image boxes.
299
00:17:17,860 --> 00:17:21,900
So, well like this one here
300
00:17:21,900 --> 00:17:24,500
and then move it down just a little bit.
301
00:17:24,500 --> 00:17:27,543
So using transform with translate.
302
00:17:30,710 --> 00:17:32,650
So step-image
303
00:17:34,940 --> 00:17:37,810
parks, and now of course we want to select
304
00:17:37,810 --> 00:17:41,200
all of them and so transform
305
00:17:42,150 --> 00:17:44,430
and then translate.
306
00:17:44,430 --> 00:17:47,570
And again, translate is simply the easiest way
307
00:17:47,570 --> 00:17:49,290
of moving elements around
308
00:17:49,290 --> 00:17:53,000
without affecting the rest of the elements around it.
309
00:17:53,000 --> 00:17:56,440
So we want to translate it vertically.
310
00:17:56,440 --> 00:18:01,223
And so that's the Y direction and let's do 24 pixels.
311
00:18:03,790 --> 00:18:05,010
Okay.
312
00:18:05,010 --> 00:18:07,600
And indeed that is a lot better.
313
00:18:07,600 --> 00:18:09,740
So it's now closer here to number
314
00:18:11,430 --> 00:18:14,630
and yeah, that looks just perfect.
315
00:18:14,630 --> 00:18:18,160
We could even align all of the thing here to the left maybe,
316
00:18:18,160 --> 00:18:19,990
but I think that then it would look
317
00:18:19,990 --> 00:18:21,850
strange with the circles.
318
00:18:21,850 --> 00:18:24,623
So let's just leave it like this.
319
00:18:25,570 --> 00:18:26,890
Okay.
320
00:18:26,890 --> 00:18:29,573
So moving down here, everything looks good,
321
00:18:31,000 --> 00:18:34,930
but then it's also time to make this one here actually
322
00:18:34,930 --> 00:18:36,303
with just one column.
323
00:18:37,310 --> 00:18:41,210
So this one still has two columns because it is not
324
00:18:41,210 --> 00:18:43,470
one of these grids here.
325
00:18:43,470 --> 00:18:46,940
So we did this one manually and therefore
326
00:18:46,940 --> 00:18:49,053
that's why this didn't get affected.
327
00:18:50,940 --> 00:18:54,720
So let's check out what this one is called
328
00:18:57,660 --> 00:19:00,070
and it is this one here.
329
00:19:00,070 --> 00:19:02,550
So the testimonials
330
00:19:08,200 --> 00:19:12,973
and then grid template columns 1fr and that's it.
331
00:19:14,990 --> 00:19:16,220
Right?
332
00:19:16,220 --> 00:19:18,160
So that was easy once again,
333
00:19:18,160 --> 00:19:21,200
thanks to the power of CSS grid.
334
00:19:21,200 --> 00:19:24,100
And let's now also change this one here.
335
00:19:24,100 --> 00:19:27,580
So the spacing between these is a bit too much now,
336
00:19:27,580 --> 00:19:31,860
and also let's finally make this a 4 by 3 gallery.
337
00:19:31,860 --> 00:19:34,003
So it just four columns.
338
00:19:35,850 --> 00:19:38,963
So that is this one here.
339
00:19:48,280 --> 00:19:49,640
All right.
340
00:19:49,640 --> 00:19:54,513
Let's actually just grab these two, changing it to,
341
00:19:56,310 --> 00:19:58,060
as I said, four columns,
342
00:19:58,060 --> 00:20:01,130
because right now it is actually six and then the gap,
343
00:20:01,130 --> 00:20:04,833
we can take it down a one step to 12 pixel,
344
00:20:06,020 --> 00:20:09,253
and yeah, that is a lot better.
345
00:20:11,280 --> 00:20:13,850
So now it is still beautiful and
346
00:20:13,850 --> 00:20:17,030
we can still appreciate the images here.
347
00:20:17,030 --> 00:20:20,630
We could maybe even make it with three columns again,
348
00:20:20,630 --> 00:20:24,193
but yeah, I think it's good like this as well.
349
00:20:25,030 --> 00:20:28,603
Now here, everything actually looks perfect, I would say.
350
00:20:30,480 --> 00:20:34,590
So even here, and even when it is even smaller,
351
00:20:34,590 --> 00:20:38,363
like this, for example, if we had like an older phone,
352
00:20:39,440 --> 00:20:40,273
right.
353
00:20:41,180 --> 00:20:44,970
But again, going back to 400, that's still perfect.
354
00:20:44,970 --> 00:20:46,410
But of course, here we have
355
00:20:46,410 --> 00:20:48,720
this problem that we also need to
356
00:20:48,720 --> 00:20:50,523
now make this into two columns.
357
00:20:52,460 --> 00:20:55,120
So that's very easy.
358
00:20:55,120 --> 00:20:55,953
Right?
359
00:20:57,080 --> 00:20:59,590
So not the meal section, yeah.
360
00:20:59,590 --> 00:21:02,343
But here the CTA section.
361
00:21:03,610 --> 00:21:05,763
So actually it's just this one here.
362
00:21:08,810 --> 00:21:13,810
And so 1fr right there.
363
00:21:17,220 --> 00:21:18,530
Okay.
364
00:21:18,530 --> 00:21:19,940
Nice.
365
00:21:19,940 --> 00:21:23,340
But let's actually make this image here.
366
00:21:23,340 --> 00:21:25,720
Oh, well it disappeared.
367
00:21:25,720 --> 00:21:27,123
Why is that?
368
00:21:28,690 --> 00:21:32,743
Let's inspect because that shouldn't be happening.
369
00:21:34,380 --> 00:21:37,920
I mean, we do not have a fixed width,
370
00:21:37,920 --> 00:21:39,423
on this one, on the CTA.
371
00:21:41,340 --> 00:21:42,173
Right.
372
00:21:43,730 --> 00:21:48,730
And so it should appear, but well, it doesn't.
373
00:21:49,120 --> 00:21:51,690
Yeah, but I think I know why.
374
00:21:51,690 --> 00:21:55,490
And the reason is that this div. element here
375
00:21:55,490 --> 00:21:56,883
does have no content.
376
00:21:58,120 --> 00:22:00,710
So this one that has the image has in fact
377
00:22:00,710 --> 00:22:02,420
no content at all.
378
00:22:02,420 --> 00:22:06,070
And so therefore it also makes sense that CSS doesn't
379
00:22:06,070 --> 00:22:08,180
then give it any height.
380
00:22:08,180 --> 00:22:12,270
So before the only reason why it was visible was because it
381
00:22:12,270 --> 00:22:15,810
was side by side with this other element here,
382
00:22:15,810 --> 00:22:18,490
which of course has a lot of content.
383
00:22:18,490 --> 00:22:22,320
And so then automatically the element that was besides it
384
00:22:22,320 --> 00:22:24,660
also had the exact same height,
385
00:22:24,660 --> 00:22:26,770
but now that is no longer the case.
386
00:22:26,770 --> 00:22:30,520
And so if we want this element here to become visible,
387
00:22:30,520 --> 00:22:34,723
we need to now give it, manually a height, basically.
388
00:22:37,330 --> 00:22:40,570
So that's the CTA image box
389
00:22:47,140 --> 00:22:50,230
and let's try a
390
00:22:51,549 --> 00:22:54,913
360 pixels maybe, 36 REM.
391
00:22:56,980 --> 00:23:01,283
All right, and that's maybe a little bit too much.
392
00:23:03,630 --> 00:23:05,733
Let's decrease this back.
393
00:23:07,820 --> 00:23:10,290
Just reload here quickly, and yeah,
394
00:23:10,290 --> 00:23:13,310
I think that's a bit too much and maybe it would be even
395
00:23:13,310 --> 00:23:16,160
nicer if we made this your first.
396
00:23:16,160 --> 00:23:18,563
So made it appear before all this.
397
00:23:20,000 --> 00:23:23,110
So let's tone it one down to 32
398
00:23:23,110 --> 00:23:25,880
and then let's say grid row, one.
399
00:23:32,750 --> 00:23:33,780
All right.
400
00:23:33,780 --> 00:23:35,880
And yeah, that looks very nice.
401
00:23:35,880 --> 00:23:39,340
Kind of as an introduction to the section here,
402
00:23:39,340 --> 00:23:42,510
there's just too much spacing here now,
403
00:23:42,510 --> 00:23:44,073
like in this text box still.
404
00:23:45,130 --> 00:23:48,003
So let's also quickly reduce that.
405
00:23:48,960 --> 00:23:50,423
So that's this,
406
00:23:55,560 --> 00:23:59,850
and let's just set that to 3.2 on all four sides
407
00:24:01,000 --> 00:24:03,980
and yeah, there we go.
408
00:24:03,980 --> 00:24:05,470
Beautiful.
409
00:24:05,470 --> 00:24:07,880
And I think that is actually all,
410
00:24:07,880 --> 00:24:09,810
that I had to change here.
411
00:24:09,810 --> 00:24:14,050
So if we take a look at it again on some actual device,
412
00:24:14,050 --> 00:24:18,670
let's say the pixel two now, which has a 411 pixels
413
00:24:18,670 --> 00:24:22,130
apparently, then I would say
414
00:24:22,130 --> 00:24:25,993
that we have a very nice webpage on this phone.
415
00:24:27,550 --> 00:24:28,490
Right.
416
00:24:28,490 --> 00:24:29,750
I mean, it might look,
417
00:24:29,750 --> 00:24:32,260
everything's still a little bit too big here,
418
00:24:32,260 --> 00:24:35,250
but if you test this on an actual phone in your hand,
419
00:24:35,250 --> 00:24:37,060
then you will see that actually
420
00:24:37,060 --> 00:24:39,560
it makes sense to be this big.
421
00:24:39,560 --> 00:24:41,870
So I did that actually before,
422
00:24:41,870 --> 00:24:45,200
and it looked quite nice on my iPhone.
423
00:24:45,200 --> 00:24:49,153
So that had this size right here.
424
00:24:50,210 --> 00:24:55,210
And yeah, again, everything is just the right size, I think.
425
00:24:55,750 --> 00:24:59,170
But of course these things are also a little bit subjective.
426
00:24:59,170 --> 00:25:01,180
So if you want, you can of course, also
427
00:25:01,180 --> 00:25:04,130
adjust some more things here and that would
428
00:25:04,130 --> 00:25:06,960
then be another great opportunity for you
429
00:25:06,960 --> 00:25:08,563
to practice these skills.
430
00:25:09,400 --> 00:25:13,060
All right, so if you feel like it, you can do that,
431
00:25:13,060 --> 00:25:16,240
but I will call it a day here and call this project
432
00:25:17,417 --> 00:25:18,490
finished at this point.
433
00:25:18,490 --> 00:25:22,640
So finished, at least in terms of HTML and CSS
434
00:25:22,640 --> 00:25:25,260
and of responsive web design,
435
00:25:25,260 --> 00:25:28,760
because there is still some things that we will want to do,
436
00:25:28,760 --> 00:25:29,810
for example,
437
00:25:29,810 --> 00:25:33,520
to actually make this navigation work when we click here,
438
00:25:33,520 --> 00:25:37,690
because right now, while it is not really working of course,
439
00:25:37,690 --> 00:25:41,120
and also I wanted to make this navigation sticky so that
440
00:25:41,120 --> 00:25:42,650
when we scroll it stays
441
00:25:42,650 --> 00:25:45,291
at the top and also I will want
442
00:25:45,291 --> 00:25:48,000
these buttons here to actually work.
443
00:25:48,000 --> 00:25:51,650
So when we click down that we then have some smooth
444
00:25:51,650 --> 00:25:55,633
scrolling animations that goes to the corresponding section.
445
00:25:56,980 --> 00:25:58,190
So for all of that,
446
00:25:58,190 --> 00:26:00,900
we will need just a little bit of JavaScript.
447
00:26:00,900 --> 00:26:04,530
And so I will show you how to create this kind of effect in
448
00:26:04,530 --> 00:26:06,230
the next section.
449
00:26:06,230 --> 00:26:09,580
But for now you can take a well-deserved break
450
00:26:09,580 --> 00:26:11,970
because you did really, really well
451
00:26:11,970 --> 00:26:14,510
in making it all the way to the end of this
452
00:26:14,510 --> 00:26:19,160
huge, huge project and writing all this code here by hand,
453
00:26:19,160 --> 00:26:23,100
in order to create such a great project and such a big
454
00:26:23,100 --> 00:26:25,240
real-world project here.
455
00:26:25,240 --> 00:26:29,320
So huge congratulations for making it this far.
456
00:26:29,320 --> 00:26:32,900
And I'm really proud that you're still with me here and
457
00:26:32,900 --> 00:26:36,290
I hope that you're proud yourself as well.
458
00:26:36,290 --> 00:26:38,330
So take care and I see you soon,
459
00:26:38,330 --> 00:26:40,703
once you're ready for the next section.
33228
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.