OK, guys, in this video, we will be having an introduction to the response designed so we can make
our grid system responsive.
What is responsive design?
Anyway, I'm going to show you one example, a real life example here.
We got this speech.
It's having to clone's for the one page of one row.
And this is in line with me when we make the screen larger and larger again, here we got three columns.
And when we make it larger again, we will be having here this is having the display of flex and flex
the direction.
And this one is having three.
This is the responsive design.
I want something to be changing or I want to change the width of something with changing the screen.
We can slide the screen back now.
We can up on this one here type to at five, if they want to be responsive design and activist Spartan,
we can connect between this trial and ask them about they want to be responsive.
Does seem OK.
The first thing we will do right now, we can go and make dads with class of, uh, change color, change
color.
In this video we will use the breakpoints which we will use to make the grid system responsive.
We can type something inside like that one.
I am 18, the old according to the width of the screen when we go and reload.
OK, we got this how we can type the response design.
As you can see from here, we can come this class
and inside at each one to be having the color red background color of black.
So now we got this.
And when we go to the last screen, we got all for this.
But I want for the small screen.
I want it to be having the color of, uh, let's make color of green for the small screen.
We will not edit from this screen.
We will not edit from the little pixels to the five, seven, six pixels.
We will start editing from five, six, five, seven, six pixels until we go to the largest one, which
is infinity.
OK, let's make this smaller.
So this could be from the zero pixels to the five seven six pixels.
But I want you to read something from the five seven six pixels until we go to seven, six, eight pixels,
we can use something which is called me.
Yeah.
And here we get up in the project.
The minimum width I want to add here minimum with I want to make the minimum with the P seven three
five six five seven six pixels.
And I want the maximum which should be five seven four seven six seven point nine eight pixels.
And I'm going to show you very soon, why would you have this number like unfranked?
And then after this part, we can cover this one basic here.
I want the color here to be green and pegram color to be Oberon's.
Let's make this Christmas.
To start from the beginning.
We can't cancel this one right here.
So here we got this, but when we make this screen larger, we will be having different color with different
backgrounds.
The second point we have here is from the seven, six eight to the nine nine two pixels, we can correct
any one year
minimum with
seven, six, eight pixels.
And now that's why I chose seven, six, seven point nine eight pixels, because if we put it here to
be seven, six, eight and here is eight, it will be making a problem because the computer will read
this part and this part for the theme with.
So that will make a problem.
So we need to give a gap between this with and this which and here we can make.
And Max,
we seem to be having the width of nine nine one point nine eight pixels.
We can up the project like this for the screen.
I can change the color to be having four.
Yes.
Let me think about it.
Aqua and background color of black.
That's what we load when we go to the screen.
So now we got the green color and the background pillar of orange.
And when we reach the seven, six, eight pixels.
So now we have a different color with a background color.
We can go and read from the nine nine two pixels until we reach the one two zero zero.
Can you hear me?
Jump of minimum width of nine nine two pixels and max width to be having the width of one one nine nine
point nine eight pixels get up in the right here and think this tightening function for this one.
We can sit here that color.
Let's see what color we can give it here.
Starting on this one color and for the color we can give it.
Uh, yes, purple.
And for the background color, we can make it something something light, same as silver, we can save
Valpak.
So let's start from the beginning to make sure that everything is working fine.
We can go to this party.
So now we got the orange and green, black and aqua when we reach the nine nine two.
We will be having silver and purple.
OK, after this party, we can drive from down one one three one two zero zero until we reach the one
four zero zero here, we can carry a
minimum
of one two zero zero pixels and maximum, which to be having the width of one three three three one
three nine nine point ninety eight percent of the bracket here and based this styling function for this
one, we can make it to the color.
What about the same green?
And for the background color we can make Snow White or just snow, let's say go back here.
So here we won't be having this for the small screen from the same pixels until we reach the five seven
five point nine eight pixels.
And then after the Spartan, we have this orange and green vest for the black and aqua mist for the
purple and silver.
And this is for the sea green and silver.
And the last breakpoint we have here, which will be starting from the one four zero zero year of just
minimum width
of one for you, until we can up the president
and paste this one, we can make it to Plew and Pegram Cutter of Sky-Blue saved and reload when we're
in each of the one four zero zero.
We got this color, OK?
So that spirit that we learned are now we are have having a responsive design of this page in the next
video, we will know how to make our grid system responsive.
So good luck and have fun.