Let's add our navigation items now.
For this we go back to the code, into the index HTML file.
And down here, we work on the NAV element.
Now if we think about our navigation items,
we know that we need two elements in the end.
One being named Destinations,
which redirects us to a new page.
We have to create the Places page.
And the second one could be a link to an About page,
where we add information about ourselves, for example.
Now if we have such information
which can be grouped together,
what comes to your mind?
Well, hopefully a list, right?
This is something we learned in the last module.
And here the order is not that important.
Doesn't matter if we add destinations
and about or about
and then destinations.
Therefore an unordered list would be our choice here.
Let's create such an unordered list with the UL element
and a list consists of what?
Well of list items.
So we need two list items for two navigation items.
And as I said, these two items should be links again.
One link to Destinations page.
The other link to the About us page.
Therefore we add an anchor tag here
with a reference to another page on our website.
We could quickly create this page.
So let's do this and let's call this Places HTML.
We will ignore this page for the moment though,
and work on it a bit later,
which has created here to be able to refer to it.
So we can now add this link to Places HTML
and this link should be named Destinations.
And then the second link here
also with an anchor tag,
is an empty link at the moment,
as we will not create an About page
as part of this project here in the course.
But it's of course a nice challenge for you later on
to create such an About page.
Therefore this link is empty here
but it will be named About.
That's it.
If we go back,
we see we have our logo
and the two navigation links here.
Both are part of our header.
So this is working fine
but the positioning,
the layout is not perfect yet.
Destinations should be here for example,
and About should be next to it right there.
So logo to the left,
navigation items to the right.
Therefore what we need here is,
we need to go back to our code
and here again into the shared CSS file.
Again as navigation items will be displayed
on both pages of our website.
Here I first want to get rid
of these bullet points.
For this we use our UL type selector here
and use the list,
style,
property.
Hope you remembered that
and set to non.
This removes the bullet points from our list.
If we go back,
you can see this here.
And if we check out our list here.
You also see that the list has some default
margin and padding applied right here.
I also want to get rid of this,
to have the full control of our styling.
So let's set the default margin to zero
and the default padding to zero too.
This now it's a bit far to the left,
I would say but that's okay.
As we will tackle the styling now together.
Before we tackle the styling, though,
we have a general problem, right.
Because at the moment we have our logo
and then we have the unordered list,
both block elements,
therefore displayed one after another
but here we actually want these to be displayed
well, next to each other,
as I explained.
We could of course find workarounds here.
And in earlier days of CSS,
this was a bit tricky,
but thankfully nowadays we have a very nice technology
which helps us to easily create such nice headers
with such nice logos and navigation bar.
So let's now dive a bit deeper
into the layout with CSS Flexbox.