Alright, let's get started with responsive design.
Before we get into that, let's look at the requirements of planning, responsive design or what makes
app responsive design.
So I ready?
Be quiet.
Great.
Let's go.
The first concept that you need to do is what we call planning.
And at this stage, you need to decide the kind of layout that you want to achieve.
And we can Google online and have a look at some readymade template and see how a certain website looks
like.
In that way, you can visualize and see how you want your design to be, and that is what we call the
planning stage.
And then the next step is you need to decide what kind of course you need.
You need to use and I have covered this one under CSS units and I categorize them as relative.
And then the absolute unit, some units are responsive, others are not.
If you are not familiar with this, we need our advice.
You to watch a section where I talk about CSS unit and then the next concept, which is really important,
is what we call Flexbox, and that is what we have covered in the previous videos, the next concept,
and that is what you call media query.
So for this one, I will show you while we are developing the application.
So now under planning, what is the first step?
Like I said, how are you going to start your design and you can have an iframe or we can use a to call
figma to see some projects that other people have done.
And then and the CSS you need, these are the responses you need.
You are going to use a load that is percentages and then you are going to use ramp units.
Remember ramp you need are always make reference to the root element that is the HTML.
So it means that any time a user changes his or her font size inside the browser, for example, Chrome
is going to affect the display or how big that particular font is going to be.
And the next you need is what you call AM and you need to always make reference to its parent.
Again, we have covered all these ones under CSS units and you are going to use the viewport height
and viewport width also, and the next concept is going to be Flexbox.
And that way you don't understand what is called flex direction.
And I want to we have talk about it and then you don't understand justify content remember this file
contains works on the main axes and then align items works on the vertical axis.
And lastly, we need to know what is called flex glue.
It is flex glue, but not grow.
It's a spelling mistake.
And lastly, you will talk about the media query and I will explain to you as we move on and need to
know what is called break point and that is it.
Then this video, let's get started with our project because we have covered all these ones.
So we are ready and this one tool is really easy to understand.
So let's get started in the next video.