Voiceover: Hi there. Let's build the first section
of our project, the header.
So this is the sketch for the header,
as I've showed you before, and on the right side
is the final result that we'll get after this lecture.
So we have a nice headline and two buttons in the middle,
and at the upper part we have the Omnifood logo,
and the Navigation on the right side.
It looks really great, right?
So, this is what we'll learn in this section.
I think it is a good idea to tell you in each
of the following lectures, all the new things that
you're going to learn in that lecture.
This way when you want to review these lectures someday,
it will be easier for you to find what you're looking for.
Also, you'll get a feeling of what you will achieve
after each lecture.
Now, this is the first lecture in which we will actually
build our website, and there is already so much to learn.
We'll meet new HTML elements such as
header, nav, ul, and li.
We'll learn how to make a background image darker in CSS
so that we can put text on it.
We will learn how to make that image exactly as high as
the browser viewport, and then we'll make
a vertically and horizontally centered box,
with some text and buttons in it.
And we'll actually design those buttons as well.
Then we'll learn the best way to style links in CSS.
And we'll even make a simple CSS3 animation
with these buttons.
And finally, we'll make a simple navigation.
So let's waste no more time, and go straight back
to brackets.
And so, this is how we left our HTML document
after the last lecture.
We'll delete this, you don't need it anymore.
And now we want to start building our header.
And HTML actually has a nice element for us,
called exactly header, and this is where we will put
the logo, the navigation, the hero image,
the main heading, and those buttons
that I showed you in the images before.
Now the header element works basically like
a usual div element, which means that it's
a container, to put some content.
There are other elements like that,
like nav for navigation,
the footer element for the footer,
the main element for the main content, et cetera.
By using the header element instead of a simple div,
we tell search engines such as Google
this is our header and not some div element with no meaning,
so this gives our container a meaning.
So let's start by create the HTML
that we will then later style with CSS,
and for that we need our content.
I hope you already downloaded it,
I have it here on my desktop, so let's
just put it here, and unzip it.
Alright, down here we have the content.
I made three files which have exactly the same content,
one for Microsoft Word, one for the Mac app Pages,
and if you don't have any of those just use this file.
I will open this one, and so this is the content
that we will put on our webpage.
And we're here at Section 0 which is
the header with hero image and navigation.
And that's our headline, and I will just copy it
because we will need it in a minute.
So back here.
As I told you, we will have a vertically and horizontally
centered container, where that headline will be.
So let's first make a div element for that container,
and I will call it hero-text-box because
this is a text box which floats over the hero image,
which is the big background image.
Alright, so this will be the box that we will center
in a minute, using some CSS.
Now that, my heading that we just copied, and here it is.
And now we want some buttons,
and for buttons we use the link element
that we will then style with CSS
to make them look like nice designed buttons.
So we need the href attribute, and since we don't have
anywhere to point at this moment,
so we have no document where we want to link to,
we put a dummy link, and that's usually made
using this hash symbol.
So this link points nowhere right now.
So let me just get this text, it is I'm hungry,
and this button will later take us all the way down
to the sign up section.
And the second button will be Show me more.
So in this one, I'm just copying it here, is I'm hungry,
and now I duplicate it as I've showed you before
with Command + D, or Ctrl + D,
and in here goes Show me more.
Alright, so now let's style the whole thing using CSS.
But first, let's see what it looks like.
Alright, so this is what we just put on our HTML file.
So let's style it here.
Add a new rule here for the header,
and the first thing that we're going to do
is to set the background image,
and in order to do that let's go back to our folder.
And we have the Omnifood contents,
and the background image that Omnifood gave us
is called hero, this hero image.
So this is the image that we will use
as our background image.
I actually got this image from one of the resources
that you can find in the course e-book.
So you probably already know where to put this,
it's in the resources folder, css, and then images,
because it's a background image,
and we will use it in a CSS file from the CSS file.
So now how do we use this in CSS?
It's quite simple.
Just say background-image, and then we use URL,
img, and then the hero.jpg.
So this is our image.
Very easy to incorporate, right?
We can even see if that's the correct image,
and yeah it is.
So let's see how this looks like.
Alright, now the problem that you see is that
the image only fills the part that has some content here,
so what we want to do now is to make this header
as high as the viewport, which means from here
all the way down here.
So we want to fill the whole viewport with the image.
So we need to set the height of the header element.
And how do we do that?
There's a simple trick which is this one.
We just set it to 100 view H, and this means
it's 100% of the viewport.
Very simple.
So let's see if it worked. Alright.
Now the image looks like we want it.
Now we have some problem here, which is this wide space here
and I will tell you why this happens.
This is pretty annoying, it's because of this h1 element
which has a--
I will tell you this, using the Chrome Developer Tools
as I've showed you before.
Let me just show this quickly,
so as you see with the orange bars,
this has some margin, top and bottom.
And this is because of the normalized CSS file.
So we have to get rid of that
before we can do anything else.
This is really annoying, so let me just margin 0
and now it should be gone.
Now the image doesn't look quite as we want it right,
because it's way too zoomed in, so we have to tell
the browser in some way that we want to see the whole image
and we do this using the background-size.
Background-size, and we say cover.
And also we want to have the background centered,
so we use background-position: center.
And that's much nicer, very very good.
Now if we would re-size this window,
it will always find a way to let us see
all the image.
So now let's find a way to center this box,
which has this title and those buttons
that we'll style in a minute.
So this is called, let me see, hero-text-box.
We'll copy it actually, and paste it here.
So how do we do this?
We will actually not use the responsive fluid grid
that we set up before, because we want this box
to be an absolutely positioned box.
Because that's the only way we can vertically
and horizontally center it.
And I will assign the width of the row,
which is if you remember 1140 pixels.
So this will look like a row because it has the same width,
but it will be absolutely positioned.
And in order to do that, we say
we want it 50% from the top,
and 50% from the left.
So let's see what this looks like.
So 50% from the left, and 50% from the top,
okay but this looks weird right?
So we have to use a little trick here
which is with the transform property,
and we use translate and then -50%, -50%,
and what this does is to translate the element
half of its width and of its height, up and to the left.
So now it is centered, it's nicely centered as you want.
So it always stays in the middle here.
Now as you can see the contrast between
the text and the image is way too low.
For example right here, we have a very hard time
to see anything.
And that's what we learned right in the first section,
in the web design section, that it is a bad idea
to just put text on image.
And we're gonna use one of the solutions,
which is simply make the image darker,
so let's see how we can do that.
So a little trick that we use here,
looks like we'll put a linear gradient
on top of the image.
So this is like using two background images
at the same time.
So we have this linear gradient,
and the image that we just specified before.
And in here, we can say two colors.
Let me start with black so that you can get the idea,
and since we don't want a gradient actually,
we want just a color, we make it from black to black
so from one color to the same color.
Since we don't want a complete black,
we use the transparency here.
And let's put it to 70% transparency,
so as we saw before when we use transparency
it changes here to this rgba code.
So I will just put the same thing here,
and now we have this nice 70% transparent black color
which is on top of the hero image.
And this is how it looks, much better right?
Okay, so I think the background image here
is now formatted, so let's end the first part
of building our header right here.
In the next video we'll start to format
the main heading here, and these two buttons.