1 00:00:00,850 --> 00:00:01,480 ‫Hey, dad. 2 00:00:01,510 --> 00:00:02,230 ‫Welcome back. 3 00:00:02,650 --> 00:00:05,440 ‫Now let us start our task with the responsive part. 4 00:00:06,010 --> 00:00:13,480 ‫So if you observe here, if I click on Inspect and if I try to just decrease the size as soon as we 5 00:00:13,480 --> 00:00:20,290 ‫reach the top or the plastic, maybe around 990 pixel, we are going to remove one column and add it 6 00:00:20,290 --> 00:00:21,160 ‫at the bottom. 7 00:00:22,000 --> 00:00:29,830 ‫Now here, if I try to squeeze it again, I guess 13 pixel, maybe around 760, we are going to go completely 8 00:00:29,830 --> 00:00:31,270 ‫in the form of column. 9 00:00:33,800 --> 00:00:38,540 ‫So we need to add this restriction with the help of our responsive, not CSIS. 10 00:00:39,170 --> 00:00:46,510 ‫The first thing I'm going to do is I noticed quantum dots here says here are simply not HDMI 2.1 with 11 00:00:46,520 --> 00:00:48,170 ‫the standard responsive Garcia. 12 00:00:49,100 --> 00:00:50,030 ‫This looks great. 13 00:00:50,540 --> 00:00:55,600 ‫Me jump here and here is our current breakout points that are added by default. 14 00:00:57,270 --> 00:01:04,860 ‫Now we need to add one more breakout point, which is going to be around 991 picks, and I totally depend 15 00:01:04,860 --> 00:01:05,970 ‫on our requirement. 16 00:01:07,260 --> 00:01:09,390 ‫This is, I guess, for air bags. 17 00:01:09,540 --> 00:01:14,850 ‫So if I right click here, I'm going to inspect, you will see around 1991. 18 00:01:14,940 --> 00:01:16,040 ‫We need to break out. 19 00:01:18,030 --> 00:01:21,330 ‫So something similar, how do we need to do it, I guess? 20 00:01:23,590 --> 00:01:29,350 ‫700 some pixel, I guess 760 pixel, which is going to be 768 pixel. 21 00:01:29,380 --> 00:01:32,060 ‫We need to break out, so these two are going to be attractive. 22 00:01:33,070 --> 00:01:39,160 ‫So the first thing I need credit is Argentina because these are the field which are going to be edited. 23 00:01:39,730 --> 00:01:44,550 ‫So if I copied this whole container right now, get back here now. 24 00:01:44,560 --> 00:01:47,470 ‫First, I'm going to get inside my 991 pixel. 25 00:01:48,190 --> 00:01:49,330 ‫This is OK. 26 00:01:49,810 --> 00:01:51,190 ‫There's going to remain same. 27 00:01:52,910 --> 00:01:54,400 ‫If I need to change anything. 28 00:01:54,790 --> 00:01:56,740 ‫These are the things I need to customize. 29 00:01:57,250 --> 00:02:02,110 ‫So what I need to do is I need to move towards this type of structure. 30 00:02:03,280 --> 00:02:06,250 ‫Where we currently have one, two, three or five. 31 00:02:07,520 --> 00:02:14,720 ‫Where we are going to have three rows and basically three columns and three rows, so if you see one 32 00:02:14,720 --> 00:02:21,080 ‫column here, one column here and one column here, so I need to have three columns. 33 00:02:21,440 --> 00:02:26,300 ‫And then I need to have three rows, so I just need to change it to three. 34 00:02:26,960 --> 00:02:29,600 ‫And the next thing is, I need to change it to three. 35 00:02:29,780 --> 00:02:33,680 ‫So I will have three columns and three row, but the structure will change. 36 00:02:33,770 --> 00:02:35,090 ‫So I need to have. 37 00:02:35,390 --> 00:02:37,130 ‫I don't want I don't want item to. 38 00:02:37,430 --> 00:02:38,720 ‫Hard will be to move here. 39 00:02:39,110 --> 00:02:45,440 ‫I don't order five five card will be removed there, but I will have I done three here, which is going 40 00:02:45,440 --> 00:02:46,420 ‫to be done. 41 00:02:46,430 --> 00:02:46,910 ‫Three. 42 00:02:48,030 --> 00:02:49,000 ‫Item three. 43 00:02:49,020 --> 00:02:53,280 ‫And Item three looks fine to me if I get back here. 44 00:02:54,790 --> 00:03:01,510 ‫This one on my right click and try to decrease the size, you can see a talking point. 45 00:03:03,250 --> 00:03:05,380 ‫I hope you got the idea, what we just did. 46 00:03:07,300 --> 00:03:10,810 ‫Now, something similar we need to do with our 768 pixel. 47 00:03:11,260 --> 00:03:18,640 ‫So if I copied this container itself and here I need to change setting what I need to do, the major 48 00:03:18,640 --> 00:03:21,730 ‫changes, I need to go on one column setting. 49 00:03:22,150 --> 00:03:26,020 ‫So this is going to be one after directly one column. 50 00:03:26,920 --> 00:03:28,810 ‫And then there will be multiple roles. 51 00:03:29,260 --> 00:03:33,340 ‫That means if I have fire hydrant, it is going to have five floors. 52 00:03:33,820 --> 00:03:35,620 ‫I don't need to mention this, actually. 53 00:03:36,010 --> 00:03:40,810 ‫I can just directly mention or two here because read one, they're fine. 54 00:03:40,990 --> 00:03:42,530 ‫They will have equal shape. 55 00:03:42,580 --> 00:03:47,320 ‫One example if I have one, if I had all the columns, how equals shape? 56 00:03:47,620 --> 00:03:48,490 ‫What if I see one? 57 00:03:48,490 --> 00:03:53,020 ‫If I withdraws, all of them are going to have equal shape, which is not required. 58 00:03:53,560 --> 00:04:00,850 ‫One example if I say repeat five comma one apart, let's try to utilize this one. 59 00:04:01,390 --> 00:04:05,140 ‫And if I jump here, get back, OK, I need to change this also. 60 00:04:05,500 --> 00:04:09,250 ‫Now we have five items, so we are going to deal with five rows. 61 00:04:12,760 --> 00:04:13,720 ‫Item three. 62 00:04:16,410 --> 00:04:19,740 ‫I don't forward and I don't fight if I save this one. 63 00:04:19,830 --> 00:04:20,720 ‫Get back here. 64 00:04:22,050 --> 00:04:26,310 ‫And I try to decrease the size you can see it's working fine, scroll down. 65 00:04:26,340 --> 00:04:30,350 ‫Everything is working fine, but the problem is this extra space. 66 00:04:31,850 --> 00:04:36,310 ‫Behind the scenes, what is happening is we have provided this rule with one effort. 67 00:04:36,350 --> 00:04:38,660 ‫That means it does equal for all. 68 00:04:40,570 --> 00:04:43,390 ‫So I need to provide us saving as auto. 69 00:04:44,930 --> 00:04:52,310 ‫What I can say five or over the short walk, when you can see now it is only taking space, which is 70 00:04:52,310 --> 00:04:52,970 ‫required. 71 00:04:53,300 --> 00:04:54,650 ‫Similarly for this one. 72 00:04:56,210 --> 00:04:58,690 ‫Or I can say simply or not. 73 00:05:00,630 --> 00:05:06,960 ‫Because this will be applied on all of them, so I hope you got the idea how we did the entire change. 74 00:05:07,260 --> 00:05:13,170 ‫So if you right click on Inspect and I try to take this out. 75 00:05:15,630 --> 00:05:23,700 ‫And let me try to control this from this small panel, if I said go with toggle device and try to utilize 76 00:05:23,700 --> 00:05:24,000 ‫this. 77 00:05:24,240 --> 00:05:27,570 ‫Now here you can see this screen, this 2000 pixel. 78 00:05:27,960 --> 00:05:33,270 ‫I'm still going to restrict my maximum avatars around one 200 something, right? 79 00:05:34,200 --> 00:05:39,210 ‫If you remember this part, we are restricting our weight to Max Hawk one two eight zero. 80 00:05:39,630 --> 00:05:42,130 ‫And I try to decrease the decrease or decrease it. 81 00:05:42,210 --> 00:05:44,190 ‫Things are working fine now. 82 00:05:44,190 --> 00:05:50,490 ‫We are trying to squeeze it, and as soon as we reach somewhere around 900, I'm going to. 83 00:05:51,630 --> 00:05:57,720 ‫Getting dressed once or more again, if I try to touch something 768, I'm going to get into breast 84 00:05:57,720 --> 00:05:58,470 ‫cancer more. 85 00:06:00,530 --> 00:06:05,160 ‫So that's how you are going to make your website, or I should say your section responsive. 86 00:06:05,870 --> 00:06:10,160 ‫Now there is one small thing is remaining which is going to be are heading. 87 00:06:11,580 --> 00:06:15,510 ‫So I'm going to call our Dave Glass, and he would not name as hurting. 88 00:06:18,610 --> 00:06:23,830 ‫And then I moved to Hawaii at one class, and we took all this, has testimonials, and then I'm going 89 00:06:23,830 --> 00:06:25,180 ‫to have our emoji. 90 00:06:25,540 --> 00:06:28,410 ‫Okay, so let me add this text. 91 00:06:28,420 --> 00:06:29,920 ‫Save this one, get back here. 92 00:06:30,430 --> 00:06:32,220 ‫So this is our current testimonial. 93 00:06:33,010 --> 00:06:39,790 ‫We need to do a few settings, which is going to be about the chin and size seconds on own sites as 94 00:06:39,790 --> 00:06:40,870 ‫well as my chin. 95 00:06:42,600 --> 00:06:44,990 ‫Before I jump carriage, I'm going to do my first. 96 00:06:45,020 --> 00:06:49,190 ‫This is before container, so here I just need to select my heading. 97 00:06:50,800 --> 00:06:53,950 ‫And inside my head, I need to select actually a choice. 98 00:06:54,730 --> 00:06:56,920 ‫And how do we need to change our own size? 99 00:06:57,760 --> 00:06:59,260 ‫Let me try it through them. 100 00:06:59,650 --> 00:07:03,670 ‫And also, I'm going to go get my margin, which is going to be three RAM again. 101 00:07:03,880 --> 00:07:04,690 ‫Save this one. 102 00:07:04,720 --> 00:07:05,410 ‫Get back here. 103 00:07:06,280 --> 00:07:07,030 ‫Looks great. 104 00:07:07,420 --> 00:07:13,660 ‫Now I need to add it at this point so we can add it at the center with the help of next time for no 105 00:07:13,660 --> 00:07:14,860 ‫little extra line. 106 00:07:14,860 --> 00:07:16,200 ‫And let me see the center. 107 00:07:16,630 --> 00:07:18,280 ‫And it is going to work fine. 108 00:07:19,030 --> 00:07:25,540 ‫But what if we create a utility in sense, whenever we want to do anything center, it can be a block, 109 00:07:25,540 --> 00:07:26,470 ‫it can be anything. 110 00:07:26,800 --> 00:07:29,320 ‫We can utilize something related to Flexbox. 111 00:07:29,800 --> 00:07:36,790 ‫So for now, I'm going to create our property on, I should say, a class call center, and I'm just 112 00:07:36,790 --> 00:07:39,190 ‫going to change the display to Flex. 113 00:07:40,670 --> 00:07:48,830 ‫And then I can say just to buy content and I can do this and that, so I can name it as parties on something 114 00:07:48,830 --> 00:07:52,220 ‫like this, since it's my utility, I can name it anything. 115 00:07:52,640 --> 00:07:59,960 ‫And if I copied this one now, every time I need to horizontal anything, I can just add a here and 116 00:07:59,960 --> 00:08:02,420 ‫see and see horizontal center. 117 00:08:02,840 --> 00:08:05,360 ‫Now, if I jump back here, you can see it center. 118 00:08:05,930 --> 00:08:08,390 ‫So I don't need to mess with different things. 119 00:08:08,390 --> 00:08:11,870 ‫I can simplify things with the help of this type of utility. 120 00:08:12,440 --> 00:08:13,880 ‫Now I can do something similar. 121 00:08:13,880 --> 00:08:16,130 ‫I can copy this and add this here itself. 122 00:08:17,030 --> 00:08:22,310 ‫But this will help me to utilize this same property again and again whenever I need to do something. 123 00:08:22,670 --> 00:08:24,210 ‫Now this is a small project. 124 00:08:24,210 --> 00:08:30,290 ‫That's a small example when you work with big projects that can be custom utilities working on multiple 125 00:08:30,290 --> 00:08:32,300 ‫pages, multiple projects as well. 126 00:08:32,810 --> 00:08:38,840 ‫So you will understand more about this when you are going to work with a framework like bootstrap or 127 00:08:38,840 --> 00:08:44,300 ‫maybe any other framework, you will get more knowledge about these utilities, or it can be any component. 128 00:08:44,390 --> 00:08:50,360 ‫For example, you can build different types of buttons and see where and then whenever you want to utilize 129 00:08:50,360 --> 00:08:53,300 ‫any button, you can just add a particular property. 130 00:08:54,170 --> 00:08:58,190 ‫Now you will see common names like primary or maybe success. 131 00:08:58,940 --> 00:09:01,880 ‫So success is always represented towards green. 132 00:09:02,180 --> 00:09:05,730 ‫Or maybe alert is always represented towards the law. 133 00:09:05,750 --> 00:09:10,370 ‫The injuries represented or failure a failure is represented. 134 00:09:10,370 --> 00:09:11,630 ‫The word maybe red. 135 00:09:12,140 --> 00:09:16,300 ‫So you can have different type of colors, colors of maybe primary color. 136 00:09:16,550 --> 00:09:23,150 ‫See something like this, and the color may be related to blue, whatever the primary color you want 137 00:09:23,150 --> 00:09:23,960 ‫on your website. 138 00:09:24,590 --> 00:09:27,370 ‫So this was just an example about utility. 139 00:09:27,380 --> 00:09:30,770 ‫I hope you got the idea, and this looks fine. 140 00:09:30,920 --> 00:09:32,260 ‫I hope you got the idea. 141 00:09:32,270 --> 00:09:37,280 ‫How to design a clone of our section with the help of is great. 142 00:09:38,090 --> 00:09:43,700 ‫Now one last thing, then our chances that you might need different sizes at this point of time, I'm 143 00:09:43,700 --> 00:09:46,130 ‫pretty zoomed in while recording these lectures. 144 00:09:46,580 --> 00:09:48,290 ‫So maybe you want different sizes? 145 00:09:48,410 --> 00:09:49,850 ‫Try to play with different sizes. 146 00:09:50,150 --> 00:09:51,680 ‫Try to play with different colors. 147 00:09:52,070 --> 00:09:53,720 ‫You have color and knowledge. 148 00:09:53,720 --> 00:09:56,710 ‫By now, I do play with different forms. 149 00:09:56,720 --> 00:09:59,810 ‫You don't need to stick with this whole Poppins thing. 150 00:10:01,000 --> 00:10:07,390 ‫And try to play with images, at least when you are uploading a project, at least when you are showing 151 00:10:07,390 --> 00:10:11,950 ‫your project in your resumé or maybe anywhere else on social media or anywhere. 152 00:10:12,280 --> 00:10:14,050 ‫Try to have some other images. 153 00:10:14,170 --> 00:10:14,770 ‫It's free. 154 00:10:14,770 --> 00:10:16,630 ‫You can use Unsplash. 155 00:10:16,630 --> 00:10:20,440 ‫You can use pixels, anything and just have different images. 156 00:10:20,620 --> 00:10:22,480 ‫Make sure you maintain the ratio. 157 00:10:23,260 --> 00:10:29,440 ‫For example, if you jump on to any type of image here, I guess this is 700 by 700. 158 00:10:29,770 --> 00:10:33,130 ‫So make sure you maintain these ratios 700 by 700. 159 00:10:34,060 --> 00:10:38,830 ‫So whenever you try to squeeze them, they will still maintain their expectations. 160 00:10:39,850 --> 00:10:42,760 ‫So that's all for this whole project, EU-Canada. 161 00:10:42,760 --> 00:10:47,170 ‫But I had and then push this code on to get up or open. 162 00:10:48,950 --> 00:10:55,610 ‫That's all for this whole project, I hope you got the idea about, says Greg, utilities, responsiveness 163 00:10:55,610 --> 00:10:56,900 ‫and a few other concepts. 164 00:10:57,410 --> 00:10:58,370 ‫Thank you for calling. 165 00:10:58,760 --> 00:11:02,360 ‫Make sure after designing this or completing the section or this project. 166 00:11:02,720 --> 00:11:03,860 ‫Read this on Twitter. 167 00:11:03,870 --> 00:11:07,490 ‫Make sure to tag me, or maybe on LinkedIn, as well as Instagram. 168 00:11:08,090 --> 00:11:09,120 ‫Thank you for calling. 169 00:11:09,140 --> 00:11:12,140 ‫I hope this was helpful and I see you guys in the next one.