Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,550 --> 00:00:04,803
Next up let's build or website header.
2
00:00:06,990 --> 00:00:11,090
And the website header will just be something very simple.
3
00:00:11,090 --> 00:00:14,930
So we're just gonna put the logo here on the left side
4
00:00:14,930 --> 00:00:18,770
and some simple navigation here on the right side.
5
00:00:18,770 --> 00:00:22,550
So just like I showed you in the sketch that I showed
6
00:00:22,550 --> 00:00:25,980
in the beginning of building this Hero section.
7
00:00:25,980 --> 00:00:29,730
Now this content, so the logo and the navigation,
8
00:00:29,730 --> 00:00:33,480
I actually don't want them to be in a fixed with container
9
00:00:33,480 --> 00:00:36,240
like this one here.
10
00:00:36,240 --> 00:00:37,580
So this one here,
11
00:00:37,580 --> 00:00:42,073
this Hero section is exactly 1300 pixels wide.
12
00:00:43,620 --> 00:00:46,720
But again, now the navigation and the logo,
13
00:00:46,720 --> 00:00:49,830
I actually want them outside of a fixed width container
14
00:00:49,830 --> 00:00:52,196
like that, because that is something
15
00:00:52,196 --> 00:00:54,750
that I personally like a lot,
16
00:00:54,750 --> 00:00:59,750
and also I have seen that on many websites, and so, yeah.
17
00:00:59,750 --> 00:01:03,310
I like that and I thought we could implement it here
18
00:01:03,310 --> 00:01:05,280
just to practice a little bit more
19
00:01:05,280 --> 00:01:09,900
and not always do everything in the same way, right?
20
00:01:09,900 --> 00:01:14,720
So let's go to our markup and add the header right here
21
00:01:14,720 --> 00:01:15,933
before the section.
22
00:01:17,660 --> 00:01:21,363
So I'm actually going to use now the header element,
23
00:01:22,550 --> 00:01:27,350
and I will still give it a class name and call it header.
24
00:01:27,350 --> 00:01:30,680
And again, that is because I want to have it as a rule
25
00:01:30,680 --> 00:01:35,300
to only select based on class names, okay?
26
00:01:35,300 --> 00:01:39,700
With the exception of sometimes then selecting elements
27
00:01:39,700 --> 00:01:41,300
inside of classes,
28
00:01:41,300 --> 00:01:46,300
but still the beginning is always with class selectors.
29
00:01:46,600 --> 00:01:51,600
Okay, so remember that the HTML5 element header
30
00:01:52,000 --> 00:01:56,210
is basically to be used at the beginning of a website,
31
00:01:56,210 --> 00:01:59,880
or also have some specific content like in a section
32
00:01:59,880 --> 00:02:01,710
or in an article.
33
00:02:01,710 --> 00:02:06,070
And we did actually just that in our very first project
34
00:02:06,070 --> 00:02:07,690
where we used the header element
35
00:02:07,690 --> 00:02:09,770
at the beginning of the website,
36
00:02:09,770 --> 00:02:13,170
and then also at the beginning of the article,
37
00:02:13,170 --> 00:02:14,003
remember that?
38
00:02:16,970 --> 00:02:20,363
So, here then let's use an image for the logo,
39
00:02:22,400 --> 00:02:24,600
with the class of...
40
00:02:24,600 --> 00:02:26,920
Well, simply logo.
41
00:02:26,920 --> 00:02:31,600
Then we also need the odd text and here we just say,
42
00:02:31,600 --> 00:02:36,173
it's the Omnifood logo and then the source of image,
43
00:02:38,200 --> 00:02:42,963
and then here it's actually this one omnifoodlogo.png.
44
00:02:45,770 --> 00:02:50,520
So that is one part and then we also want to navigation.
45
00:02:50,520 --> 00:02:53,793
And for that, remember we use the nav element,
46
00:02:54,700 --> 00:02:59,360
and the nav element is yet another semantic HTML5 element
47
00:02:59,360 --> 00:03:02,490
which should be used for major navigation blocks
48
00:03:02,490 --> 00:03:04,490
that we have on our page.
49
00:03:04,490 --> 00:03:07,490
So not all collections of links need to be wrapped
50
00:03:07,490 --> 00:03:10,620
in a nav element, but here semantically
51
00:03:10,620 --> 00:03:14,530
we do want to have the major navigation of our page,
52
00:03:14,530 --> 00:03:18,450
and so it makes sense to then use exactly this element
53
00:03:18,450 --> 00:03:19,923
with that meaning for it.
54
00:03:21,320 --> 00:03:23,233
Let's just give it a class,
55
00:03:24,330 --> 00:03:27,200
let's call it "Main-nav" because in the footer,
56
00:03:27,200 --> 00:03:30,220
we will have another navigation and then
57
00:03:31,120 --> 00:03:33,463
we're going to need another nav element there.
58
00:03:34,450 --> 00:03:38,800
And here for now I will just write some text,
59
00:03:38,800 --> 00:03:42,570
and okay, and then let's actually wrap
60
00:03:42,570 --> 00:03:47,410
the rest of the content here inside of the main element.
61
00:03:47,410 --> 00:03:52,370
And once again, the main element is a new HTML5 element,
62
00:03:52,370 --> 00:03:55,500
and what it means is basically that it contains
63
00:03:55,500 --> 00:04:00,500
the main content or the main area of a certain web page,
64
00:04:00,780 --> 00:04:05,770
so obvious certain web document like this HTML5 page.
65
00:04:05,770 --> 00:04:10,740
And once again, the main element is a new HTML5 element,
66
00:04:10,740 --> 00:04:12,670
so a semantic element,
67
00:04:12,670 --> 00:04:16,080
and what it means is that it contains basically
68
00:04:16,080 --> 00:04:20,840
the main part or the main area of a web document.
69
00:04:20,840 --> 00:04:23,960
Now, what it does not include is content
70
00:04:23,960 --> 00:04:26,720
that is repeated across multiple pages,
71
00:04:26,720 --> 00:04:29,680
and so that would be the case of a header.
72
00:04:29,680 --> 00:04:33,680
So basically this part here, if we had multiple pages,
73
00:04:33,680 --> 00:04:37,420
we could use the exact same header on all of the pages.
74
00:04:37,420 --> 00:04:41,300
And so that means that it's not part of the main part
75
00:04:41,300 --> 00:04:43,680
of any webpage, and the same thing
76
00:04:43,680 --> 00:04:45,960
for the overall page footer,
77
00:04:45,960 --> 00:04:49,580
so that one should also always be outside of domain.
78
00:04:49,580 --> 00:04:53,480
But in here we can just put it inside domain element,
79
00:04:53,480 --> 00:04:56,800
and so we make it a little bit more semantic.
80
00:04:56,800 --> 00:04:59,330
So we don't even need to give it any class
81
00:04:59,330 --> 00:05:01,900
because we're not interested in styling it,
82
00:05:01,900 --> 00:05:05,340
this is just to let, for example, screen readers,
83
00:05:05,340 --> 00:05:08,630
and search engines know that...
84
00:05:08,630 --> 00:05:11,450
Well, this isn't exactly as I said before
85
00:05:11,450 --> 00:05:13,933
the main part of our page.
86
00:05:15,180 --> 00:05:19,040
Okay, so let's check it out,
87
00:05:19,040 --> 00:05:22,560
and the logo is huge, of course.
88
00:05:22,560 --> 00:05:27,043
So as always, we need to start by fixing the images here.
89
00:05:30,140 --> 00:05:33,110
Okay, and before we do any of that,
90
00:05:33,110 --> 00:05:36,630
it's actually time to now form at this file
91
00:05:36,630 --> 00:05:37,563
here a little bit.
92
00:05:38,480 --> 00:05:42,780
So what I will do is to put like general and repeatable
93
00:05:42,780 --> 00:05:47,240
components at the beginning and then create some division
94
00:05:47,240 --> 00:05:48,683
for each of the sections.
95
00:05:52,856 --> 00:05:57,670
So we can add some stars here to create some nice division,
96
00:05:59,350 --> 00:06:03,810
and then let's say general components,
97
00:06:05,660 --> 00:06:06,583
and then here,
98
00:06:09,670 --> 00:06:14,320
copy that.
99
00:06:14,320 --> 00:06:17,133
Then here we have the Hero section,
100
00:06:22,490 --> 00:06:24,123
then we have the header.
101
00:06:28,260 --> 00:06:32,740
So the heading primary is actually used just once,
102
00:06:32,740 --> 00:06:35,763
but still I will put it here in the general components.
103
00:06:36,680 --> 00:06:38,510
So that's also why we gave it
104
00:06:38,510 --> 00:06:43,060
this kind of reusable name here, right?
105
00:06:43,060 --> 00:06:45,183
Actually right here as well reusable,
106
00:06:47,470 --> 00:06:49,240
and again, that's why it does have
107
00:06:49,240 --> 00:06:53,080
this kind of generic name there.
108
00:06:53,080 --> 00:06:54,840
The same for the buttons,
109
00:06:54,840 --> 00:06:56,910
they are not just to be used here,
110
00:06:56,910 --> 00:07:00,023
but everywhere throughout the entire page.
111
00:07:01,700 --> 00:07:04,703
So let's grab them, put them here, nice.
112
00:07:08,386 --> 00:07:10,340
Then here is everything about the Hero,
113
00:07:10,340 --> 00:07:14,610
but then again, this one is one of the repeatable ones,
114
00:07:14,610 --> 00:07:18,060
because this is the helper class that we created,
115
00:07:18,060 --> 00:07:19,923
and which might be used everywhere.
116
00:07:22,540 --> 00:07:26,523
Okay, and this one is actually everything about the Hero.
117
00:07:28,650 --> 00:07:31,890
And so now here, let's go to the header
118
00:07:31,890 --> 00:07:34,023
and format the logo a little bit.
119
00:07:36,180 --> 00:07:39,680
And usually I like to style the height of images,
120
00:07:39,680 --> 00:07:42,603
which is a bit easier to control I think.
121
00:07:43,780 --> 00:07:48,610
So, height let's go here to our spacing rules,
122
00:07:48,610 --> 00:07:52,407
and for example, let's try 24 pixels, 2.4 REM,
123
00:07:58,090 --> 00:08:01,800
No, okay, I was told that looks quite good.
124
00:08:01,800 --> 00:08:04,980
And so now let's work on the layout a little bit
125
00:08:04,980 --> 00:08:07,500
and also on the visual styles.
126
00:08:07,500 --> 00:08:10,940
So as I mentioned before, we want each of them pushed
127
00:08:10,940 --> 00:08:12,390
to one of the sides,
128
00:08:12,390 --> 00:08:16,170
this one on the left side, this one on the right side.
129
00:08:16,170 --> 00:08:18,790
And actually we already did that before,
130
00:08:18,790 --> 00:08:20,523
so this shouldn't be too hard.
131
00:08:21,420 --> 00:08:24,913
So we can simply use flexbox here of course,
132
00:08:27,320 --> 00:08:30,723
where the header must be the flex container.
133
00:08:35,100 --> 00:08:38,000
And then remember the trick to push each element
134
00:08:38,000 --> 00:08:41,520
to one of the sides is to use justify content
135
00:08:41,520 --> 00:08:43,273
space between.
136
00:08:44,620 --> 00:08:46,670
Now we should also vertically align them,
137
00:08:50,290 --> 00:08:53,720
okay, that looks quite good already,
138
00:08:53,720 --> 00:08:56,010
but of course we need some spacing,
139
00:08:56,010 --> 00:08:59,150
and also we kind of want to make the header look
140
00:08:59,150 --> 00:09:03,630
as if it is part of this whole section here, right?
141
00:09:03,630 --> 00:09:06,853
And so we need to give it the exact same background color.
142
00:09:08,320 --> 00:09:12,313
So let's fix the background color here and the spacing.
143
00:09:14,350 --> 00:09:18,130
So background color is not so hard,
144
00:09:18,130 --> 00:09:22,663
it's just this one here, actually exactly this line of code,
145
00:09:23,910 --> 00:09:27,280
so no need to type it out all again.
146
00:09:27,280 --> 00:09:29,910
And now let's fix these spacing.
147
00:09:29,910 --> 00:09:31,630
And here, what I'm going to do
148
00:09:31,630 --> 00:09:34,683
is to actually give this header a fixed height.
149
00:09:36,230 --> 00:09:39,740
So using the height property, and setting it,
150
00:09:39,740 --> 00:09:43,550
for example, again, to 9.6 REM.
151
00:09:43,550 --> 00:09:45,190
Now, why am I doing that
152
00:09:45,190 --> 00:09:49,550
is usually we simply allow the content to define the height
153
00:09:49,550 --> 00:09:52,760
and then adding some petting usually?
154
00:09:52,760 --> 00:09:56,070
Well, the reason for that is because in this case,
155
00:09:56,070 --> 00:10:00,850
we actually want to make this navigation sticky a bit later.
156
00:10:00,850 --> 00:10:04,020
So sticky, meaning that as we scroll down the page,
157
00:10:04,020 --> 00:10:07,550
it would stay at the same position, and for this to work
158
00:10:07,550 --> 00:10:10,833
it's a bit easier when the height is actually fixed.
159
00:10:11,860 --> 00:10:14,163
Okay, so let me write that here.
160
00:10:18,980 --> 00:10:22,203
So because we want it to be sticky later,
161
00:10:23,260 --> 00:10:25,740
but of course it would be just fine
162
00:10:25,740 --> 00:10:28,480
if you didn't have this condition here
163
00:10:28,480 --> 00:10:33,250
of making it sticky later to simply use padding, okay.
164
00:10:33,250 --> 00:10:35,580
Now we will still need padding,
165
00:10:35,580 --> 00:10:37,083
but only on the sides.
166
00:10:38,820 --> 00:10:41,850
So padding, and so on the top,
167
00:10:41,850 --> 00:10:43,753
we actually want zero padding,
168
00:10:44,790 --> 00:10:47,630
so top and bottom, and then on the right,
169
00:10:47,630 --> 00:10:52,630
let's see what we have here, let's use 48 pixels.
170
00:10:53,570 --> 00:10:56,400
So that will then basically be at the space
171
00:10:56,400 --> 00:10:58,760
between the sides of the viewport,
172
00:10:58,760 --> 00:11:02,363
so the sides of the browser and a discontent here.
173
00:11:04,520 --> 00:11:08,220
So let's check that out and yeah,
174
00:11:08,220 --> 00:11:09,933
this looks quite beautiful.
175
00:11:11,960 --> 00:11:14,210
I just think that maybe the logo here
176
00:11:14,210 --> 00:11:18,000
is a bit too large and also the spacing here now
177
00:11:18,000 --> 00:11:20,080
is way too big.
178
00:11:20,080 --> 00:11:22,020
So we have a lot of spacing here
179
00:11:22,020 --> 00:11:24,610
between now this header basically
180
00:11:24,610 --> 00:11:28,240
and well, this section here,
181
00:11:28,240 --> 00:11:31,030
let me show you, that's because here we have
182
00:11:31,030 --> 00:11:35,697
this huge padding of a 96 pixels on the top, right?
183
00:11:37,020 --> 00:11:40,450
Then we also have 96 pixels here of the height,
184
00:11:40,450 --> 00:11:44,250
which then makes the whole thing like really big.
185
00:11:44,250 --> 00:11:46,860
So let's decrease the padding at the top here
186
00:11:46,860 --> 00:11:49,523
and also decrease the logo a little bit.
187
00:11:50,910 --> 00:11:54,260
So starting with that, and here we should probably
188
00:11:54,260 --> 00:11:58,040
not go to our next value,
189
00:11:58,040 --> 00:12:00,620
so 16 would be way too low
190
00:12:00,620 --> 00:12:03,600
because we actually just want to reduce it a little bit,
191
00:12:03,600 --> 00:12:06,170
and so we can just break the rule
192
00:12:06,170 --> 00:12:07,793
here a little bit basically.
193
00:12:08,880 --> 00:12:13,880
So maybe like this, and then let's reduce the padding
194
00:12:14,080 --> 00:12:16,243
at the top here to here to 0.5.
195
00:12:17,110 --> 00:12:22,110
So we're going to do 4.8 a REM, then on the side, zero,
196
00:12:23,600 --> 00:12:27,533
bottom, 9.6 and on the other side, zero as well.
197
00:12:31,030 --> 00:12:33,010
Yeah, that looks better,
198
00:12:33,010 --> 00:12:34,550
and this will look even better
199
00:12:34,550 --> 00:12:37,070
once we have the actual navigation here,
200
00:12:37,070 --> 00:12:41,950
which is what we're gonna do in the next lecture, okay?
201
00:12:41,950 --> 00:12:44,890
So for now everything looks perfect,
202
00:12:44,890 --> 00:12:48,103
let me just reduce here the viewport so we can see that.
203
00:12:49,520 --> 00:12:53,563
So you see that always, of course, we keep this space here,
204
00:12:55,620 --> 00:12:59,140
and let's see here also oUr header,
205
00:12:59,140 --> 00:13:02,520
and of course, some things here are not perfect yet,
206
00:13:02,520 --> 00:13:05,990
but we will fix that later using media queries.
207
00:13:05,990 --> 00:13:08,760
So remember that is the technique that we use
208
00:13:08,760 --> 00:13:11,210
in order to adjust our layout
209
00:13:11,210 --> 00:13:16,010
or visual styles for different viewport width, right?
210
00:13:16,010 --> 00:13:18,700
However, there is something that we can already fix
211
00:13:18,700 --> 00:13:22,100
at this point which is the fact that this content
212
00:13:22,100 --> 00:13:26,237
is now completely glued basically here to the side,
213
00:13:26,237 --> 00:13:27,630
and the same here.
214
00:13:27,630 --> 00:13:31,040
And so that should not happen because imagine that the user
215
00:13:31,040 --> 00:13:34,723
has exactly this screen width right here.
216
00:13:35,630 --> 00:13:37,550
This doesn't look so nice,
217
00:13:37,550 --> 00:13:41,160
and so let's add basically some padding here
218
00:13:41,160 --> 00:13:42,663
to this Hero element.
219
00:13:45,890 --> 00:13:49,103
So yeah, that's right here.
220
00:13:50,130 --> 00:13:53,513
So we have of course a margin to center it horizontally,
221
00:13:54,600 --> 00:13:57,913
and so let's add, as I just said, some padding here.
222
00:14:00,253 --> 00:14:04,153
And so we will then see and inspect exactly how this works.
223
00:14:05,000 --> 00:14:08,710
So maybe 48 pixels is a bit too much here,
224
00:14:08,710 --> 00:14:12,333
let's go one step down, which is 3.2 REM.
225
00:14:17,100 --> 00:14:20,687
And so this is what I mean, right?
226
00:14:22,220 --> 00:14:26,100
So now this space stays here it is 3.2 padding
227
00:14:26,100 --> 00:14:28,390
because the element still goes all the way
228
00:14:28,390 --> 00:14:30,680
here to the end, of course,
229
00:14:30,680 --> 00:14:32,430
which is what I wanted to show you.
230
00:14:35,300 --> 00:14:39,010
So the Hero still goes, as I said, from left to right,
231
00:14:39,010 --> 00:14:40,980
but then we have these green bars
232
00:14:40,980 --> 00:14:44,280
which is the padding and only inside of that padding
233
00:14:44,280 --> 00:14:46,713
then we have the content, right?
234
00:14:48,590 --> 00:14:51,010
So we also have to add margin here,
235
00:14:51,010 --> 00:14:54,180
and of course, the padding here on section Hero,
236
00:14:54,180 --> 00:14:56,760
and probably we could have just added dis padding
237
00:14:56,760 --> 00:14:58,790
also to the section Hero,
238
00:14:58,790 --> 00:15:02,440
but, well, I think it is a bit more natural
239
00:15:02,440 --> 00:15:04,683
and easier to understand like this.
240
00:15:06,770 --> 00:15:08,730
Okay, and with this,
241
00:15:08,730 --> 00:15:12,090
I think we're actually ready to tackle the navigation here
242
00:15:12,090 --> 00:15:13,563
in the next lecture.
18641
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.