Original subtitles

In this video,

we're gonna build the navigation for our webpage.

And we're gonna do that right here

inside of this NAV element.

Now in our very first project,

way back at the beginning of the course,

we simply put a bunch of links,

so a bunch of anchor elements right into this NAV.

However, that is not the most semantic way

of building a navigation,

because a navigation should basically be

a list of links grouped together.

And so what we should do really

is to create an unordered list.

And then inside of that list

is where we're gonna add all our links

to the anchor elements.

So we're going to use the UL element

and let's call it the main NAV list.

Okay?

And so this is basically how everyone

does their navigations.

So they have a NAV element,

then a UL element,

then in there a bunch of LI elements.

And for each of them,

or a better inside of each of them,

we will have an anchor element.

So for now these Hrefs are going to point nowhere.

And also we don't know yet

where we want each of these links to point to.

So later we will want these links to lead

to a different section of the page.

And also, we don't know yet

where we want each of these links to go to.

I mean, later on we want each of these links

to lead to a different section

once the user clicks them,

but we don't know yet what sections those are.

So I'm just gonna write section one here for now.

Okay?

Not giving them any class just yet.

I will do that a bit later once we actually need them.

So let's just do five of them.

And then we will see as we go,

what is actually the correct number of links that we want.

Okay? Just checking it out.

But of course it will not be as we want it.

So we need to get rid of the bullet points

and we want them to be side by side.

So that is the main NAV list.

So let's add here another block for the navigation,

because here we will actually need a lot of code.

So list style should be none.

And also we want the elements to be side by side.

Display flex, right?

So as always,

or at least as many times

we reach one more times for flex box here.

Okay? And let's also add some gap here.

Let's say 3.2 REM for now,

just to have something to work with.

And now it's time to actually style the links themselves.

So not really DLI elements.

So there's not really a need to style those

because we already created

the space between them using the gap property

here on the flex container.

So without flex box,

we would now need some space between the link elements

and then we would use margin on each of them.

But again, now we don't need that.

So I'm just going to style the anchors themselves.

So main NAV link.

And let's add that to all of them.

Okay?

Also copying the class name.

And here, again,

styling both link and the visited pseudo classes for now.

So as always removing the text decoration.

I'm also going to want to give them this darker color here.

Let's make them a bit bold, but only like 500.

Not super bold because that then gives them too much focus.

And also let's use again,

the font size of not 20 pixels,

because that is reserved for the paragraph.

But one step down at 1.8 REM.

Or 1.8, right?

So again, this one here is that 20 REM or at 20 pixels.

And this one is at 1.8.

And so is this one.

Okay?

Now let's change their color here once we hover them.

So we could use some other gray color,

maybe a lighter gray,

or even a darker one.

But what I want actually is a,

is this orange color.

And I'm going to use exactly the same one

as this one because of the color contrast issue.

So not this primary color,

but actually this a bit darker one.

Okay?

And also of course we want that to happen with a transition.

And so let's actually already add that here.

So remember we used the transition property

in order to create animations

between different values for a certain property.

And here I will now start using just all.

And then again, 0.3 second.

And so this will then animate all the values

for all properties.

And again, this one we need to put

basically on the original state,

which is just link, right?

Let's grab this here

so that we can work on the hover

and active states.

And here, as I said, I want to use this darker version.

Okay?

Yep, this looks quite nice.

But now there's something that I want to do,

which is also quite common

in website navigations like this,

which is to actually have a call to action

as the very last item in the navigation.

So basically we will want to have a,

something like a button here,

which is similar to this one

and which is probably going to lead

to the same place on our website.

So basically repeating the same call to action

here and here.

So that is something quite common, as I said before.

And so let's do that.

So basically we need to style this last one here

a bit differently.

And so let me add another class here.

Okay?

Now we could have selected this one, of course,

using the LS child pseudo class,

but I actually need to style this here

in many different places.

And so, I mean, multiple times here in the CSS.

And so that would be a bit cumbersome doing it like that.

So I'm just going to leave it like this.

And so what I want to do now

is to add new styles to just this element.

