Original subtitles

Next up let's build or 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.

But again, now the navigation and the logo,

I actually want them outside of a fixed width 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 it 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 the 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 have 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 odd 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 omnifoodlogo.png.

So that is one part and then we also want to 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 the 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,

and 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 obvious 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 domain.

But in here we can just put it inside domain 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 isn't 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 form at 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.

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.

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?

Actually right 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.4 REM,

No, okay, I was told 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 flexbox 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 these 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.6 REM.

Now, why am I doing that

is usually we simply allow the content to define the height

and then adding some petting 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 at the space

between the sides of the viewport,

so the sides of the browser and a discontent 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 a 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 here to 0.5.

So we're going to do 4.8 a REM, 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 viewport so we can see that.

So you see that always, of course, we keep this space here,

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

or visual styles for different viewport 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.

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 and inspect exactly how this works.

So maybe 48 pixels is a bit too much here,

let's go one step down, which is 3.2 REM.

And so this is what I mean, right?

So now this space stays here it is 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

then we have the content, right?

So we also have to add margin here,

and of course, the padding here on section Hero,

and probably we could have just added dis 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.