Voiceover: Welcome back to building the header. 2 2
This is part three, let's continue. 3 3
So this already looks very good. 4 4
Now what's missing here is the logo image here, 5 5
we want the logo image here and we want 6 6
some simple navigation to show right here. 7 7
But first of that, we see that our code has grown 8 8
a little bit and if we keep adding more and more code, 9 9
we will at some point get completely lost in here. 10 10
So let's make a nice code structure here so that 11 11
we organize everything into logical pieces of code. 12 12
And for that we will use CSS comments, and comments 13 13
are like code that will not be seen by the browser. 14 14
It's like invisible code it's just for us to write something 15 15
here which will not affect any of our web page. 16 16
So I will just show you how. 17 17
Comments in CSS are using / and *. 18 18
And you see everything down here got gray 19 19
now because I opened a comment. 20 20
Now I can write something here but then close it again. 21 21
And now the rest of the CSS code is back to normal. 22 22
So I usually like to do it like this, 23 23
I put some lines here to separate some stuff. 24 24
Then I write what this code section is all about. 25 25
Here I will say basic setup. 26 26
Then I close this, but then another line like this here. 27 27
Alright. 28 28
I will copy this so that we can put 29 29
it in our styles as well. 30 30
So down here I can say like 31 31
these are reusable components and this 32 32
is because we will use those all over the website. 33 33
But then we have things like this one 34 34
which should go into a different place. 35 35
Let me just cut them and put them down here. 36 36
So I will put one of the sections for each of 37 37
the sections that we will build on our website. 38 38
So when we later browse our code, 39 39
we know exactly where to look like for different stuff. 40 40
So, header. 41 41
So all the code for our header goes here. 42 42
Now the buttons that we are going to reuse may be in 43 43
different places can stay right here. 44 44
Now we'll just say that these are buttons. 45 45
Those are buttons and these are headings. 46 46
Because you know we will maybe 47 47
use some of them again later. 48 48
Headings. 49 49
And we can keep adding more comments 50 50
like that later down the road. 51 51
So everything is nicely separated and then we know exactly 52 52
where to look for our CSS code. 53 53
So we already learned a lot of stuff in this lecture 54 54
but we will go even further because we will now 55 55
put a logo and a navigation bar on top of this page. 56 56
So we formatted this, everything inside of this content, 57 57
and now let's add a nav element, 58 58
where the navigation and the button will go. 59 59
And now to center everything inside of that 60 60
navigation I will use a row. 61 61
Do you remember we said that row will always be centered. 62 62
So this will be a row. 63 63
Yes, alright. 64 64
Now we want the logo to be here and for that let me just 65 65
first put the logo inside our folder. 66 66
So I will go back to our contents folder, 67 67
and this is the content Omni Foot provided us. 68 68
And actually most of these are images, 69 69
so I will just put all of them, we'll copy them, 70 70
and put all of them inside our images. 71 71
Now I'll paste them here, okay. 72 72
Except for maybe the text, I will delete the text here. 73 73
And alright, great. 74 74
So we want the white logo. 75 75
They actually gave us two logos a black one and a white one. 76 76
And we want the white logo here because the background 77 77
is so dark that the best thing to do 78 78
is to use the white logo here. 79 79
Now the best way to put an image, 80 80
you probably remember how to do that. 81 81
It's image, then source, and we already 82 82
know how it is, where it is right? 83 83
So we go to resources, image, and now 84 84
it should be down here somewhere. 85 85
It is logo white. 86 86
Alright, and now the alternative text, 87 87
which we will say is just Omni Foot logo. 88 88
And of course we have to give it a class 89 89
so that we can format it. 90 90
The logo should be just right for this. 91 91
Alright. 92 92
And now for the navigation. 93 93
Now the navigation is usually done 94 94
using a so called unordered list. 95 95
Unordered lists is just like some bullet points 96 96
where each bullet point will be 97 97
an element of the navigation. 98 98
So how do we do that? 99 99
Ul stands for an ordered list, 100 100
and let's just call it main nav. 101 101
And now for each of the elements inside 102 102
of an ordered list, we say le. 103 103
Which means like list element. 104 104
And now each of the list elements will be a link 105 105
because that's what a navigation is all about, right? 106 106
Navigation is like a collection of links. 107 107
So let's see what Omni Foot had in mind 108 108
for this navigation, what they want there. 109 109
So they want, let me just copy this so it's easier. 110 110
Just down here, I will delete it after this. 111 111
So these will be links. 112 112
So, a element, hrev, 113 113
hrev will be again it will point nowhere for now. 114 114
So it will be like an empty link 115 115
so I'll use the hash sign again. 116 116
And this is here, food delivery. 117 117
Alright? 118 118
And as before I will just duplicate this with command d. 119 119
We have four, so duplicate it three times. 120 120
The next one is how it works 121 121
and our cities, and sign up. 122 122
Alright. 123 123
Let's see. 124 124
Now the image is huge, it's way too big so 125 125
let's start by formatting the image. 126 126
I don't know why the unordered list isn't showing up here 127 127
but we'll, ah okay it's actually here. 128 128
So you see these bullet points and you see those blue links. 129 129
We will just format this in a minute, 130 130
let's start with the logo. 131 131
So the class is called logo. 132 132
So it's in the header so I will put it right here. 133 133
So logo, so logo I think the height, 134 134
the optimal height will be 100 pixels 135 135
and then the width should be determined automatically 136 136
so as before we'll say auto here. 137 137
Okay now we want this to be floated all to the left side. 138 138
So we can use the float property here 139 139
and say it should be on the left side. 140 140
Alright then we can actually already do some things 141 141
for the main navigation . 142 142
Main navigation. 143 143
Just say that it should float to the right side. 144 144
So this is what it looks like. 145 145
So the food delivery logo is right here on this side 146 146
and the navigation is on the right side, 147 147
just as we specified it before. 148 148
Now we have to format this navigation, 149 149
and I will show you how and this is actually 150 150
the way everyone formats their navigations. 151 151
So the first thing here is in this unordered list, 152 152
because main nav is an unordered list, right, 153 153
is to say that we want to get rid of those bullet points. 154 154
So we say list style none. 155 155
Okay and that should do it for now. 156 156
Now we want to select the li elements inside of this. 157 157
Let me show you it to you, so we want to select this. 158 158
And we already learned how to do that before, right? 159 159
So we say main navigation and we want to 160 160
select all li elements inside of them. 161 161
So this is how we do it: 162 162
main nav and then all li elements inside it. 163 163
And again we want to change the way they are displayed. 164 164
So they are now block elements and we want them 165 165
to be inline blocks so that they can be side by side 166 166
and we want some margin between them. 167 167
Let's say we want a left margin of 40 pixels. 168 168
So each of those blocks will have 169 169
a margin on the left side of 40 pixels. 170 170
And this is what it looks like. 171 171
So the li elements are now nicely aligned 172 172
such as we want them. 173 173
And now it's just time to format 174 174
how the links inside of them look. 175 175
And in order to do that, we can even go further down 176 176
and say main nav then we want to select the li elements 177 177
inside of them and then the a element 178 178
inside of each of the li. 179 179
Easy as that. 180 180
Now we want them to be wide and such as before 181 181
we want to get rid of that text underline, 182 182
so we say text decoration none. 183 183
And I think it will look great if we make them upper case. 184 184
So text transform again, upper case and then 185 185
let's specify the font size as well. 186 186
This shouldn't be too big because as you know 187 187
our base font size is 20 pixels and let's 188 188
say you want it to be 18 pixels. 189 189
But as I said before, we will never use the unit in pixels. 190 190
We want it to be 18 pixels, but expressed in percentage. 191 191
So what do we do? 192 192
We divide that 18 pixels we want by this base, 193 193
base text size. 194 194
So 18 divided by 20 which is 0,9 which is 90 percent. 195 195
So we will just say we want the font size to 90 percent 196 196
and then it will give us 18 pixels. 197 197
And that's how it looks like. 198 198
Not bad, right? 199 199
Now we probably want some distance between the logo 200 200
at the top and then center 201 201
this navigation so that here, 202 202
like here on the middle of this logo. 203 203
And in order to do that, we will specify 204 204
a margin on the top of the logo. 205 205
So margin top, let's say 20 pixels and margin, 206 206
no it's right here. 207 207
So the main nav should have a margin top of, 208 208
I don't know, 60 pixels probably. 209 209
And yeah this looks pretty great, right? 210 210
This may be a little bit too much, 211 211
I will say 55 pixels but it doesn't really matter. 212 212
Okay, now very good. 213 213
One thing is we want some hover effect right here. 214 214
And one beautiful thing that we can 215 215
do that you probably saw on many websites is to, 216 216
once we hover an element, give it some border, okay? 217 217
A two pixel border I think would look great. 218 218
So one thing that we did not yet do here 219 219
is to say that this is a link. 220 220
And after that say that a visited link 221 221
should look exactly the same. 222 222
So this is exactly what we did with the buttons here before. 223 223
So this is the link at the visited state 224 224
and now we want some hover and active states. 225 225
Hover and active states. 226 226
And what we want here is a nice border at the bottom. 227 227
With let's say two pixels, again a solid line, 228 228
and the color can be our orange color that would look great. 229 229
So our orange color is this one here, right? 230 230
And we will probably use this a lot of time, 231 231
so I will just make a comment here and paste it. 232 232
Orange color. 233 233
So each time we want it we know where to find it, okay? 234 234
So we want this to be orange. 235 235
Now in order for this to happen we need this border 236 236
to exist before we actually hover it, 237 237
but since we don't want to see it we make it transparent. 238 238
So now I think we can do in CSS 239 239
is we can say transparent, transparent. 240 240
So it will not be visible until we actually hover it. 241 241
And such as with the buttons, 242 242
we want a nice transition here. 243 243
And you know already how to do this so we say transition 244 244
and then the property we want to emanate. 245 245
So it's border bottom in this case, 246 246
and again 0.2 second interval in between those. 247 247
So how does it look like? 248 248
Okay it works, right? 249 249
Now let's, it doesn't look so good because we want 250 250
some more space between the line and the text, right? 251 251
And there's an easy way to do this and maybe 252 252
you can guess already how we will do this. 253 253
It is to specify a padding for the link. 254 254
And padding is an inside space, so a space inside 255 255
of the box which goes between the content and the border. 256 256
So we'll add some padding to the bottom and also to the top. 257 257
And we can make it for example 8 pixels. 258 258
We put it here. 259 259
So want a padding top and bottom of 8 pixels, 260 260
so we put it here and left and right 0 pixels. 261 261
And I think now everything is perfect. 262 262
Just check it. 263 263
Alright, this looks absolutely fantastic, 264 264
don't you think so? 265 265
So the first section is completely designed. 266 266
We have learned a lot of stuff in this section. 267 267
Congratulations, you just built the first 268 268
section of your real world website! 269 269
Isn't that great? 270 270
This was a lot of stuff to absorb and if you didn't 271 271
understand everything right away, 272 272
don't worry you can always go back if you want. 273 273
So now come with me to the next section.