Voiceover: Hi there. Let's build the first section 2 2
of our project, the header. 3 3
So this is the sketch for the header, 4 4
as I've showed you before, and on the right side 5 5
is the final result that we'll get after this lecture. 6 6
So we have a nice headline and two buttons in the middle, 7 7
and at the upper part we have the Omnifood logo, 8 8
and the Navigation on the right side. 9 9
It looks really great, right? 10 10
So, this is what we'll learn in this section. 11 11
I think it is a good idea to tell you in each 12 12
of the following lectures, all the new things that 13 13
you're going to learn in that lecture. 14 14
This way when you want to review these lectures someday, 15 15
it will be easier for you to find what you're looking for. 16 16
Also, you'll get a feeling of what you will achieve 17 17
after each lecture. 18 18
Now, this is the first lecture in which we will actually 19 19
build our website, and there is already so much to learn. 20 20
We'll meet new HTML elements such as 21 21
header, nav, ul, and li. 22 22
We'll learn how to make a background image darker in CSS 23 23
so that we can put text on it. 24 24
We will learn how to make that image exactly as high as 25 25
the browser viewport, and then we'll make 26 26
a vertically and horizontally centered box, 27 27
with some text and buttons in it. 28 28
And we'll actually design those buttons as well. 29 29
Then we'll learn the best way to style links in CSS. 30 30
And we'll even make a simple CSS3 animation 31 31
with these buttons. 32 32
And finally, we'll make a simple navigation. 33 33
So let's waste no more time, and go straight back 34 34
to brackets. 35 35
And so, this is how we left our HTML document 36 36
after the last lecture. 37 37
We'll delete this, you don't need it anymore. 38 38
And now we want to start building our header. 39 39
And HTML actually has a nice element for us, 40 40
called exactly header, and this is where we will put 41 41
the logo, the navigation, the hero image, 42 42
the main heading, and those buttons 43 43
that I showed you in the images before. 44 44
Now the header element works basically like 45 45
a usual div element, which means that it's 46 46
a container, to put some content. 47 47
There are other elements like that, 48 48
like nav for navigation, 49 49
the footer element for the footer, 50 50
the main element for the main content, et cetera. 51 51
By using the header element instead of a simple div, 52 52
we tell search engines such as Google 53 53
this is our header and not some div element with no meaning, 54 54
so this gives our container a meaning. 55 55
So let's start by create the HTML 56 56
that we will then later style with CSS, 57 57
and for that we need our content. 58 58
I hope you already downloaded it, 59 59
I have it here on my desktop, so let's 60 60
just put it here, and unzip it. 61 61
Alright, down here we have the content. 62 62
I made three files which have exactly the same content, 63 63
one for Microsoft Word, one for the Mac app Pages, 64 64
and if you don't have any of those just use this file. 65 65
I will open this one, and so this is the content 66 66
that we will put on our webpage. 67 67
And we're here at Section 0 which is 68 68
the header with hero image and navigation. 69 69
And that's our headline, and I will just copy it 70 70
because we will need it in a minute. 71 71
So back here. 72 72
As I told you, we will have a vertically and horizontally 73 73
centered container, where that headline will be. 74 74
So let's first make a div element for that container, 75 75
and I will call it hero-text-box because 76 76
this is a text box which floats over the hero image, 77 77
which is the big background image. 78 78
Alright, so this will be the box that we will center 79 79
in a minute, using some CSS. 80 80
Now that, my heading that we just copied, and here it is. 81 81
And now we want some buttons, 82 82
and for buttons we use the link element 83 83
that we will then style with CSS 84 84
to make them look like nice designed buttons. 85 85
So we need the href attribute, and since we don't have 86 86
anywhere to point at this moment, 87 87
so we have no document where we want to link to, 88 88
we put a dummy link, and that's usually made 89 89
using this hash symbol. 90 90
So this link points nowhere right now. 91 91
So let me just get this text, it is I'm hungry, 92 92
and this button will later take us all the way down 93 93
to the sign up section. 94 94
And the second button will be Show me more. 95 95
So in this one, I'm just copying it here, is I'm hungry, 96 96
and now I duplicate it as I've showed you before 97 97
with Command + D, or Ctrl + D, 98 98
and in here goes Show me more. 99 99
Alright, so now let's style the whole thing using CSS. 100 100
But first, let's see what it looks like. 101 101
Alright, so this is what we just put on our HTML file. 102 102
So let's style it here. 103 103
Add a new rule here for the header, 104 104
and the first thing that we're going to do 105 105
is to set the background image, 106 106
and in order to do that let's go back to our folder. 107 107
And we have the Omnifood contents, 108 108
and the background image that Omnifood gave us 109 109
is called hero, this hero image. 110 110
So this is the image that we will use 111 111
as our background image. 112 112
I actually got this image from one of the resources 113 113
that you can find in the course e-book. 114 114
So you probably already know where to put this, 115 115
it's in the resources folder, css, and then images, 116 116
because it's a background image, 117 117
and we will use it in a CSS file from the CSS file. 118 118
So now how do we use this in CSS? 119 119
It's quite simple. 120 120
Just say background-image, and then we use URL, 121 121
img, and then the hero.jpg. 122 122
So this is our image. 123 123
Very easy to incorporate, right? 124 124
We can even see if that's the correct image, 125 125
and yeah it is. 126 126
So let's see how this looks like. 127 127
Alright, now the problem that you see is that 128 128
the image only fills the part that has some content here, 129 129
so what we want to do now is to make this header 130 130
as high as the viewport, which means from here 131 131
all the way down here. 132 132
So we want to fill the whole viewport with the image. 133 133
So we need to set the height of the header element. 134 134
And how do we do that? 135 135
There's a simple trick which is this one. 136 136
We just set it to 100 view H, and this means 137 137
it's 100% of the viewport. 138 138
Very simple. 139 139
So let's see if it worked. Alright. 140 140
Now the image looks like we want it. 141 141
Now we have some problem here, which is this wide space here 142 142
and I will tell you why this happens. 143 143
This is pretty annoying, it's because of this h1 element 144 144
which has a-- 145 145
I will tell you this, using the Chrome Developer Tools 146 146
as I've showed you before. 147 147
Let me just show this quickly, 148 148
so as you see with the orange bars, 149 149
this has some margin, top and bottom. 150 150
And this is because of the normalized CSS file. 151 151
So we have to get rid of that 152 152
before we can do anything else. 153 153
This is really annoying, so let me just margin 0 154 154
and now it should be gone. 155 155
Now the image doesn't look quite as we want it right, 156 156
because it's way too zoomed in, so we have to tell 157 157
the browser in some way that we want to see the whole image 158 158
and we do this using the background-size. 159 159
Background-size, and we say cover. 160 160
And also we want to have the background centered, 161 161
so we use background-position: center. 162 162
And that's much nicer, very very good. 163 163
Now if we would re-size this window, 164 164
it will always find a way to let us see 165 165
all the image. 166 166
So now let's find a way to center this box, 167 167
which has this title and those buttons 168 168
that we'll style in a minute. 169 169
So this is called, let me see, hero-text-box. 170 170
We'll copy it actually, and paste it here. 171 171
So how do we do this? 172 172
We will actually not use the responsive fluid grid 173 173
that we set up before, because we want this box 174 174
to be an absolutely positioned box. 175 175
Because that's the only way we can vertically 176 176
and horizontally center it. 177 177
And I will assign the width of the row, 178 178
which is if you remember 1140 pixels. 179 179
So this will look like a row because it has the same width, 180 180
but it will be absolutely positioned. 181 181
And in order to do that, we say 182 182
we want it 50% from the top, 183 183
and 50% from the left. 184 184
So let's see what this looks like. 185 185
So 50% from the left, and 50% from the top, 186 186
okay but this looks weird right? 187 187
So we have to use a little trick here 188 188
which is with the transform property, 189 189
and we use translate and then -50%, -50%, 190 190
and what this does is to translate the element 191 191
half of its width and of its height, up and to the left. 192 192
So now it is centered, it's nicely centered as you want. 193 193
So it always stays in the middle here. 194 194
Now as you can see the contrast between 195 195
the text and the image is way too low. 196 196
For example right here, we have a very hard time 197 197
to see anything. 198 198
And that's what we learned right in the first section, 199 199
in the web design section, that it is a bad idea 200 200
to just put text on image. 201 201
And we're gonna use one of the solutions, 202 202
which is simply make the image darker, 203 203
so let's see how we can do that. 204 204
So a little trick that we use here, 205 205
looks like we'll put a linear gradient 206 206
on top of the image. 207 207
So this is like using two background images 208 208
at the same time. 209 209
So we have this linear gradient, 210 210
and the image that we just specified before. 211 211
And in here, we can say two colors. 212 212
Let me start with black so that you can get the idea, 213 213
and since we don't want a gradient actually, 214 214
we want just a color, we make it from black to black 215 215
so from one color to the same color. 216 216
Since we don't want a complete black, 217 217
we use the transparency here. 218 218
And let's put it to 70% transparency, 219 219
so as we saw before when we use transparency 220 220
it changes here to this rgba code. 221 221
So I will just put the same thing here, 222 222
and now we have this nice 70% transparent black color 223 223
which is on top of the hero image. 224 224
And this is how it looks, much better right? 225 225
Okay, so I think the background image here 226 226
is now formatted, so let's end the first part 227 227
of building our header right here. 228 228
In the next video we'll start to format 229 229
the main heading here, and these two buttons.