And in particular, I want it to look similar to the button.

Okay?

So basically this one here.

So maybe not the font weight,

not the font size,

but the border radius and the padding.

Probably even the padding should be smaller,

but let's see.

So where's that?

And as always we also need the link

and visited pseudo classes right here.

Okay?

Now here we also want the text color to be white.

And in order for this padding here to apply,

it should be an inline block.

And actually let's add that to all of them.

So right here.

So for links, that's just a good practice

because many times we're adding some padding there.

And so usually I have to have it

of always setting these links in a navigation

to an inline block.

Okay?

Let's check that out.

And as you see, the background color is not applying.

And so this is something that we observed

before actually already.

So let me inspect this here and show you.

So we should have somewhere the style

with a different background color.

Well, actually it's not here.

So yeah, actually I didn't even write the code.

So that's why it doesn't have

the different background color.

So background color, and it's this one.

So let's see now.

And actually that does work quite nice.

Just the padding is way too big here.

And also we now have to vertically

align all of these items here

because well, this is of course not what we like to see.

So that's right here in the main NAV list,

which has the flex container.

So as you already know here,

we just use align item center

and then let's dramatically reduce the padding here.

Let's say...

So again, usually you have the system here

somewhere where you don't have to

scroll up and down all the time.

But anyway, I'm going to use a 24 and then half.

So 12.

So 1.2

and 2.4.

Okay?

And now just to make sure that this always applies,

I'm going to use that end selector

that I showed you before at some point.

So basically we want this here to apply

when both the NAV CTA class is there

and the main NAV link as well.

So we can copy this one here

and paste it here like this.

And so without any space, because like this,

it would be the descendant selector,

but like this, it means that it has to have

both the main NAV link class

and the NAV CTA class.

Okay?

And then once we do this,

this so-called specificity, as you see here,

is now three and this other style here

is just zero to zero.

And so now we can make sure

that this here will always apply.

Okay?

Now let's finally just add the hover states here as well.

Hover and active.

And so here, we simply want to make

the background color darker,

just like in our main call to action button.

Okay?

And here we do not have to add the transition here

because it is already right here

in this main NAV link,

which of course is also applying to this link right here.

Right?

So of course, all of this is now applying

to the NAV CTA because,

well, it also has that class right here.

So this code is applying and also this one here.

Okay?

So we have just one conflict, which is with the color.

And so that is the one that is being resolved now,

because here we have these three as the specificity,

and here we have two.

Okay?

So again, that's the reason why we added this part here

to this selector.

Okay?

And yeah, there we go.

Working perfectly, all of them.

And so, yeah.

Great.

Now this text here of course is not ideal,

but we are just building the site here.

And so we will change this later as we go.

Okay?

So this looks perfect.

I'm just going back here

because we already have some more design values

that I want to update.

So here we have this border radius,

which again, I'm using pixels here and not REM,

because this is something

that I do not want to scale up or down.

So it's just a really small value.

And I want to always keep that.

Anyway, here we have border radius.

And so let's put here that we use

by default, nine pixels.

Oh, shadows, we don't have yet.

We also have some more font weights.

So we actually now have also 500, 600 and even 700.

So this one I'm calling it bold.

This one, medium and semi-bold.

Okay?

I think we also have some 1.05

and we have some 1.6, I believe.

So I'm keeping track of that.

Yeah, so at 1.05..

And there is that paragraph for the description.

Yeah, here.

So here we used 1.6.

And so I'm keeping track of that up here

in this comment here,

So that later as our file and as our CSS code grows,

we don't end up using different values here

and make the design inconsistent.

Actually let me call this one here,

like, paragraph default or something.

And then this one is the default.

Yeah, this one, I'm just calling it a small.

Okay?

So this is not really that important, the names.

But, yeah.

Just keeping track of these different design decisions

that we have been taken.

Yeah, just to ensure a consistent design

across the entire page.

Okay?

And with that, we kind of finished this entire part here.

I think it looks beautiful

and I hope you think the same

and that you're having a lot of fun up until this point

in this project.

And of course it will keep being amazing.

And so let's now move on to the next lecture.