1

00:00:00,360 --> 00:00:07,050

OK, guys, in this video, we will be having an introduction to the response designed so we can make



2

00:00:07,050 --> 00:00:09,770

our grid system responsive.



3

00:00:10,110 --> 00:00:11,920

What is responsive design?



4

00:00:11,940 --> 00:00:16,920

Anyway, I'm going to show you one example, a real life example here.



5

00:00:16,930 --> 00:00:17,900

We got this speech.



6

00:00:18,090 --> 00:00:22,230

It's having to clone's for the one page of one row.



7

00:00:22,590 --> 00:00:33,510

And this is in line with me when we make the screen larger and larger again, here we got three columns.



8

00:00:33,840 --> 00:00:44,960

And when we make it larger again, we will be having here this is having the display of flex and flex



9

00:00:44,970 --> 00:00:45,810

the direction.



10

00:00:46,020 --> 00:00:47,640

And this one is having three.



11

00:00:48,720 --> 00:00:50,520

This is the responsive design.



12

00:00:50,880 --> 00:00:58,680

I want something to be changing or I want to change the width of something with changing the screen.



13

00:00:59,760 --> 00:01:01,680

We can slide the screen back now.



14

00:01:04,300 --> 00:01:16,010

We can up on this one here type to at five, if they want to be responsive design and activist Spartan,



15

00:01:17,230 --> 00:01:25,630

we can connect between this trial and ask them about they want to be responsive.



16

00:01:25,650 --> 00:01:28,610

Does seem OK.



17

00:01:29,100 --> 00:01:42,250

The first thing we will do right now, we can go and make dads with class of, uh, change color, change



18

00:01:42,250 --> 00:01:42,690

color.



19

00:01:44,350 --> 00:01:51,270

In this video we will use the breakpoints which we will use to make the grid system responsive.



20

00:01:52,390 --> 00:01:55,690

We can type something inside like that one.



21

00:01:57,170 --> 00:02:14,960

I am 18, the old according to the width of the screen when we go and reload.



22

00:02:15,520 --> 00:02:21,190

OK, we got this how we can type the response design.



23

00:02:21,190 --> 00:02:24,700

As you can see from here, we can come this class



24

00:02:29,020 --> 00:02:38,570

and inside at each one to be having the color red background color of black.



25

00:02:40,540 --> 00:02:41,470

So now we got this.



26

00:02:41,470 --> 00:02:45,040

And when we go to the last screen, we got all for this.



27

00:02:45,670 --> 00:02:49,300

But I want for the small screen.



28

00:02:49,300 --> 00:02:58,330

I want it to be having the color of, uh, let's make color of green for the small screen.



29

00:02:58,630 --> 00:03:00,640

We will not edit from this screen.



30

00:03:01,060 --> 00:03:06,370

We will not edit from the little pixels to the five, seven, six pixels.



31

00:03:06,580 --> 00:03:15,700

We will start editing from five, six, five, seven, six pixels until we go to the largest one, which



32

00:03:15,700 --> 00:03:16,900

is infinity.



33

00:03:18,810 --> 00:03:22,140

OK, let's make this smaller.



34

00:03:23,590 --> 00:03:30,550

So this could be from the zero pixels to the five seven six pixels.



35

00:03:31,180 --> 00:03:40,030

But I want you to read something from the five seven six pixels until we go to seven, six, eight pixels,



36

00:03:40,570 --> 00:03:43,000

we can use something which is called me.



37

00:03:43,000 --> 00:03:43,390

Yeah.



38

00:03:45,670 --> 00:03:47,620

And here we get up in the project.



39

00:03:48,010 --> 00:03:58,750

The minimum width I want to add here minimum with I want to make the minimum with the P seven three



40

00:03:58,750 --> 00:04:02,140

five six five seven six pixels.



41

00:04:02,620 --> 00:04:17,860

And I want the maximum which should be five seven four seven six seven point nine eight pixels.



42

00:04:18,100 --> 00:04:24,220

And I'm going to show you very soon, why would you have this number like unfranked?



43

00:04:25,270 --> 00:04:31,570

And then after this part, we can cover this one basic here.



44

00:04:31,840 --> 00:04:37,480

I want the color here to be green and pegram color to be Oberon's.



45

00:04:40,920 --> 00:04:42,190

Let's make this Christmas.



46

00:04:42,390 --> 00:04:44,310

To start from the beginning.



47

00:04:44,340 --> 00:04:46,180

We can't cancel this one right here.



48

00:04:48,000 --> 00:04:57,660

So here we got this, but when we make this screen larger, we will be having different color with different



49

00:04:57,810 --> 00:04:58,950

backgrounds.



50

00:04:59,490 --> 00:05:09,720

The second point we have here is from the seven, six eight to the nine nine two pixels, we can correct



51

00:05:09,720 --> 00:05:10,650

any one year



52

00:05:13,050 --> 00:05:14,520

minimum with



53

00:05:18,210 --> 00:05:21,690

