1 00:00:00,520 --> 00:00:01,090 ‫Hey, there. 2 00:00:01,180 --> 00:00:01,840 ‫Welcome back. 3 00:00:02,140 --> 00:00:07,520 ‫Now let us continue our great bar in the previous lecture, every discussion about this column. 4 00:00:07,540 --> 00:00:13,570 ‫That means we have to edit great points and we can divide them, according to these numbers, according 5 00:00:13,570 --> 00:00:14,380 ‫to this column. 6 00:00:15,010 --> 00:00:19,840 ‫Now remember, I have also mentioned that we can utilize any number of ways that can be won. 7 00:00:20,410 --> 00:00:25,180 ‫But what happens if we only have one column that means we only have this one call? 8 00:00:25,630 --> 00:00:30,580 ‫If I save this one and if I jump back, it makes complete site. 9 00:00:30,580 --> 00:00:35,520 ‫That means by default, this column is going to take complete. 10 00:00:35,820 --> 00:00:36,880 ‫Do I look great? 11 00:00:37,480 --> 00:00:39,280 ‫Are there a lot of things that we can do? 12 00:00:39,670 --> 00:00:45,850 ‫We can utilize the knowledge of breakpoint and then customize that, OK, I need six for this and six 13 00:00:45,850 --> 00:00:46,330 ‫for this. 14 00:00:46,750 --> 00:00:49,930 ‫And as soon as we squeeze, I need something else. 15 00:00:50,350 --> 00:00:51,130 ‫OK, great. 16 00:00:51,460 --> 00:00:57,190 ‫So let me get back to our default one, which is six and six. 17 00:00:58,490 --> 00:00:59,480 ‫Looks good now. 18 00:00:59,510 --> 00:01:00,950 ‫Currently, we have these two. 19 00:01:01,490 --> 00:01:08,360 ‫Now let me also use one quick property just green, please on site so I can use on site, and there 20 00:01:08,360 --> 00:01:13,280 ‫are one two three four five with utilities, so I can see one that will be pretty big. 21 00:01:13,730 --> 00:01:15,590 ‫So on site is Dash one. 22 00:01:16,310 --> 00:01:17,180 ‫Save this one. 23 00:01:17,210 --> 00:01:17,930 ‫Get back here. 24 00:01:18,140 --> 00:01:21,440 ‫Now you can see it's bigger, so this looks great. 25 00:01:21,590 --> 00:01:25,820 ‫But as soon as I squeeze this one, things get in trouble. 26 00:01:25,970 --> 00:01:30,050 ‫I want something like, I want them to go in a responsive. 27 00:01:31,230 --> 00:01:33,390 ‫And I can use my bootstrap knowledge. 28 00:01:33,840 --> 00:01:42,420 ‫What I can do is I can just follow and I can how options regarding access, S.M. Energy Excel as well 29 00:01:42,420 --> 00:01:50,040 ‫as access, and now I strongly recommend to watch these lectures in full screen because I cannot assume 30 00:01:50,040 --> 00:01:51,600 ‫more than this if I try to. 31 00:01:51,600 --> 00:01:55,530 ‫Zoom had this whole bootstrap website will not be visible. 32 00:01:55,530 --> 00:01:59,460 ‫Clearly, there will be removal of these sidebars and few other things. 33 00:01:59,790 --> 00:02:03,210 ‫So I strongly recommend just watch these lectures in full screen. 34 00:02:04,160 --> 00:02:07,810 ‫Now, when these break coins, we can customize that. 35 00:02:08,300 --> 00:02:15,620 ‫OK, follow this six by six only when we are greater than M.D., for example, if I see here on Dash, 36 00:02:15,620 --> 00:02:23,180 ‫M.D., Dash six, as well as with my second there, and if I save this one, what it is going to do 37 00:02:23,180 --> 00:02:30,530 ‫is it is going to divide in six only when we are greater than this M.D. we just 776 or whatever the 38 00:02:30,530 --> 00:02:31,130 ‫Pixel is. 39 00:02:31,460 --> 00:02:36,920 ‫If I jump out with just 768 pixel so greater than 768 pixel. 40 00:02:37,070 --> 00:02:44,120 ‫We are going to divide them into two parts and rest of the time we are going to have the complete two 41 00:02:44,280 --> 00:02:44,720 ‫grades. 42 00:02:45,560 --> 00:02:50,210 ‫Remember Greta, then M.D. That means 768 pixel. 43 00:02:50,570 --> 00:02:53,660 ‫We are going to divide them into two parts. 44 00:02:54,410 --> 00:02:57,620 ‫And if I jump here, you can see currently we are in two parts. 45 00:02:57,980 --> 00:03:02,690 ‫If I click on Inspect and if I go below, remember, check here. 46 00:03:02,690 --> 00:03:03,950 ‫Seven, six eight. 47 00:03:07,890 --> 00:03:13,140 ‫As soon as we go below seven six it, they are capturing well with completely. 48 00:03:13,860 --> 00:03:15,240 ‫Now I can do more fun. 49 00:03:15,240 --> 00:03:17,520 ‫Since I have big screen, I can see. 50 00:03:18,340 --> 00:03:20,820 ‫Let's take different properties together. 51 00:03:21,030 --> 00:03:21,780 ‫I can see. 52 00:03:24,490 --> 00:03:27,100 ‫Maybe energy three. 53 00:03:28,210 --> 00:03:30,310 ‫And similarly, here I can take. 54 00:03:31,810 --> 00:03:33,040 ‫Call 89. 55 00:03:33,580 --> 00:03:41,920 ‫So that means we are now following two properties greater than our energy, which is, I guess, 992 56 00:03:41,920 --> 00:03:50,410 ‫pixels so greater than nine Bexhill give this bear three grades and give this grade nine grades. 57 00:03:50,830 --> 00:03:58,390 ‫But as soon as we decrease from or I should say we are less than 992 Vixen, we will follow this property. 58 00:03:59,080 --> 00:04:00,250 ‫So let me jump back here. 59 00:04:00,850 --> 00:04:05,140 ‫This is currently 992 pixel greater than 992 Pixel. 60 00:04:05,470 --> 00:04:08,350 ‫So this is three and this is nine. 61 00:04:11,440 --> 00:04:14,170 ‫But as soon as I start decreasing the size. 62 00:04:15,400 --> 00:04:17,200 ‫Keep an eye on the size. 63 00:04:17,920 --> 00:04:19,660 ‫Now you can see this a six and six. 64 00:04:19,990 --> 00:04:28,390 ‫As soon as we are less than nine 92% now again, as soon as I'm less than me, this is going to be complete 65 00:04:28,390 --> 00:04:30,390 ‫default value, which is great. 66 00:04:31,060 --> 00:04:31,780 ‫So that's all. 67 00:04:31,780 --> 00:04:37,030 ‫You can control a lot of thing without writing any type of mediocrity. 68 00:04:37,360 --> 00:04:42,220 ‫And this is going to work really well when we are going to design these type of section. 69 00:04:43,200 --> 00:04:44,970 ‫OK, I hope you got the idea. 70 00:04:45,690 --> 00:04:51,450 ‫Now here you can scroll and check out the other examples, and they are similar example, but very different 71 00:04:51,450 --> 00:04:53,190 ‫called value and a few other things. 72 00:04:56,210 --> 00:04:57,920 ‫OK, let's call up. 73 00:04:58,700 --> 00:05:04,880 ‫Click on this column part, and by default, this whole thing is Colleen Flexbox, something like this 74 00:05:05,300 --> 00:05:13,090 ‫so you can scroll and hey, you can again have an option about a line item, start a line item, center 75 00:05:13,220 --> 00:05:14,000 ‫line items. 76 00:05:14,000 --> 00:05:20,780 ‫And if you have knowledge about Flexbox, you know all of this so you can arrange things with justified 77 00:05:20,790 --> 00:05:23,240 ‫content as well as line items. 78 00:05:23,750 --> 00:05:24,800 ‫This is great. 79 00:05:25,710 --> 00:05:32,790 ‫Now, the next thing is about capping, so this gap is important, and if you remember about grid system, 80 00:05:32,820 --> 00:05:39,030 ‫which is this is great, you remember about the gap or column gap, if you remember about Flexbox, 81 00:05:39,030 --> 00:05:42,690 ‫you know about these things that you can add gap between these two. 82 00:05:43,290 --> 00:05:44,910 ‫So these are the basic things. 83 00:05:45,000 --> 00:05:48,210 ‫If you know about CIUSSS, these are just cheap. 84 00:05:49,300 --> 00:05:55,630 ‫Now, then comes this utility section again, which is important, and here you can remember this dome 85 00:05:55,640 --> 00:05:57,130 ‫as utility fallout. 86 00:05:58,310 --> 00:06:04,210 ‫Now, what does this is when we build, when we build any type, what layout we need information about 87 00:06:04,220 --> 00:06:06,530 ‫batting, we need some type of margin. 88 00:06:06,950 --> 00:06:11,840 ‫So these are the common things when you are walking with maybe Flexbox, when we are walking with great 89 00:06:11,840 --> 00:06:13,520 ‫or any type of content. 90 00:06:14,000 --> 00:06:17,390 ‫We need margin padding and few other content. 91 00:06:17,900 --> 00:06:24,320 ‫So if I jump on to my utility now again, and if you jump here with spacing while you can directly click 92 00:06:24,320 --> 00:06:24,590 ‫here. 93 00:06:25,020 --> 00:06:30,260 ‫So if I jump on spacing now, you will see how do utilize margin and padding? 94 00:06:31,070 --> 00:06:33,230 ‫Everything is short hand, remember. 95 00:06:33,830 --> 00:06:41,330 ‫So when you are walking around margin and padding, you use shortcuts like m b, then you can define 96 00:06:41,450 --> 00:06:42,530 ‫where you want to add. 97 00:06:42,770 --> 00:06:46,280 ‫If you say M Dash five, that mean margin five. 98 00:06:46,490 --> 00:06:55,190 ‫Also, if you say b Dash five that mean padding on all side, but you can specify which direction m 99 00:06:55,280 --> 00:06:58,970 ‫d will be margin top and B will be margin bottom. 100 00:06:59,390 --> 00:07:02,020 ‫Then there is S, which is four left inside. 101 00:07:02,030 --> 00:07:05,930 ‫Remember start this site and write inside. 102 00:07:06,470 --> 00:07:13,470 ‫So then we have and then you have a combination of both horizontal so left and right horizontal line. 103 00:07:13,490 --> 00:07:19,770 ‫So it is going to be x then combination of vertical lines, which is top and bottom, which is why I 104 00:07:19,770 --> 00:07:24,350 ‫remember if I say just m, that means it is going to apply on all the four sides. 105 00:07:24,780 --> 00:07:26,090 ‫OK, this sounds great. 106 00:07:26,450 --> 00:07:28,800 ‫And similarly, we have a zero two five value. 107 00:07:28,820 --> 00:07:32,240 ‫We have auto and everything, but let's try to apply here. 108 00:07:32,670 --> 00:07:33,560 ‫But the second box? 109 00:07:33,980 --> 00:07:36,500 ‫So if I jump and jump on to my second box. 110 00:07:37,160 --> 00:07:40,940 ‫So if I utilize padding speed now, remember left and right. 111 00:07:41,390 --> 00:07:44,060 ‫So if I want to add lift, I can say B. 112 00:07:44,060 --> 00:07:46,700 ‫S Dash five and if I save this one. 113 00:07:46,980 --> 00:07:52,640 ‫Remember SS four start, which is left and E is for N, which is padding right. 114 00:07:52,820 --> 00:07:59,780 ‫And if I get like here, you can see we have five and if I right click, click on to the code, but 115 00:07:59,780 --> 00:08:01,340 ‫you can see five. 116 00:08:01,880 --> 00:08:05,450 ‫And if I scroll down, you can see five is padding left. 117 00:08:05,450 --> 00:08:06,050 ‫Three run. 118 00:08:06,890 --> 00:08:08,660 ‫OK, I hope you got the idea. 119 00:08:10,030 --> 00:08:16,270 ‫OK, now we can do a lot of other things, we can play with it, maybe let me, I'd just be so if I 120 00:08:16,270 --> 00:08:22,510 ‫simply the five, that means on all directions here you can see how this b five is going to work. 121 00:08:23,410 --> 00:08:25,840 ‫Similarly, we have options with margin. 122 00:08:25,840 --> 00:08:31,900 ‫I can play with margin Myanmar into this debate and I can see margin right. 123 00:08:31,960 --> 00:08:32,840 ‫That is it. 124 00:08:32,860 --> 00:08:35,650 ‫And then let's say to save this one. 125 00:08:37,260 --> 00:08:41,580 ‫You can see from here we have two, but now we are following the grid system. 126 00:08:41,850 --> 00:08:47,310 ‫So this needs some type of grid, which is nine grid to are just that it is going to scroll down. 127 00:08:47,700 --> 00:08:51,120 ‫Let's suppose of the grid requirement was just three. 128 00:08:51,480 --> 00:08:56,190 ‫So it is going to have just had only because it has option or three grid. 129 00:08:57,450 --> 00:09:04,740 ‫This is important this is the top most priority content, understand about B, understand about these 130 00:09:05,220 --> 00:09:10,950 ‫BBC X Y and also understand about the break points. 131 00:09:11,400 --> 00:09:15,490 ‫Now if you want this margin thing, only one screened. 132 00:09:15,840 --> 00:09:22,560 ‫So for example, if I remove this for now, this margin here and that said, this is going to be nine. 133 00:09:24,900 --> 00:09:25,260 ‫OK. 134 00:09:25,290 --> 00:09:26,640 ‫Everything is normal again. 135 00:09:28,120 --> 00:09:33,370 ‫But I want this binding only when my screen is greater than empty. 136 00:09:33,700 --> 00:09:38,530 ‫That means when my screen is empty, which is 768 pixel. 137 00:09:38,530 --> 00:09:43,060 ‫If my screen is greater than that, I'm going to apply this five padding. 138 00:09:43,540 --> 00:09:46,090 ‫So at this point of time, it is greater than 768. 139 00:09:46,210 --> 00:09:47,470 ‫When asked when as I decrease. 140 00:09:50,040 --> 00:09:52,410 ‫You can see at this point of time, we have. 141 00:09:52,560 --> 00:09:55,890 ‫But as soon as I decrease code below 768. 142 00:09:57,000 --> 00:09:59,850 ‫It's gone, so this fighting is gone. 143 00:09:59,880 --> 00:10:04,050 ‫Let's assume so, and that could be something related to 500. 144 00:10:05,100 --> 00:10:08,400 ‫So currently we have we have this as soon as I decrease. 145 00:10:09,730 --> 00:10:18,940 ‫Let me check the break point or them, which is 576, so as soon as I go below 576, you can see this 146 00:10:18,940 --> 00:10:19,360 ‫is gone. 147 00:10:19,390 --> 00:10:25,210 ‫So this binding will be applied greater than this S.M., which is 576. 148 00:10:26,400 --> 00:10:28,300 ‫Now, you don't need to remember this point. 149 00:10:28,320 --> 00:10:30,120 ‫You will understand about them. 150 00:10:30,330 --> 00:10:36,270 ‫I keep in mind look, if somewhere around 570 or somewhere around 770, something like that, you don't 151 00:10:36,270 --> 00:10:37,860 ‫need to remember the exact point. 152 00:10:38,790 --> 00:10:43,530 ‫I hope you got the idea how to utilize this whole margin and batting team. 153 00:10:44,890 --> 00:10:45,160 ‫OK. 154 00:10:45,190 --> 00:10:47,410 ‫That's all that's done for the basics. 155 00:10:47,710 --> 00:10:54,550 ‫Now we just need to jump and talk about company so they know if you remember, I discussed about fuel 156 00:10:54,550 --> 00:10:56,440 ‫points, utility and layout. 157 00:10:56,830 --> 00:11:00,700 ‫Now the two points are remaining, which is component as well as bombs. 158 00:11:01,270 --> 00:11:03,490 ‫So let's continue this topic in the next one. 159 00:11:03,970 --> 00:11:05,410 ‫I hope this lecture was helpful. 160 00:11:05,560 --> 00:11:06,520 ‫Thank you for calling. 161 00:11:06,850 --> 00:11:08,620 ‫And I see you guys in the next one.