All language subtitles for 110 Building the Header.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.