1
00:00:08,960 --> 00:00:14,510
Alright, let's get started with responsive design.

2
00:00:15,080 --> 00:00:23,930
Before we get into that, let's look at the requirements of planning, responsive design or what makes

3
00:00:23,930 --> 00:00:25,900
app responsive design.

4
00:00:25,910 --> 00:00:27,610
So I ready?

5
00:00:27,770 --> 00:00:28,880
Be quiet.

6
00:00:29,970 --> 00:00:30,650
Great.

7
00:00:30,660 --> 00:00:31,440
Let's go.

8
00:00:31,950 --> 00:00:36,930
The first concept that you need to do is what we call planning.

9
00:00:37,320 --> 00:00:44,370
And at this stage, you need to decide the kind of layout that you want to achieve.

10
00:00:44,790 --> 00:00:53,970
And we can Google online and have a look at some readymade template and see how a certain website looks

11
00:00:53,970 --> 00:00:54,300
like.

12
00:00:54,300 --> 00:01:02,340
In that way, you can visualize and see how you want your design to be, and that is what we call the

13
00:01:02,340 --> 00:01:03,450
planning stage.

14
00:01:03,930 --> 00:01:09,630
And then the next step is you need to decide what kind of course you need.

15
00:01:09,630 --> 00:01:19,110
You need to use and I have covered this one under CSS units and I categorize them as relative.

16
00:01:19,110 --> 00:01:24,300
And then the absolute unit, some units are responsive, others are not.

17
00:01:24,330 --> 00:01:27,390
If you are not familiar with this, we need our advice.

18
00:01:27,390 --> 00:01:36,870
You to watch a section where I talk about CSS unit and then the next concept, which is really important,

19
00:01:36,900 --> 00:01:44,490
is what we call Flexbox, and that is what we have covered in the previous videos, the next concept,

20
00:01:44,490 --> 00:01:48,000
and that is what you call media query.

21
00:01:48,000 --> 00:01:53,460
So for this one, I will show you while we are developing the application.

22
00:01:53,460 --> 00:01:56,790
So now under planning, what is the first step?

23
00:01:56,790 --> 00:02:04,920
Like I said, how are you going to start your design and you can have an iframe or we can use a to call

24
00:02:04,920 --> 00:02:09,479
figma to see some projects that other people have done.

25
00:02:09,570 --> 00:02:14,220
And then and the CSS you need, these are the responses you need.

26
00:02:14,230 --> 00:02:20,100
You are going to use a load that is percentages and then you are going to use ramp units.

27
00:02:20,100 --> 00:02:27,060
Remember ramp you need are always make reference to the root element that is the HTML.

28
00:02:27,330 --> 00:02:35,790
So it means that any time a user changes his or her font size inside the browser, for example, Chrome

29
00:02:35,790 --> 00:02:42,570
is going to affect the display or how big that particular font is going to be.

30
00:02:42,840 --> 00:02:49,770
And the next you need is what you call AM and you need to always make reference to its parent.

31
00:02:49,770 --> 00:02:58,920
Again, we have covered all these ones under CSS units and you are going to use the viewport height

32
00:02:58,920 --> 00:03:06,720
and viewport width also, and the next concept is going to be Flexbox.

33
00:03:06,720 --> 00:03:11,100
And that way you don't understand what is called flex direction.

34
00:03:11,340 --> 00:03:19,910
And I want to we have talk about it and then you don't understand justify content remember this file

35
00:03:19,920 --> 00:03:26,220
contains works on the main axes and then align items works on the vertical axis.

36
00:03:26,220 --> 00:03:29,760
And lastly, we need to know what is called flex glue.

37
00:03:29,910 --> 00:03:32,790
It is flex glue, but not grow.

38
00:03:32,820 --> 00:03:34,320
It's a spelling mistake.

39
00:03:34,320 --> 00:03:42,390
And lastly, you will talk about the media query and I will explain to you as we move on and need to

40
00:03:42,390 --> 00:03:45,660
know what is called break point and that is it.

41
00:03:45,660 --> 00:03:53,100
Then this video, let's get started with our project because we have covered all these ones.

42
00:03:53,100 --> 00:03:56,880
So we are ready and this one tool is really easy to understand.

43
00:03:56,880 --> 00:03:59,310
So let's get started in the next video.