In this video.
Let's go ahead and style the number to have something like this because we are going to implement what
is called responsive design.
We need to find a way or the technique, how we can implement responsive design.
And we have two approaches.
One is mobile first approach or desktop approach.
So the best way to go is always develop for mobile first approach.
In that way, we are going to write less CSS code, but if you choose to go for desktop first approach,
we are going to write a bunch of CSS.
So let me show you how we can design responsive website using mobile first approach.
Because of that, I'm going to reduce the browser size to have a smaller screen something like this.
Now I need to require the CSR inside enough.
So here I'll make is of import and then code dot slash number dot CSS.
So let's see how we are going to write the CSS for the novel.
And this is a view of what I'm going to design.
Perfect.
So we need to control the image.
Remember the image, it is inside the nav and then the IMG.
We can give it a class, but I can target the nav element and then the IMG inside.
Or I can select the NOP logo and then IMG.
So here we go.
Dart's NAV logo.
And then the IMG, that is the image.
Then I want to control the width of 90 pixels with this one.
Now let's see, this is what we have.
We can see how we are designing for mobile first approach.
So the next step is less control.
The parent of the number by using flags to align the children at the center of the page.
This is how I like arranging my assets from top to bottom.
So if I take my case, I will know that.
Okay, I will move from top to bottom based on how the elements are being arranged here.
But this is optional.
Okay, so now the number comes before the image.
So I'll bring this one here and say, now here and I'm going to use display flags as soon as I do that.
Have a look can see that it is moving from left to right.
So it is my main axis and top to bottom is my cross axis.
So I need to change the direction to use column is going to be flexed direction to be column now to
be on top of each other.
So now the main axis is from top to bottom and then the cross axis is from left to right.
So I can center eight using just five content and then the align items.
If I make use of align items here to be central now I will look indeed at the center of the page and
I want to give it a background color.
Off hash tag three F's.
And let's see what we have and this is what we have next is I need to give the entire body of the page
a background color.
So here we go inside the index.
Remember, this is the roots because it's being called here and this is the index, the CSS.
Oh, sorry, guys.
I made a mistake.
This code must be in the universal selector like this one, so I can reset the default behavior of the
browser.
And here we go.
So let's target the body.
And for the body, I want to give the background color of the body as hashtag F five, f five, f five.
And next is I want to give it a font family.
Global font family.
So a font family here is going to be.
So next is let's give the entire color of my text to be hashtag three, three, three and then font
size is going to be as 1.2 ram and line height is going to be as 1.5.
Now this is my global CSS.
So if I check it out here, you can see that this is a background and this is the background of my nav
bar and you can see it has been increased the font size for me and this is what I want.
The next step is let's go ahead, let me close this one and let's focus on the nav bar after the background
color, let's add padding, going to be zero and 20 pages.
So save it.
And now this is what we have next is I want to control the length.
And remember, the length is inside this nav link and inside we have a parent called you L so our target,
my nav.
And then you see that I can control the children.
So here we go now and then the other.
Give it display or flex.
And then let's tire to none.
Now, let's see.
Good.
This is what we have now.
There is no bulletin.
So the next step is let's target the individual length.
So now you l and then the airline.
And let's give it a pattern of eight x 15 paisa x and then border radius is going to be as four pixels.
Well, you can see that the links are moving away from it.
Parent.
Well, you can decide whether on the small screen you want them to be on top of each other.
So let me show you that one, too.
So on the nephew arrow, we can change the direction to column.
And then we also need to control the pattern for this one.
So let's remove the pattern for now and let's see, I think this one is okay.
So the next step is I need to align everything at the center, align items to be centered, and then
just file contents also at the center of the page.
And now it looks good.
Next step is let's remove the underline and let's change the color.
So here we go.
Let's target the now u l l i and the links inside the HTML and let's change text decoration to non and
then color of hashtag three, three, three.
And here you go.
Yes, we have it as before.
So on desktop, we are going to change the direction.
But let's design for mobile first approach.
You can see that for the final one, I have this Hoover effect, so let's add that one also.
So now we are going to add some states.
So let's go ahead and select now U, L, L, II, and then column and on Hoover.
I want to add some background color to it.
And the background color is going to be as this hash tag c, b, two, one, two, and then that is
it and a color on it.
I want to change the color to hashtag f, f, f.
Okay.
I think it's good.
So let's go ahead and then do that and see and this is what we have where I think we can give it a pot
on Hoover.
So let me add that one here and say pardon on both sizes as five paste.
So let's see.
Yeah, I think, I think it's okay now.
Good.
The choice is yours.
You can see that it's not all that smooth.
So let's ask some transition on the L II.
So transition is going to be or the properties are 0.3 seconds and is in out as that.
So let's see.
Yeah, I think the summary is okay.
It's good.
I think we can have some pattern around the I the lengths.
So here let's give it a pattern bottom.
Of, say, five Pacers.
And let's have a look.
Yeah, I think it's good now.
Yes, it's good.
Not great.
So now we are done with the sets for the mobile.
So now what about the desktop and let's go ahead and implement that.
So here are going to be our media query for desktop media query.
And any time you start developing your application using mobile first approach, this is a major query
we're going to use.
We are going to use many ways, but not maximum width.
Maximum width is for desktop approach.
So now I'm going to be add media and then you specify a function call and then objects.
So inside this function of ADD media, we are going to pass in the media query.
If you are developing the application using desktop approach, I'm going to use maximum dash width.
But because we are developing for mobile first, we're going to be main with.
And the minimum wage is supposed to be seven, six, $8, and you can use any breakpoints of your choice.
Great.
So now inside here, what you are going to do is that you are just going to change the direction of
the UL to row and that is it.
So going to be now.
Now u l and then the flexed direction to row.
And let's see if I save this one and I increase the browser.
You can see the effect how able to write a few lines of code to get it done.
That's why designing for mobile first is really important.
Next is let me have some spacing around the links.
So let's copy this one and inside the media query, let's paste it here and change everything and make
this of padding to be ten pages.
Now let's see I there we go.
We have it and start now we are done with the number, the next video.
Let's work with the actual header here.
Great.
Let's get into that.