seven, six, eight pixels.



54

00:05:22,600 --> 00:05:32,520

And now that's why I chose seven, six, seven point nine eight pixels, because if we put it here to



55

00:05:32,520 --> 00:05:39,870

be seven, six, eight and here is eight, it will be making a problem because the computer will read



56

00:05:40,020 --> 00:05:43,200

this part and this part for the theme with.



57

00:05:43,590 --> 00:05:45,060

So that will make a problem.



58

00:05:45,070 --> 00:05:53,250

So we need to give a gap between this with and this which and here we can make.



59

00:05:53,250 --> 00:05:56,330

And Max,



60

00:05:59,220 --> 00:06:06,750

we seem to be having the width of nine nine one point nine eight pixels.



61

00:06:09,590 --> 00:06:15,030

We can up the project like this for the screen.



62

00:06:15,270 --> 00:06:18,270

I can change the color to be having four.



63

00:06:19,680 --> 00:06:20,250

Yes.



64

00:06:20,260 --> 00:06:21,180

Let me think about it.



65

00:06:22,740 --> 00:06:26,400

Aqua and background color of black.



66

00:06:27,180 --> 00:06:30,110

That's what we load when we go to the screen.



67

00:06:30,120 --> 00:06:35,510

So now we got the green color and the background pillar of orange.



68

00:06:35,940 --> 00:06:40,020

And when we reach the seven, six, eight pixels.



69

00:06:44,650 --> 00:06:48,880

So now we have a different color with a background color.



70

00:06:50,440 --> 00:06:58,900

We can go and read from the nine nine two pixels until we reach the one two zero zero.



71

00:06:59,740 --> 00:07:01,070

Can you hear me?



72

00:07:01,100 --> 00:07:16,750

Jump of minimum width of nine nine two pixels and max width to be having the width of one one nine nine



73

00:07:16,990 --> 00:07:25,530

point nine eight pixels get up in the right here and think this tightening function for this one.



74

00:07:25,840 --> 00:07:28,100

We can sit here that color.



75

00:07:28,150 --> 00:07:30,150

Let's see what color we can give it here.



76

00:07:32,310 --> 00:07:36,690

Starting on this one color and for the color we can give it.



77

00:07:36,750 --> 00:07:39,220

Uh, yes, purple.



78

00:07:41,880 --> 00:07:51,840

And for the background color, we can make it something something light, same as silver, we can save



79

00:07:51,850 --> 00:07:52,620

Valpak.



80

00:07:53,490 --> 00:07:58,230

So let's start from the beginning to make sure that everything is working fine.



81

00:07:59,820 --> 00:08:01,840

We can go to this party.



82

00:08:02,670 --> 00:08:10,710

So now we got the orange and green, black and aqua when we reach the nine nine two.



83

00:08:12,890 --> 00:08:15,740

We will be having silver and purple.



84

00:08:16,880 --> 00:08:27,230

OK, after this party, we can drive from down one one three one two zero zero until we reach the one



85

00:08:27,230 --> 00:08:30,930

four zero zero here, we can carry a



86

00:08:33,680 --> 00:08:34,370

minimum



87

00:08:36,890 --> 00:08:49,490

of one two zero zero pixels and maximum, which to be having the width of one three three three one



88

00:08:49,500 --> 00:08:58,880

three nine nine point ninety eight percent of the bracket here and based this styling function for this



89

00:08:58,880 --> 00:09:02,440

one, we can make it to the color.



90

00:09:05,630 --> 00:09:09,230

What about the same green?



91

00:09:09,860 --> 00:09:17,610

And for the background color we can make Snow White or just snow, let's say go back here.



92

00:09:18,860 --> 00:09:27,650

So here we won't be having this for the small screen from the same pixels until we reach the five seven



93

00:09:28,040 --> 00:09:30,080

five point nine eight pixels.



94

00:09:30,530 --> 00:09:42,470

And then after the Spartan, we have this orange and green vest for the black and aqua mist for the



95

00:09:42,470 --> 00:09:43,760

purple and silver.



96

00:09:47,560 --> 00:09:53,120

And this is for the sea green and silver.



97

00:09:54,130 --> 00:10:05,260

And the last breakpoint we have here, which will be starting from the one four zero zero year of just



98

00:10:05,260 --> 00:10:06,370

minimum width



99

00:10:09,340 --> 00:10:14,830

of one for you, until we can up the president



100

00:10:18,070 --> 00:10:30,760

and paste this one, we can make it to Plew and Pegram Cutter of Sky-Blue saved and reload when we're



101

00:10:30,760 --> 00:10:33,250

in each of the one four zero zero.



102

00:10:33,550 --> 00:10:37,300

We got this color, OK?



103

00:10:40,310 --> 00:10:49,370

So that spirit that we learned are now we are have having a responsive design of this page in the next



104

00:10:49,370 --> 00:10:53,840

video, we will know how to make our grid system responsive.



105

00:10:54,200 --> 00:10:56,380

So good luck and have fun.