Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,410 --> 00:00:02,970
To finish the section,
2
00:00:02,970 --> 00:00:06,960
let's now build a typical web application layout.
3
00:00:06,960 --> 00:00:10,760
And this is going to be a great learning project.
4
00:00:10,760 --> 00:00:12,663
So let's get started.
5
00:00:14,270 --> 00:00:17,110
And so here is the layout that we're gonna build
6
00:00:17,110 --> 00:00:20,670
throughout this lecture and the next one.
7
00:00:20,670 --> 00:00:22,650
So it's not very styled,
8
00:00:22,650 --> 00:00:24,950
and it's not very detailed,
9
00:00:24,950 --> 00:00:28,510
but what matters here is the layout itself.
10
00:00:28,510 --> 00:00:33,070
So basically, we have some site navigation bar here.
11
00:00:33,070 --> 00:00:36,020
So this would be for things like the image,
12
00:00:36,020 --> 00:00:40,550
and maybe some profile menu or things like that.
13
00:00:40,550 --> 00:00:41,880
Then here in the top,
14
00:00:41,880 --> 00:00:44,160
we have a menu bar,
15
00:00:44,160 --> 00:00:47,610
so basically for actions for this application.
16
00:00:47,610 --> 00:00:48,910
And what we're making here
17
00:00:48,910 --> 00:00:51,740
is basically a fake email application.
18
00:00:51,740 --> 00:00:55,580
And so these menu items here are related to emails.
19
00:00:55,580 --> 00:00:57,891
So new email, reply, forwards,
20
00:00:57,891 --> 00:01:00,220
mark as unread,
21
00:01:00,220 --> 00:01:03,920
and then also all the way here to the right side in red,
22
00:01:03,920 --> 00:01:05,243
this trash button.
23
00:01:06,090 --> 00:01:07,500
Then here we have the section
24
00:01:07,500 --> 00:01:10,180
where we have different emails,
25
00:01:10,180 --> 00:01:13,465
so where we can see all the emails in some inbox,
26
00:01:13,465 --> 00:01:16,573
and then notice how we can actually scroll here.
27
00:01:17,500 --> 00:01:19,610
So that's really nice feature
28
00:01:19,610 --> 00:01:22,330
and it's actually very easy to do.
29
00:01:22,330 --> 00:01:23,670
Then here in the middle,
30
00:01:23,670 --> 00:01:28,027
this is kind of the main part of the fake application,
31
00:01:28,027 --> 00:01:31,410
and then also here is like the sidebar,
32
00:01:31,410 --> 00:01:34,453
which has some additional information on this email.
33
00:01:35,940 --> 00:01:37,770
And this whole application layout
34
00:01:37,770 --> 00:01:39,660
is of course exactly the height
35
00:01:39,660 --> 00:01:44,660
and the size of this viewport here, all right?
36
00:01:44,690 --> 00:01:47,910
So, this looks like fun I hope.
37
00:01:47,910 --> 00:01:51,410
And so let's now actually get started.
38
00:01:51,410 --> 00:01:54,630
So let's just review the main elements that we need,
39
00:01:54,630 --> 00:01:56,480
are this navigation here,
40
00:01:56,480 --> 00:01:58,120
then this menu bar,
41
00:01:58,120 --> 00:02:00,260
then we have this section right here,
42
00:02:00,260 --> 00:02:01,240
then this one
43
00:02:01,240 --> 00:02:03,953
and then this one, all right?
44
00:02:05,600 --> 00:02:09,053
So let's give ourselves yet another new file here.
45
00:02:09,990 --> 00:02:11,180
So, 06
46
00:02:12,990 --> 00:02:16,180
app layout.HTML.
47
00:02:16,180 --> 00:02:19,410
Then we will again start from scratch here.
48
00:02:19,410 --> 00:02:22,953
So exclamation mark, and then tab or enter,
49
00:02:27,040 --> 00:02:28,970
and then let's get started.
50
00:02:28,970 --> 00:02:32,290
And our HTML here is actually very simple.
51
00:02:32,290 --> 00:02:34,650
So we have a nav element
52
00:02:34,650 --> 00:02:38,070
and here I'm simply gonna write nav actually.
53
00:02:38,070 --> 00:02:39,810
Let's use lowercase.
54
00:02:39,810 --> 00:02:40,920
Then after that,
55
00:02:40,920 --> 00:02:42,800
we have that menu bar.
56
00:02:42,800 --> 00:02:45,740
And so here is a new HTML element,
57
00:02:45,740 --> 00:02:48,303
which is exactly called menu.
58
00:02:49,450 --> 00:02:53,930
So what's the difference between nav and menu you might ask?
59
00:02:53,930 --> 00:02:58,350
Well, the nav element is for a typical navigation of a site.
60
00:02:58,350 --> 00:03:01,700
So navigation, which contains a bunch of links,
61
00:03:01,700 --> 00:03:05,440
which then points to other places in the application.
62
00:03:05,440 --> 00:03:07,360
Menu here, on the other hand,
63
00:03:07,360 --> 00:03:09,850
is actually for like menu buttons
64
00:03:09,850 --> 00:03:12,560
in an actual web application.
65
00:03:12,560 --> 00:03:14,680
So we use nav all the time,
66
00:03:14,680 --> 00:03:16,990
so it's a very commonly used element,
67
00:03:16,990 --> 00:03:18,970
but menu, not so much.
68
00:03:18,970 --> 00:03:22,070
It's only used when we build a web application.
69
00:03:22,070 --> 00:03:24,010
But that's the case right here
70
00:03:24,010 --> 00:03:27,720
and so now we need this element.
71
00:03:27,720 --> 00:03:28,553
Here for now,
72
00:03:28,553 --> 00:03:29,653
I'm just writing menu.
73
00:03:30,710 --> 00:03:32,740
Then here for this inbox view,
74
00:03:32,740 --> 00:03:34,723
I'm going to use a section element.
75
00:03:36,650 --> 00:03:38,698
Then for the main email view,
76
00:03:38,698 --> 00:03:43,698
I will use the main element because this one, remember,
77
00:03:43,780 --> 00:03:46,980
is really used to display the main piece of content
78
00:03:46,980 --> 00:03:48,570
of the document.
79
00:03:48,570 --> 00:03:50,120
So the most important one.
80
00:03:50,120 --> 00:03:51,020
And so in this case,
81
00:03:51,020 --> 00:03:53,933
that is basically the email itself.
82
00:03:56,650 --> 00:03:58,530
Then that additional information
83
00:03:58,530 --> 00:04:02,683
is exactly the main use case for the aside element.
84
00:04:04,030 --> 00:04:07,150
So additional info
85
00:04:07,150 --> 00:04:09,460
and for now that's actually it.
86
00:04:09,460 --> 00:04:11,590
These are the four parts,
87
00:04:11,590 --> 00:04:12,914
or actually five parts
88
00:04:12,914 --> 00:04:15,293
of our application layout.
89
00:04:16,180 --> 00:04:19,363
So I'll give it a save and then let's go back here,
90
00:04:20,560 --> 00:04:22,446
removing this part here,
91
00:04:22,446 --> 00:04:25,200
and then here is the app layout
92
00:04:26,180 --> 00:04:27,313
and there we go.
93
00:04:28,230 --> 00:04:30,180
So you see that actually for the menu,
94
00:04:30,180 --> 00:04:33,410
HTML automatically applies some default,
95
00:04:33,410 --> 00:04:35,690
a margin or padding here,
96
00:04:35,690 --> 00:04:37,310
but that's not a problem,
97
00:04:37,310 --> 00:04:39,360
because of course we're going to get rid
98
00:04:39,360 --> 00:04:41,303
of all of that right now.
99
00:04:42,920 --> 00:04:47,170
So again, doing everything in the same of file here,
100
00:04:47,170 --> 00:04:49,223
let's start with our global reset,
101
00:04:50,370 --> 00:04:52,320
margin zero
102
00:04:52,320 --> 00:04:54,430
and padding zero.
103
00:04:54,430 --> 00:04:55,950
And of course,
104
00:04:55,950 --> 00:04:58,033
box sizing, for the box.
105
00:04:59,120 --> 00:05:04,120
Nice, then let's start with some visual styles as always.
106
00:05:05,600 --> 00:05:06,433
Now in this case,
107
00:05:06,433 --> 00:05:09,630
I'm actually not going to include any third-party fund
108
00:05:09,630 --> 00:05:11,763
and instead of just go with this one.
109
00:05:13,420 --> 00:05:14,810
Now, the color,
110
00:05:14,810 --> 00:05:17,053
well let's actually use the one from before,
111
00:05:20,990 --> 00:05:22,103
or this one here.
112
00:05:29,410 --> 00:05:31,623
And let's also give everything a nice,
113
00:05:33,190 --> 00:05:36,673
font size of 24 pixels.
114
00:05:38,160 --> 00:05:42,130 line:15%
Okay, and now let's just style our different pieces here
115
00:05:42,130 --> 00:05:44,930 line:15%
with some background color as always
116
00:05:44,930 --> 00:05:47,080 line:15%
because that always makes it a lot easier
117
00:05:47,080 --> 00:05:49,193 line:15%
to see what is actually going on.
118
00:05:50,420 --> 00:05:53,193 line:15%
So this navigation bar had this color,
119
00:05:54,278 --> 00:05:58,040 line:15%
then the menu has that nice violet color,
120
00:05:58,040 --> 00:06:01,313 line:15%
and let's actually get that from open colors again.
121
00:06:02,700 --> 00:06:04,580
So violet is one of these colors
122
00:06:04,580 --> 00:06:07,290
that I really like for UI design.
123
00:06:07,290 --> 00:06:10,493
And while this one here looks nice,
124
00:06:11,410 --> 00:06:13,143
I think that's the one I am using.
125
00:06:22,510 --> 00:06:25,633
Then of course the color needs to be white in this one.
126
00:06:28,340 --> 00:06:29,980 line:15%
And then also the aside
127
00:06:29,980 --> 00:06:31,193 line:15%
and the section,
128
00:06:31,193 --> 00:06:33,173 line:15%
have some different background colors.
129
00:06:34,430 --> 00:06:36,090 line:15%
So background color,
130
00:06:36,090 --> 00:06:38,583
and let's go get dead gray color again.
131
00:06:43,060 --> 00:06:46,080
So I think this is the one that we have been using
132
00:06:49,420 --> 00:06:53,370 line:15%
and actually the same also for the section.
133
00:06:53,370 --> 00:06:55,173 line:15%
Let's put the section here first,
134
00:06:57,960 --> 00:06:59,203 line:15%
and all right.
135
00:07:00,280 --> 00:07:05,190
So that's it for the visual styles, right?
136
00:07:05,190 --> 00:07:09,650
And so now we're actually ready to build that layout itself.
137
00:07:09,650 --> 00:07:12,570
So let's analyze our original layout
138
00:07:12,570 --> 00:07:15,493
so that we can think a little bit how we will do this.
139
00:07:16,350 --> 00:07:19,200
So this layout here is very clearly
140
00:07:19,200 --> 00:07:22,180
a two dimensional layout, right?
141
00:07:22,180 --> 00:07:23,820
And so therefore, of course,
142
00:07:23,820 --> 00:07:27,250
we're going to use CSS Grid to build it.
143
00:07:27,250 --> 00:07:30,880
Now, how many columns and rows do we need?
144
00:07:30,880 --> 00:07:33,530
Well, let's easily count them.
145
00:07:33,530 --> 00:07:35,860
So one column right here,
146
00:07:35,860 --> 00:07:38,970
then next one here to inbox, another column,
147
00:07:38,970 --> 00:07:40,750
the email view, another column,
148
00:07:40,750 --> 00:07:43,083
and this one here, yet another column.
149
00:07:43,960 --> 00:07:46,480
So that looks like four columns.
150
00:07:46,480 --> 00:07:48,140
And then as for the rows,
151
00:07:48,140 --> 00:07:50,990
we have this one and this one,
152
00:07:50,990 --> 00:07:53,090
so just two rows.
153
00:07:53,090 --> 00:07:55,990
Now let's just see what happens when we make this smaller.
154
00:07:57,040 --> 00:08:01,430
So, you see that this column and this column stays the same
155
00:08:01,430 --> 00:08:03,230
and this one in the middle
156
00:08:03,230 --> 00:08:08,070
basically occupies the remaining space here, right?
157
00:08:08,070 --> 00:08:10,870
And so with this I think we have enough information
158
00:08:10,870 --> 00:08:13,553
to build our layout with CSS Grid.
159
00:08:15,077 --> 00:08:18,900
And which is actually the parent element of all of this.
160
00:08:19,960 --> 00:08:21,320
So all of these,
161
00:08:21,320 --> 00:08:22,270
or in other words,
162
00:08:22,270 --> 00:08:24,963
what do we want to be our grid container?
163
00:08:25,890 --> 00:08:29,340
Well, we can simply use the body, right?
164
00:08:29,340 --> 00:08:30,823
That's not a problem at all.
165
00:08:32,420 --> 00:08:34,410
So, this play grid
166
00:08:37,000 --> 00:08:39,420
and now grit template columns,
167
00:08:39,420 --> 00:08:41,090
and that first column,
168
00:08:41,090 --> 00:08:43,630
so that navigation bar basically,
169
00:08:43,630 --> 00:08:45,423
let's make it 80 pixels.
170
00:08:46,690 --> 00:08:49,880
Then that inbox is the second column,
171
00:08:49,880 --> 00:08:52,610
I will make that 400 pixels.
172
00:08:52,610 --> 00:08:53,960
And as always,
173
00:08:53,960 --> 00:08:56,270
these values are kind of random.
174
00:08:56,270 --> 00:08:59,680
Then the third column remember is the main view,
175
00:08:59,680 --> 00:09:01,240
so the email view,
176
00:09:01,240 --> 00:09:05,180
and this one is supposed to occupy all the remaining space.
177
00:09:05,180 --> 00:09:08,660
And that means when it comes to CSS Grid,
178
00:09:08,660 --> 00:09:11,110
that it should be 1fr,
179
00:09:11,110 --> 00:09:12,340
right?
180
00:09:12,340 --> 00:09:14,400
And then finally, the fourth column,
181
00:09:14,400 --> 00:09:16,110
which is the additional info
182
00:09:16,110 --> 00:09:18,012
has also a fixed width,
183
00:09:18,012 --> 00:09:21,560
and so let's choose 250 for that.
184
00:09:21,560 --> 00:09:25,773
All right, and now the grid template rows,
185
00:09:26,940 --> 00:09:30,530
which sometimes we do actually not define, remember,
186
00:09:30,530 --> 00:09:31,430
but in this case,
187
00:09:31,430 --> 00:09:33,780
since we want to fill the entire screen,
188
00:09:33,780 --> 00:09:36,003
we will basically do it,
189
00:09:36,003 --> 00:09:38,103
here automatically in the rows.
190
00:09:39,100 --> 00:09:40,910
So the first one is fixed,
191
00:09:40,910 --> 00:09:44,060
again, 80 pixels for that menu bar.
192
00:09:44,060 --> 00:09:45,520
And then here the second row,
193
00:09:45,520 --> 00:09:48,590
we wanted to go all the way to the end.
194
00:09:48,590 --> 00:09:49,620
Or in other words,
195
00:09:49,620 --> 00:09:53,290
we wanted to occupy all the remaining space,
196
00:09:53,290 --> 00:09:54,810
all right?
197
00:09:54,810 --> 00:09:59,250
However, this is not yet going to work as we expect.
198
00:09:59,250 --> 00:10:01,270
So let's see that.
199
00:10:01,270 --> 00:10:03,597
And while first of all, of course,
200
00:10:03,597 --> 00:10:07,060
these elements are not yet in the right position,
201
00:10:07,060 --> 00:10:08,730
but also the second row
202
00:10:08,730 --> 00:10:13,250
is actually not going all the way to the end here, right?
203
00:10:13,250 --> 00:10:15,596
Now, why do you think that is?
204
00:10:15,596 --> 00:10:18,180
And let's actually inspect this
205
00:10:18,180 --> 00:10:21,633
because we will be able to find the answer there.
206
00:10:22,720 --> 00:10:24,660
So here we have to body element
207
00:10:24,660 --> 00:10:27,540
and you see that it does indeed end
208
00:10:27,540 --> 00:10:29,443
right here after this element.
209
00:10:30,290 --> 00:10:35,290
So the height of the body is in fact only 136 pixels.
210
00:10:35,670 --> 00:10:37,970
So just like any other element,
211
00:10:37,970 --> 00:10:41,150
the body element does not magically occupy
212
00:10:41,150 --> 00:10:44,220
this entire space here, all right?
213
00:10:44,220 --> 00:10:46,630
It only occupies, well,
214
00:10:46,630 --> 00:10:49,900
the place that it needs for its content.
215
00:10:49,900 --> 00:10:51,933
And so that's only until here.
216
00:10:53,160 --> 00:10:55,740
So what if we want, actually,
217
00:10:55,740 --> 00:10:58,290
for this row here to go all the way to the end.
218
00:10:58,290 --> 00:10:59,870
In that case,
219
00:10:59,870 --> 00:11:04,063
we need the body to be as high as the viewport, right?
220
00:11:05,010 --> 00:11:06,770
Well, luckily for us,
221
00:11:06,770 --> 00:11:09,973
we already learned how to do that, right?
222
00:11:10,840 --> 00:11:13,526
So the solution is to set the height
223
00:11:13,526 --> 00:11:17,490
to 100 viewport height units,
224
00:11:17,490 --> 00:11:19,050
okay?
225
00:11:19,050 --> 00:11:21,840
And there we go.
226
00:11:21,840 --> 00:11:24,450
So now it occupies the entire space
227
00:11:24,450 --> 00:11:29,450
and we see that our body is now 503 pixels high.
228
00:11:29,910 --> 00:11:31,000
And of course,
229
00:11:31,000 --> 00:11:33,600
if we make it higher and lower,
230
00:11:33,600 --> 00:11:35,003
then this value changes,
231
00:11:37,250 --> 00:11:38,540
okay?
232
00:11:38,540 --> 00:11:41,590
But now let's actually place all these five items
233
00:11:41,590 --> 00:11:42,963
in the correct position.
234
00:11:44,010 --> 00:11:46,530
So, first this navigation here,
235
00:11:46,530 --> 00:11:49,670
it goes all the way from the first row
236
00:11:49,670 --> 00:11:51,460
to the end of the second row.
237
00:11:51,460 --> 00:11:54,044
So it spans across all of this.
238
00:11:54,044 --> 00:11:56,600
Then, also the menu
239
00:11:56,600 --> 00:12:01,573
spans across this column and this one and this one, right?
240
00:12:02,420 --> 00:12:07,420
So the grid lines here are one, two, three, four and five.
241
00:12:08,650 --> 00:12:11,863
But well, why not actually show it to you?
242
00:12:13,030 --> 00:12:14,113
So,
243
00:12:16,750 --> 00:12:18,100
yeah, this is the one.
244
00:12:18,100 --> 00:12:21,080
So here we see the grid lines, right?
245
00:12:21,080 --> 00:12:21,990
And so this one here,
246
00:12:21,990 --> 00:12:24,773
will go from two all the way to the end,
247
00:12:26,830 --> 00:12:27,950
right?
248
00:12:27,950 --> 00:12:30,023
So let's do that.
249
00:12:33,690 --> 00:12:36,420
So we want to span across multiple rows
250
00:12:36,420 --> 00:12:38,460
here in the nav, right?
251
00:12:38,460 --> 00:12:41,400
And so we say grid row from the first,
252
00:12:41,400 --> 00:12:43,030
all the way to the end.
253
00:12:43,030 --> 00:12:45,940
And let's actually not specified that manually,
254
00:12:45,940 --> 00:12:49,740
but instead we can do it automatically with -1.
255
00:12:49,740 --> 00:12:51,010
Remember that?
256
00:12:51,010 --> 00:12:54,610
And so if for some reason we were to add another row,
257
00:12:54,610 --> 00:12:55,610
then this navigation
258
00:12:55,610 --> 00:13:00,113
would still go all the way until the end, all right?
259
00:13:00,990 --> 00:13:02,800
Then we have the menu here,
260
00:13:02,800 --> 00:13:05,403
which we want to span across multiple columns.
261
00:13:06,680 --> 00:13:08,800
And so we use the grid column.
262
00:13:08,800 --> 00:13:10,440
So this starts in the second
263
00:13:10,440 --> 00:13:13,040
and again goes all the way to the end.
264
00:13:13,040 --> 00:13:16,853
And so this is where our -1 trick gets really handy,
265
00:13:17,800 --> 00:13:18,633
okay?
266
00:13:18,633 --> 00:13:22,190
And then the other ones should be automatically placed
267
00:13:22,190 --> 00:13:23,683
and indeed, they are.
268
00:13:25,370 --> 00:13:26,970
Great, so let's see what happens
269
00:13:26,970 --> 00:13:30,260
if we make our viewport smaller
270
00:13:30,260 --> 00:13:32,993
and then that's exactly as expected.
271
00:13:34,240 --> 00:13:35,570
Beautiful.
272
00:13:35,570 --> 00:13:38,203
Now let's just style this here a little bit nicer.
273
00:13:41,820 --> 00:13:45,450
So the color might be white.
274
00:13:45,450 --> 00:13:49,070
Then, let's also center the text in all of the elements.
275
00:13:49,070 --> 00:13:50,040
And for that,
276
00:13:50,040 --> 00:13:52,180
we can actually set it in the body
277
00:13:52,180 --> 00:13:55,833
because text align does actually get inherited.
278
00:13:56,790 --> 00:14:00,013
And let's also make the font-weight bold,
279
00:14:02,300 --> 00:14:04,240
which again will get inherited.
280
00:14:04,240 --> 00:14:07,340
And so usually we don't put these things on the body,
281
00:14:07,340 --> 00:14:09,620
but since we have such an easy page
282
00:14:09,620 --> 00:14:11,380
and such an easy layout,
283
00:14:11,380 --> 00:14:13,440
well, we can simply put it here
284
00:14:13,440 --> 00:14:15,203
and then it will get inherited.
285
00:14:16,150 --> 00:14:17,920
Now let's just add some padding here
286
00:14:17,920 --> 00:14:19,313
to all of these elements.
287
00:14:20,810 --> 00:14:22,310
So the nav,
288
00:14:22,310 --> 00:14:23,143
menu,
289
00:14:24,690 --> 00:14:26,040
section,
290
00:14:26,040 --> 00:14:27,660
main
291
00:14:27,660 --> 00:14:28,950
and aside.
292
00:14:28,950 --> 00:14:30,363
So basically all of them.
293
00:14:31,430 --> 00:14:36,160
Let's give them some padding at the top of 24 pixels,
294
00:14:36,160 --> 00:14:39,073
but this is really just a small cosmetic change.
295
00:14:40,500 --> 00:14:41,363
All right?
296
00:14:42,350 --> 00:14:43,560
Beautiful.
297
00:14:43,560 --> 00:14:46,350
So we already did our layout,
298
00:14:46,350 --> 00:14:48,543
so that's pretty nice already.
299
00:14:49,560 --> 00:14:53,210
So, this looks already almost the same,
300
00:14:53,210 --> 00:14:55,590
but now we're just missing two things.
301
00:14:55,590 --> 00:14:58,380
So two a little bit more detailed things,
302
00:14:58,380 --> 00:15:01,200
which is this menu bar with these buttons,
303
00:15:01,200 --> 00:15:05,470
and then also this kind of inbox view here, right?
304
00:15:05,470 --> 00:15:08,260
And so let's do these two things in the next
305
00:15:08,260 --> 00:15:10,563
and final lecture of the section.
21106
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.