Welcome back.
How was the exercise?
Hopefully it wasn't too difficult, but if it was and you weren't able to finish it, don't worry,
we're going to go over the steps.
And luckily for you, once we do this, you'll have a template that you can use for all your websites,
because what we'll build will be something responsive that you can customize to your own liking.
But you'll at least know the best practices after this video of how to do these common patterns that
we see in a lot of websites.
So let's get started.
The first thing I want to do to convert this page is, well, a few things.
Let's go to the page first and let's start off with the navigation.
That is the header over here.
A lot of websites have some sort of a header of the top.
The first thing I want to do is to actually use semantic HTML and be more descriptive in what we are
doing.
So in our case, instead of DIV, I'm going to use the NAV element and this is something that we've
already talked about.
And instead of just having heter here.
I'm going to have a ULE class or ULE element that will have a class name of Main.
And then here we can just have elai elements.
That will have an anchor tag.
And because we don't really have we won't have any links for this example, we can obviously do whatever
new HTML page that we want to reference, but for now, we can just leave it blank.
So the first one will just be about and we can copy and paste this for the other items as well.
We'll have, let's just say, products.
We'll say our team.
And then finally.
We'll have contact.
If I save this and refresh, there's our navigation doesn't look very good, does it, in real life?
Most of the time we see the navigation at the top and sometimes we also see that there's navigation
links at the top and one all the way to the right that's pushed to the right edge, such as contacts.
So let's try and do that where we have about products in our team at the top over here and then contacts
all the way to the right at the very edge.
So for that, we can create a new class of the very last item that we want to, let's say, push, and
we'll add the six classes now.
If I go to ah, let's save this first, if I go to style CSFs.
We can create our.
Navigation here now.
We have the main NAV class, which we've created, and in here we want to use flex box, so I'm going
to say display flex to activate flex box.
Sounds cool.
When I say activate flex spots, I want to make sure I remove these little dots in front of the name
so I can just say list style none, which will remove these little pointers.
And let's say that we want the font size to be, let's say, zero point seven.
Yeah.
I save and refresh here.
All right, things are a little bit better, but still not a perfect one is we want to remove any margins.
So I'm going to say margin.
If I refresh, all right, we remove some margins, but still not pretty, we want to perhaps add some
spaces in between these things.
I'm going to just have the fly class, which is our navigation items, and I'll just say that we want
the padding to be 20 pixels, I refresh.
That's a lot better.
OK.
And just to clean things up, let's say that our anchor tags, we also want them to be able to have
a color.
Of let's just use a five, five, five, six, five refresh, it's nice and whiteish that looks good
and we don't want those underlying.
So I'm going to say text.
Decoration, not.
Refresh all good now, because I want to start structuring this as a natural Web page, I'm going to
go to our zone class and just remove our padding and margin because we don't really need a refresher.
Things are going to start looking ugly, but at least we've moved all this white space and then finally
our display, we're no longer going to use in line block.
We want to start using our flex box or Scribd.
In our case, our main nav is going to have flex display.
So we don't need our inline block anymore.
We're going to save and refresh.
And that's a lot better because devs are automatically blocked.
Our displays for these bottom ones are now going to just be blocks.
But our top one, our neighbor has flex now, which is great.
But you'll notice here we have a bit of a white gap, and this is very common when you're working with
success, sometimes browser's by default have some sort of success attached to them.
In this case, in Google Chrome are.
Body element already has some predefined excess classes that are pre-built by Chrom, so we can actually
remove those and make sure that our margins are zero by saying margin auto zero.
And this is something I'll make sure I spell that right.
This is something that you'll see a lot of and you'll do a lot of when it comes to just making sure
that the styles or at least the margins are correct when you start off.
So if I refresh here, look at that.
Margins are gone and everything is filled on the page, which is great.
The last thing I want to do is to move contacts all the way up to the right.
And remember the push class that we added?
Well, that's going to be super easy to do.
All we need to do is to add a.
Push CSFs class that says margin left.
To be Otto.
And with this auto, if I refresh.
Contacts goes all the way to the right if I inspect this element, so I just right click and click on
inspect and let's make this a little bit bigger so we can see.
If I hover over Elai pushier.
We see that each allied element has its own box, but because we did margin left Otto.
Our ally element, it's going to get automatically pushed because it has this automatic margin that
it creates to the very end, if I did margin right.
For example, and I refresh here.
Our margin would now actually be all the way to the right to fill up the entire width of the viewport.
But let's go back to left, oops.
Let's go back to left safe and refresh here.
The neat part about this is that with this margin left auto, I can now resize our page and you'll see
that contact is always going to be to our right.
This is something that you'll see in a lot of websites.
And we did that fairly fast.
Not too bad, right?
The last thing that I want to fix here is as will notice, as we get closer and closer, it kind of
overlaps our team.
And well, now we have this weird little context that overflows.
How can we fix this?
Let's tackle that in the next video.