1 00:00:01,320 --> 00:00:01,920 ‫Hey, there. 2 00:00:02,040 --> 00:00:02,730 ‫Welcome back. 3 00:00:03,070 --> 00:00:09,090 ‫Now it's good time for us to move towards this section in which we are going to understand how to play 4 00:00:09,090 --> 00:00:17,430 ‫with multiple parts of Flex and how to change theory sizing, or I should say how to change them according 5 00:00:17,430 --> 00:00:18,360 ‫to resizing. 6 00:00:18,870 --> 00:00:24,780 ‫So remember, the first change I need to do is as soon as I get any size towards my tablet, I want 7 00:00:24,780 --> 00:00:26,220 ‫to get it down, right? 8 00:00:26,580 --> 00:00:32,010 ‫So what I can say is let's give it 100 percent weight, so this will move down. 9 00:00:32,730 --> 00:00:37,830 ‫What I can do is I can get into my middle, which is seven, six, eight pixel and head. 10 00:00:37,830 --> 00:00:41,490 ‫I just need to select my order and then my legs. 11 00:00:42,150 --> 00:00:49,770 ‫And if I put a wider width of 100 percent right here, and if I see, you can see this is moved down 12 00:00:49,770 --> 00:00:50,100 ‫now. 13 00:00:50,610 --> 00:00:53,990 ‫So that's the first task we did because of Grab. 14 00:00:54,000 --> 00:01:00,180 ‫This is moving down and again now because our 400 percent bird condition, this is moving down. 15 00:01:00,720 --> 00:01:02,070 ‫This looks great to me. 16 00:01:02,400 --> 00:01:05,100 ‫Also, let me add some margin top and bottom. 17 00:01:05,430 --> 00:01:08,730 ‫So let me also change margin top. 18 00:01:08,730 --> 00:01:12,060 ‫And what I'm what I'm going to do is I'm going to add margin. 19 00:01:13,940 --> 00:01:16,270 ‫To them and then auto. 20 00:01:17,290 --> 00:01:23,080 ‫So this is also going to keep at center and to them will help me to add some top and bottom margin. 21 00:01:23,320 --> 00:01:23,670 ‫Great. 22 00:01:24,040 --> 00:01:26,630 ‫This looks fine to me now that Steve. 23 00:01:27,580 --> 00:01:29,020 ‫But I want something like this. 24 00:01:29,020 --> 00:01:30,460 ‫I want to move like this. 25 00:01:30,820 --> 00:01:33,160 ‫OK, we can do certain more changes. 26 00:01:33,160 --> 00:01:34,600 ‫We can control things. 27 00:01:35,230 --> 00:01:40,660 ‫So what I'm going to do now is now remember, this is our flex itself. 28 00:01:40,660 --> 00:01:46,120 ‫So remember, this is a container and we call this container as links, right? 29 00:01:46,420 --> 00:01:48,100 ‫And this is a flex itself. 30 00:01:48,430 --> 00:01:53,830 ‫And currently, this flex is falling by default, flex direction of growth. 31 00:01:54,070 --> 00:01:55,390 ‫That is why they are. 32 00:01:55,390 --> 00:01:59,590 ‫And this part like three parts one two three parts. 33 00:02:00,190 --> 00:02:03,400 ‫What if I say flex direction as column? 34 00:02:03,400 --> 00:02:05,230 ‫Currently, they are following the rule part. 35 00:02:05,620 --> 00:02:07,590 ‫So one item two, I don't really dumb. 36 00:02:07,600 --> 00:02:11,900 ‫If I say flex direction as a column, then first item. 37 00:02:11,920 --> 00:02:13,360 ‫Second item, part item. 38 00:02:13,630 --> 00:02:14,860 ‫Something like this. 39 00:02:15,250 --> 00:02:16,840 ‫So I need to change this. 40 00:02:17,020 --> 00:02:22,150 ‫So I'm going to target this link itself, and I'm going to change the flex direction. 41 00:02:22,480 --> 00:02:24,580 ‫Remember the display's flex itself? 42 00:02:25,750 --> 00:02:30,430 ‫But here I can override the Flex Direction as column and if I save this one. 43 00:02:30,790 --> 00:02:31,660 ‫Get back here. 44 00:02:32,110 --> 00:02:34,900 ‫You can see that's how this is working. 45 00:02:35,750 --> 00:02:38,090 ‫And there are enough sequence. 46 00:02:39,280 --> 00:02:45,400 ‫And you can observe the boxes now with the help of this whole Flex thing, but this is working great. 47 00:02:47,210 --> 00:02:56,000 ‫OK, now the next problem, I need to decrease the size here and also add some size above my head because 48 00:02:56,000 --> 00:02:58,040 ‫you can see this need some gap. 49 00:02:59,840 --> 00:03:05,730 ‫You know, this needs some gap, so what I can do is I can jump here and I can target my hurting itself, 50 00:03:06,540 --> 00:03:08,940 ‫or I can target the complete section. 51 00:03:08,940 --> 00:03:17,310 ‫If you remember we have this whole div, but this, then this div, then this div so I can select the 52 00:03:17,310 --> 00:03:22,170 ‫company, the communities and the useful link, I can select them individually. 53 00:03:22,860 --> 00:03:33,060 ‫So here I'm going to go over there for the Dart Company and then order the communities. 54 00:03:34,580 --> 00:03:39,770 ‫And the third one will be ordered to be used for. 55 00:03:41,410 --> 00:03:41,900 ‫Links. 56 00:03:42,550 --> 00:03:47,890 ‫That's great, and all I do is add margin to them. 57 00:03:48,170 --> 00:03:53,860 ‫Remember, I need one margin not only so margin drop to them, save this one. 58 00:03:54,490 --> 00:03:56,640 ‫Now you can see there is some gap. 59 00:03:56,650 --> 00:04:01,630 ‫So if I remove this flex now, this whole flex thing, if I remove. 60 00:04:05,010 --> 00:04:06,510 ‫Now you can see this gap. 61 00:04:08,500 --> 00:04:09,090 ‫OK. 62 00:04:09,140 --> 00:04:11,830 ‫This look much better, and this is great. 63 00:04:12,340 --> 00:04:13,810 ‫If I scroll down here. 64 00:04:21,020 --> 00:04:24,320 ‫Yeah, that changed, I currently says Gap between head. 65 00:04:24,890 --> 00:04:28,070 ‫So as soon as I get inside the wrap part. 66 00:04:29,890 --> 00:04:35,500 ‫I cannot gap between them, so that can be done since this is another. 67 00:04:37,140 --> 00:04:46,230 ‫And so we can change this insider response, if not CSIS, as soon as I had this part, we can add some 68 00:04:46,230 --> 00:04:46,800 ‫margin. 69 00:04:47,100 --> 00:04:52,950 ‫So what I'm going to do is I'm going to select my anchor after this year. 70 00:04:53,400 --> 00:04:57,450 ‫So this is going to be hotter than I'm going to select my extras. 71 00:04:57,750 --> 00:05:02,190 ‫And then fans remember I'm following the sequence first. 72 00:05:02,190 --> 00:05:07,050 ‫I have heard, then maybe our banner then hotter than all the sequence in Qatar. 73 00:05:07,290 --> 00:05:13,320 ‫So I'm following some sequence of even if I need to edit it later, I know haters are going to be at 74 00:05:13,320 --> 00:05:13,710 ‫the top. 75 00:05:13,710 --> 00:05:17,680 ‫Otherwise if I tune header here, it will mess things again. 76 00:05:17,700 --> 00:05:19,290 ‫So just follow the sequence. 77 00:05:20,790 --> 00:05:24,090 ‫Inside my spine, I'm going to change margin top. 78 00:05:26,420 --> 00:05:29,750 ‫And I'm going to change the truth to save this one. 79 00:05:29,900 --> 00:05:30,860 ‫Get back here. 80 00:05:32,430 --> 00:05:38,380 ‫Yep, we have this gap now, so I hope you got the idea how we change multiple things. 81 00:05:38,400 --> 00:05:44,880 ‫Now there are a lot of things that we did, even if you just try to minimize this, things are working 82 00:05:44,880 --> 00:05:45,510 ‫fine now. 83 00:05:45,900 --> 00:05:49,050 ‫Now there are chances that you want to change this height again. 84 00:05:49,050 --> 00:05:54,300 ‫As we move towards the mobile parts of this height can be changed again. 85 00:05:54,600 --> 00:06:00,350 ‫Maybe if I jump inside my mobile section again, here I can change this headlight. 86 00:06:00,360 --> 00:06:01,740 ‫So let me try this one. 87 00:06:02,070 --> 00:06:06,990 ‫So this is my headlight and let me go with five trim now. 88 00:06:07,380 --> 00:06:11,490 ‫And also let me try to update my in-laws eyes and let me try with. 89 00:06:12,790 --> 00:06:14,830 ‫Maybe 25, fixer. 90 00:06:16,510 --> 00:06:17,350 ‫Save this one. 91 00:06:17,380 --> 00:06:18,190 ‫Get back here. 92 00:06:18,730 --> 00:06:20,590 ‫OK, this is -- fine. 93 00:06:21,130 --> 00:06:24,980 ‫I can also change this, but for now, let's move with this, OK? 94 00:06:25,000 --> 00:06:30,760 ‫This is working great, so that's how things can work, and I hope you got the idea. 95 00:06:34,150 --> 00:06:40,130 ‫Now, one thing I really wanted to change if you want, depends on you. 96 00:06:40,150 --> 00:06:42,310 ‫You can change this capital. 97 00:06:42,700 --> 00:06:45,280 ‫So currently our orders get out. 98 00:06:45,280 --> 00:06:47,120 ‫You can see the batting, actually. 99 00:06:47,140 --> 00:06:53,520 ‫So if you see to one, you can go with zero point five zero zero point five. 100 00:06:54,220 --> 00:06:55,480 ‫This looks much better. 101 00:06:55,480 --> 00:06:59,350 ‫So you going to build this part also if you want to create a depend on you. 102 00:06:59,680 --> 00:07:04,360 ‫But if you go with zero point five for top to bottom, this should work better. 103 00:07:04,840 --> 00:07:07,720 ‫So if I just see this part? 104 00:07:12,860 --> 00:07:17,300 ‫Yeah, we can change this to 0.5 and style, not KSAZ itself. 105 00:07:17,660 --> 00:07:19,910 ‫So just scroll down to the bottom. 106 00:07:20,210 --> 00:07:26,310 ‫And here we are drowning, which is going to be zero point five. 107 00:07:26,540 --> 00:07:29,380 ‫Now this will also change for our left and right. 108 00:07:29,390 --> 00:07:34,270 ‫So what I'm going to do is for top and bottom 0.5 and left and right one them. 109 00:07:34,640 --> 00:07:35,390 ‫OK. 110 00:07:36,410 --> 00:07:37,550 ‫This is better. 111 00:07:40,700 --> 00:07:40,930 ‫Yeah. 112 00:07:41,090 --> 00:07:47,150 ‫I hope you got the idea now that are certain sites that want this to be at the center and the I left, 113 00:07:47,270 --> 00:07:50,700 ‫you know how you can do this, you are walking with Flexbox. 114 00:07:51,260 --> 00:07:54,560 ‫Also, you can decrease the size if you want, but I don't want it. 115 00:07:54,560 --> 00:08:00,530 ‫But if you want, you can do that the other day and you can do it by jumping around to my section. 116 00:08:00,530 --> 00:08:03,560 ‫And if I jump on to my local bar, you can see this. 117 00:08:03,740 --> 00:08:05,660 ‫There is some extra space here. 118 00:08:06,140 --> 00:08:12,080 ‫So what you can say is, let's say, logos, flags, and then you will have option to center this according 119 00:08:12,080 --> 00:08:13,760 ‫to justify content. 120 00:08:14,150 --> 00:08:20,150 ‫So, for example, you can directly jump here onto the main style or CSIS. 121 00:08:20,570 --> 00:08:23,960 ‫And here you can jump onto the logo bar itself. 122 00:08:24,020 --> 00:08:27,320 ‫This logo, our just flex right now. 123 00:08:29,040 --> 00:08:34,500 ‫Here, and you can change this logo to Flex and then justify its center. 124 00:08:34,740 --> 00:08:36,020 ‫I totally depend on news. 125 00:08:36,020 --> 00:08:45,170 ‫So for example, if I jump here and create a photo directly target the logo park, I'm going to change 126 00:08:45,180 --> 00:08:47,590 ‫its display to Flex. 127 00:08:47,610 --> 00:08:53,220 ‫And here I can also add Just acquire content center. 128 00:08:53,220 --> 00:08:54,160 ‫Save this one. 129 00:08:54,180 --> 00:08:54,990 ‫Get back here. 130 00:08:55,860 --> 00:09:00,150 ‫Now this is flex and you can see how they justify content is working. 131 00:09:00,780 --> 00:09:04,590 ‫But remember, this is going to mess a lot of things as I go full screen. 132 00:09:04,590 --> 00:09:08,730 ‫So if I close this one, you can see this is going to mess a lot of thing. 133 00:09:16,860 --> 00:09:22,080 ‫So that's all for this lecture, I hope you got the idea how we are going to clone our website. 134 00:09:22,500 --> 00:09:25,030 ‫Now there are few things that I want to talk about. 135 00:09:25,050 --> 00:09:29,610 ‫And our first thing is about how to utilize variables. 136 00:09:29,970 --> 00:09:35,010 ‫So instead of writing these values again and again, like there are certain common values like this 137 00:09:35,010 --> 00:09:36,840 ‫one, or maybe disagree. 138 00:09:37,080 --> 00:09:42,870 ‫So instead of writing them again and again, we can assign these values to a variable and we can call 139 00:09:42,870 --> 00:09:43,650 ‫this variable. 140 00:09:43,950 --> 00:09:48,510 ‫So usually website that follows a theme followed this type of variable. 141 00:09:48,930 --> 00:09:52,050 ‫Don't worry, we are going to discuss about this in the next lecture. 142 00:09:52,230 --> 00:09:55,590 ‫So you don't have to worry about what this variable topic is. 143 00:09:56,400 --> 00:09:57,460 ‫Thank you for calling. 144 00:09:57,480 --> 00:10:00,720 ‫And let's continue this and the next lecture itself.