-: 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 oral links,
so 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 better inside of each of them
we will have an anchor element.
So for now, these h refs 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
and we'll 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 the LI 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.
And so I'm just gonna 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
at 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 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.
That 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 less 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 gonna 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 wanted 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 the 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 is the flex container.
So as you already know here, we just use align items center
and then let's dramatically reduce the padding here,
let's say...
So again, usually you have this system here somewhere
where you don't have to scroll up and down all the time.
But anyway, I'm gonna use 24 and then Hal for 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 is so-called specificity, as you see here is now three
and this other style here is just 0, 2 0.
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 while 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 this really small value
and I want to always keep that.
Anyway, here we have border ratios.
And so let's put here that we use
by default, nine pixels, 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 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 SR file and SRCs S code growth,
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 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.