Teacher: Next up, let's build our website header.
And the website header will just be something very simple.
So we're just gonna put the logo here on the left side
and some simple navigation here on the right side.
So just like I showed you in the sketch
that I showed in the beginning of building
this hero section.
Now this content, so the logo and the navigation,
I actually don't want them to be
in a "fixed with" container like this one here.
So this one here, this hero section,
is exactly 1300 pixels wide, right?
But again, now the navigation and the logo
I actually want them outside
of a "fixed with" container like that,
because that is something that I personally like a lot,
and also I have seen that on many websites.
And so yeah, I like that and I thought we could implement
that here just to practice a little bit more
and not always do everything in the same way, right?
So let's go to our markup
and add the header right here before this section.
So I'm actually going to use now the header element
and I will still give it a class name and call it header.
And again, that is because I want to have it as a rule
to only select based on class names, okay?
With the exception of sometimes then selecting
elements inside of classes.
But still, the beginning is always with class selectors.
Okay?
So remember that the HTML5 element header
is basically to be used at the beginning of a website
or also of some specific content like in a section
or in an article.
And we did actually just that
in our very first project
where we used the header element
at the beginning of the website
and then also at the beginning of the article.
Remember that?
So here then let's use an image for the logo
with the class of, well, simply logo.
Then we also need the alt text.
And here we just say it's the "Omnifood logo"
and then the source of image.
And then here it's actually this one, omnifood-logo.png.
So that is one part.
And then we also want the navigation.
And for that, remember we use the nav element,
and the nav element is yet another
semantic HTML5 element, which should be used
for major navigation blocks that we have on our page.
So not all collections of links need to be wrapped in
a nav element, but here semantically
we do want to have the major navigation of our page,
and so it makes sense to then use exactly this element
with that meaning for it.
Let's just give it a class, let's call it "main-nav"
because in our footer, we will have another navigation
and then we're going to need another nav element there.
And here for now, I will just write some text, okay,
and then let's actually wrap the rest of the content here
inside of the main element.
And once again, the main element is a new HTML5 element.
And what it means is basically
that it contains the main content
or the main area of a certain web page
so of a certain web document like this HTML5 page.
And once again, the main element is a new HTML5 element,
so a semantic element.
And what it means is that it contains basically
the main part or the main area of a web document.
Now, what it does not include is content
that is repeated across multiple pages,
and so that would be the case of a header.
So basically this part here, if we had multiple pages,
we could use the exact same header on all of the pages.
And so that means that it's not part
of the main part of any webpage,
and the same thing for the overall page footer.
So that one should also always be outside of the main,
but in here we can just put it inside the main element.
And so we make it a little bit more semantic
so we don't even need to give it any class
because we're not interested in styling it.
This is just to let, for example, screen readers
and search engines know that, well,
this is exactly as I said before, the main part of our page.
Okay, so let's check it out.
And the logo is huge of course.
So as always, we need to start by fixing the images here.
Okay? And before we do any of that, it's actually time
to now format this file here a little bit.
So what I will do is to put like general
and repeatable components at the beginning
and then create some division for each of the sections.
Okay?
So we can add some stars here
to create some nice division
and then let's say "general components"
and then here, copy that.
Then here we have the hero section.
Then we have the header.
Okay, so the heading primary is actually used just once,
but still I will put it here in the general components.
So that's also why we gave it this
kind of reusable name here, right?
Let's actually write it here as well, reusable.
And again, that's why it does have this
kind of generic name there.
The same for the buttons.
They are not just to be used here
but everywhere throughout the entire page.
So let's grab them, put them here.
Nice.
Then here is everything about the hero.
But then again, this one is one of the repeatable ones
because this is the helper class that we created
and which might be used everywhere.
Okay? And this one is actually everything about the hero.
And so now here, let's go to the header
and format the logo a little bit.
And usually I like to style the height of images
which is a bit easier to control, I think.
So height, let's go here to our spacing rules.
And for example, let's try 24 pixels, 2.4rem.
Okay, so that looks quite good.
And so now let's work on the layout a little bit
and also on the visual styles.
So as I mentioned before, we want each of them
pushed to one of the sides.
This one on the left side, this one on the right side.
And actually we already did that before,
so this shouldn't be too hard.
So we can simply use flex box here, of course,
where the header must be the flex container.
And then remember, the trick to push each element
to one of the sides is to use justify content space between.
Now we should also vertically align them.
Okay, that looks quite good already.
But of course we need some spacing.
And also we kind of want to make the header look
as if it is part of this whole section here, right?
And so we need to give it the exact same background color.
So let's fix the background color here and the spacing.
So background color is not so hard.
It's just this one here, actually exactly this line of code.
So no need to type it out all again.
And now let's fix the spacing.
And here what I'm going to do is to actually
give this header a fixed height.
So using the height property and setting it,
for example again, to 9.6rem.
Now, why am I doing that
if usually we simply allow the content to define the height
and then adding some padding, usually.
Well, the reason for that is because in this case
we actually want to make this navigation sticky a bit later.
So sticky meaning that as we scroll down the page
it would stay at the same position.
And for this to work
it's a bit easier when the height is actually fixed.
Okay, so let me write that here.
So because we want it to be sticky later
but of course it would be just fine
if you didn't have this condition here
of making it sticky later, to simply use padding.
Okay? Now, we will still need padding,
but only on the sides.
So padding.
And so on the top we actually want zero padding.
So top and bottom.
And then on the right, let's see what we have here.
Let's use 48 pixels.
So that will then basically be the space
between the sides of the view port,
so the sides of the browser, and this content here.
So let's check that out.
And yeah, this looks quite beautiful.
I just think that maybe the logo here is a bit too large.
And also the spacing here now is way too big.
So we have a lot of spacing here between now
this header basically,
and well, this section here, let me show you.
That's because here we have this huge padding
of 96 pixels on the top, right?
Then we also have 96 pixels here of the height
which then makes the whole thing like really big.
So let's decrease the padding at the top here
and also decrease the logo a little bit.
So starting with that,
and here we should probably not go to our next value.
So 16 would be way too low
because we actually just want to reduce it a little bit.
And so we can just break the rule here
a little bit basically.
So maybe like this.
And then let's reduce the padding at the top here to half.
So we're going to do 4.8rem, then on the side zero,
bottom 9.6, and on the other side, zero as well.
Yeah, that looks better.
And this will look even better
once we have the actual navigation here
which is what we're gonna do in the next lecture, okay?
So for now, everything looks perfect.
Let me just reduce here the view port
so we can see that.
So you see that always, of course
we keep this space here, right?
And let's see here also our header.
And of course, some things here are not perfect yet,
but we will fix that later using media queries.
So remember that is the technique that we use
in order to adjust our layout
and our visual styles for different view port width, right?
However, there is something that we can already fix
at this point, which is the fact
that this content is now completely glued
basically here to the side.
And the same here.
And so that should not happen,
because imagine that the user has exactly this
screen width right here.
So this doesn't look so nice.
And so let's add basically some padding here
to this hero element.
So yeah, that's right here.
So we have of course, a margin to center it horizontally.
And so let's add, as I just said, some padding here.
And so we will then see in the inspector
exactly how this works.
So maybe 48 pixels is a bit too much here.
Let's go one step down, which is 3.2rem.
Okay? And so this, yeah, this is what I mean, right?
So now this space stays here, this 3.2 padding,
because the element still goes all the way here to the end,
of course, which is what I wanted to show you.
So the hero still goes, as I said, from left to right
but then we have these green bars, which is the padding
and only inside of that padding
can we have the content, right?
So we also have that margin here.
And of course, the padding here on section hero.
And probably we could have just added this padding also
to the section hero, but well,
I think it is a bit more natural
and easier to understand like this.
Okay.
And with this, I think we're actually ready
to tackle the navigation here in the next lecture.