1 00:00:00,150 --> 00:00:06,840 OK, guys, in this video, we are going to check about how to make a grid system for our Web site. 2 00:00:07,250 --> 00:00:19,170 The first thing we stuck with right here is to try to have a class a row and we will make the row to 3 00:00:19,170 --> 00:00:24,110 be having the class of display of lights. 4 00:00:24,510 --> 00:00:28,380 We can go to this same type row. 5 00:00:29,520 --> 00:00:33,530 And you're to be having this play off. 6 00:00:33,570 --> 00:00:34,010 Let's. 7 00:00:36,630 --> 00:00:44,700 OK, and then inside, we want to make two columns and a column, I want each column to be having 50 8 00:00:44,700 --> 00:00:46,850 percent of the page. 9 00:00:47,280 --> 00:00:48,690 Let us know how to make it. 10 00:00:49,350 --> 00:00:54,570 We can create that division and give it a class of column 11 00:00:58,410 --> 00:00:59,160 like that. 12 00:00:59,340 --> 00:01:04,050 And then inside we can go to our final. 13 00:01:06,270 --> 00:01:16,140 And just copy the last text, because I think we will need it, we can just go here to learn and now 14 00:01:16,140 --> 00:01:22,830 we can copy this large text our content anyway and go back to the cut and paste. 15 00:01:26,280 --> 00:01:27,660 And then we got this text. 16 00:01:28,060 --> 00:01:37,830 What if we add another dimension from here, but before we do that, we want this to be taking 50 percent 17 00:01:37,830 --> 00:01:38,730 of the beach. 18 00:01:39,090 --> 00:01:50,290 We can go here and just type common sense to be having the width of a 350 and not 40. 19 00:01:51,470 --> 00:01:53,430 See, now this is having 50 percent. 20 00:01:53,700 --> 00:01:56,970 But what if I go and add more? 21 00:02:00,660 --> 00:02:05,460 We got to, but here is the final test for this part. 22 00:02:05,790 --> 00:02:09,160 What if I add more columns right here? 23 00:02:10,500 --> 00:02:12,350 We don't want that to be a habit. 24 00:02:12,600 --> 00:02:15,310 We want that road to be broken. 25 00:02:15,330 --> 00:02:23,310 A great and you know, because here we've got 50 percent of the package and the other 50 percent, we 26 00:02:23,310 --> 00:02:28,650 can just go here and add CLECs, grab to be rap. 27 00:02:30,810 --> 00:02:34,020 And now we can see the line broken here. 28 00:02:34,020 --> 00:02:36,420 We got 50 percent and 50 percent. 29 00:02:36,720 --> 00:02:43,620 Whenever we go, we can just add some martien and borders so we can separate between them. 30 00:02:44,160 --> 00:02:47,360 Margin job of, uh. 31 00:02:48,210 --> 00:02:48,840 No, no. 32 00:02:48,840 --> 00:02:49,860 Just OK. 33 00:02:51,000 --> 00:02:51,100 OK, 34 00:02:55,080 --> 00:02:55,820 but those 35 00:02:58,330 --> 00:03:03,690 margin three border we can get it. 36 00:03:03,740 --> 00:03:05,950 Five pixels solid of. 37 00:03:05,970 --> 00:03:06,260 Right. 38 00:03:06,270 --> 00:03:06,450 The. 39 00:03:09,570 --> 00:03:15,480 OK, now we got this when we make the screen like that, we get a problem because of the margin, I 40 00:03:15,480 --> 00:03:15,860 think. 41 00:03:16,500 --> 00:03:18,210 Yes, because of the width of the. 42 00:03:19,140 --> 00:03:21,040 Let's just leave it up there. 43 00:03:22,170 --> 00:03:24,210 We are having 100 percent of the way. 44 00:03:24,390 --> 00:03:29,880 So when we give it five pixels, we are forcing the column to be broken. 45 00:03:30,510 --> 00:03:31,560 OK, that's good. 46 00:03:32,100 --> 00:03:34,110 But that's not all. 47 00:03:34,320 --> 00:03:37,890 We want to make the page divided to 12 colors. 48 00:03:38,670 --> 00:03:39,900 Seven are to put to jobs. 49 00:03:39,900 --> 00:03:41,790 So we will be having them. 50 00:03:41,940 --> 00:03:48,210 One, two, three, four, five, six, seven, eight, nine, 10, 11 and 12. 51 00:03:48,840 --> 00:03:55,370 Let's start from the beginning, but we will just keep the column one of the column six three. 52 00:03:55,530 --> 00:03:58,130 Let's slow this part and just keep the roll, 53 00:04:01,620 --> 00:04:02,190 OK? 54 00:04:04,170 --> 00:04:09,120 We don't need the margin up here. 55 00:04:09,300 --> 00:04:17,550 We will start with column one Java with class of column one. 56 00:04:18,000 --> 00:04:23,030 And after we learn the design, we will make them responsive. 57 00:04:23,490 --> 00:04:28,790 And then after this part, what we can do is to type the large text. 58 00:04:29,130 --> 00:04:33,960 And now we have just we just need to add the width of the column one. 59 00:04:34,350 --> 00:04:40,710 As I told you before, we want to divide the page into twelve columns, so we will need to calculate 60 00:04:40,710 --> 00:04:43,830 the percentage of one over twelve. 61 00:04:44,160 --> 00:04:48,890 We can calculate one over twelve joined by hundred. 62 00:04:48,900 --> 00:04:54,450 I think it will be yes it will be eight point thirty three percent. 63 00:04:55,140 --> 00:05:01,410 Column one to be having the width of five. 64 00:05:01,740 --> 00:05:02,460 Yes. 65 00:05:03,000 --> 00:05:07,050 Eight point thirty three percent. 66 00:05:08,250 --> 00:05:12,870 OK, that's good when we rely on the page. 67 00:05:13,330 --> 00:05:22,290 Now we got this which let's go and try to add more of the same column, but we got something wrong here. 68 00:05:22,680 --> 00:05:26,650 We will delay this one and also the one from here. 69 00:05:28,500 --> 00:05:30,930 So here we got the column one. 70 00:05:31,800 --> 00:05:33,390 We can try to add more. 71 00:05:33,390 --> 00:05:34,710 We can copy this column. 72 00:05:38,040 --> 00:05:48,150 OK, one and compete for 12 times just to make sure that everything is working right to what about now 73 00:05:49,980 --> 00:05:50,550 three? 74 00:05:53,950 --> 00:05:54,460 For. 75 00:05:58,310 --> 00:05:59,030 Five. 76 00:06:02,470 --> 00:06:03,180 S.. 77 00:06:06,370 --> 00:06:07,000 Seven. 78 00:06:10,480 --> 00:06:11,020 Eight. 79 00:06:14,390 --> 00:06:14,990 Nine, 80 00:06:17,750 --> 00:06:18,230 10. 81 00:06:21,750 --> 00:06:26,280 Eleven, and I hope that one will be OK and 12. 82 00:06:29,360 --> 00:06:33,050 Yes, now we got the 12 and one, if I add more. 83 00:06:36,090 --> 00:06:45,420 Never got then you then, you know, so they make it up out in the cold and one we can delete all I 84 00:06:45,780 --> 00:06:48,420 want with it and make the column too. 85 00:06:48,570 --> 00:06:54,000 And very soon we will learn the response to design and make them responsive, which will be similar 86 00:06:54,000 --> 00:06:55,400 to future. 87 00:06:57,120 --> 00:07:00,000 OK, we need to leave this part right here. 88 00:07:00,630 --> 00:07:01,450 Yes, sir. 89 00:07:02,310 --> 00:07:03,360 OK, perfect. 90 00:07:05,120 --> 00:07:13,880 And then at this party, we can tie for the colon to the come to, we will divide two by 12, joined 91 00:07:13,880 --> 00:07:23,190 by 100 to divide it by 12 to 200, which will be sixteen point six, six, six, seven. 92 00:07:23,720 --> 00:07:30,760 We can just go here any division, class of two. 93 00:07:31,430 --> 00:07:33,740 And after this break, we will close it. 94 00:07:34,460 --> 00:07:37,520 And the text, we can get it from here. 95 00:07:38,570 --> 00:07:49,060 We can close this one line and we can't cover this back from here and then go to the good pen and it's 96 00:07:49,190 --> 00:07:53,600 just go back from here. 97 00:07:53,640 --> 00:07:54,040 That's. 98 00:07:56,190 --> 00:08:06,330 We just need to add the styling of the column to we can make this larger colon to be having the way 99 00:08:08,550 --> 00:08:13,350 we can give it a bit of sixteen point. 100 00:08:14,630 --> 00:08:23,190 And yes, we can give it for like me up the tactility retain six, six, six, seven. 101 00:08:28,990 --> 00:08:30,190 What's the problem here? 102 00:08:30,490 --> 00:08:39,130 Yes, keep the 50 percent, so now we got this with let's try to copy and paste the same column to make 103 00:08:39,130 --> 00:08:41,890 sure that everything is working great. 104 00:08:42,550 --> 00:08:45,040 We can copy this column from here 105 00:08:48,760 --> 00:08:49,270 now. 106 00:08:49,360 --> 00:08:52,510 We can just add it inside the page. 107 00:08:52,870 --> 00:08:54,190 One, two, 108 00:08:57,820 --> 00:08:58,540 three. 109 00:09:02,920 --> 00:09:03,670 For. 110 00:09:06,930 --> 00:09:07,920 Five. 111 00:09:10,450 --> 00:09:11,800 And six. 112 00:09:14,880 --> 00:09:22,440 OK, that's good, and now we have this the second thing we will do right now is to try to add more 113 00:09:22,440 --> 00:09:25,980 to make sure that the road will be broken. 114 00:09:29,250 --> 00:09:37,440 And now the road has been broken now again, try for the column three, we will try until you reach 115 00:09:37,620 --> 00:09:39,260 that column 12. 116 00:09:40,290 --> 00:09:41,280 OK, that's good. 117 00:09:42,060 --> 00:09:49,380 After this part, what we can do is try and drive with class for the class. 118 00:09:50,130 --> 00:09:56,010 OK, we got the settings here if we wish to end the edge team or any of that. 119 00:09:56,010 --> 00:10:07,020 But we don't need right now and we can give that class of column three and then give have the closure 120 00:10:07,710 --> 00:10:08,800 at this part. 121 00:10:08,850 --> 00:10:14,880 We can take the text with Johnny the column to we will delete it. 122 00:10:17,850 --> 00:10:22,800 We just need to add here the styling of the column. 123 00:10:22,930 --> 00:10:28,620 Sorry, we can type column three and I want it to be having the width. 124 00:10:29,940 --> 00:10:31,250 Let's calculate it. 125 00:10:31,260 --> 00:10:40,230 We got here three divided by twelve, one time by hundred which is twenty five percent. 126 00:10:40,710 --> 00:10:43,050 Twenty five percent. 127 00:10:44,370 --> 00:10:49,070 And now when we make this we got the twenty five percent of the page. 128 00:10:50,100 --> 00:10:53,790 Let's just make sure that everything is working fine. 129 00:10:54,600 --> 00:10:59,580 We will be having here just four columns for one row. 130 00:10:59,820 --> 00:11:01,350 It would get the first column. 131 00:11:02,460 --> 00:11:03,810 This would be the second. 132 00:11:05,130 --> 00:11:05,850 Third. 133 00:11:08,470 --> 00:11:09,310 The force. 134 00:11:12,380 --> 00:11:17,870 Let's try the last one to make sure that everything is working fine. 135 00:11:22,650 --> 00:11:32,640 So now everything is working perfect and we can set everything back to try to make sure the golden framework 136 00:11:33,480 --> 00:11:48,480 here, we can just try to be in class column for and against the closure of that class and activist 137 00:11:48,480 --> 00:11:48,840 part. 138 00:11:49,110 --> 00:12:01,050 We can just go to the seats and make sure to be having the which four divided by twelve point five hundred, 139 00:12:01,050 --> 00:12:10,350 which will be what, three three point three three three, three, four. 140 00:12:12,750 --> 00:12:22,320 And then we can go to our for our file on your copy the tax or cut it the same. 141 00:12:22,920 --> 00:12:28,740 And they figure for this road we will just be having three cones. 142 00:12:29,220 --> 00:12:35,630 We can't copy this, Devon, also to make sure that everything is working fine. 143 00:12:37,290 --> 00:12:40,830 And here again, this to be the second. 144 00:12:42,780 --> 00:12:43,680 The third. 145 00:12:47,090 --> 00:12:52,560 So now we got only three row, because four multiplied by three is 12. 146 00:12:52,940 --> 00:12:55,640 And what if I wanted more? 147 00:12:58,880 --> 00:13:06,440 OK, so now that rule has been broken and we got no problem with that part after this party. 148 00:13:09,160 --> 00:13:10,300 We came to lead them. 149 00:13:11,890 --> 00:13:12,800 OK, that's good. 150 00:13:13,540 --> 00:13:22,300 And also the latest one and this one and the last one, and maybe that could be golden fun. 151 00:13:22,960 --> 00:13:25,380 We can now go over just couple. 152 00:13:25,550 --> 00:13:37,480 First, we will leave this class and it's closure and now we can go to the killing Kononov five of the 153 00:13:37,480 --> 00:13:38,050 bracket. 154 00:13:38,350 --> 00:13:43,500 And for this part, we can make five divided by 12 time. 155 00:13:43,510 --> 00:13:55,990 Two hundred, which will be forty one point sixty seven width of forty one point sixty six seven. 156 00:13:58,760 --> 00:13:59,450 OK. 157 00:14:02,960 --> 00:14:11,200 Yes, the percentage, this part, the problem and no big job is the one row only we'll be having a 158 00:14:11,200 --> 00:14:15,920 maximum of two columns in case of column five. 159 00:14:16,460 --> 00:14:19,940 We can do this again or we can just cut this part. 160 00:14:25,220 --> 00:14:26,060 OK. 161 00:14:29,150 --> 00:14:38,750 So if I add more, we will just be having two columns for the one row now. 162 00:14:38,760 --> 00:14:41,210 This is good for the column five. 163 00:14:41,480 --> 00:14:46,940 After this part, we can test where they are. 164 00:14:47,030 --> 00:14:50,260 We can test for the reload here. 165 00:14:50,360 --> 00:14:56,420 OK, we can get to the column seven because we already have here the column six. 166 00:14:57,470 --> 00:15:09,350 We can make here Tavurvur with a class of column seven and here to be having exclosure after this part. 167 00:15:09,620 --> 00:15:15,290 We can just go inside and talk to the text from here again, Lauren. 168 00:15:16,550 --> 00:15:26,600 OK, we can capture this text, go back to our editor and based and for this one we will divide seven 169 00:15:26,990 --> 00:15:34,090 by 12 multiplied by hundred, which will be fifty eight point three three three. 170 00:15:34,910 --> 00:15:42,200 We can go here column seven to be having the width 171 00:15:44,990 --> 00:15:49,600 of fifty eight point three three percent. 172 00:15:50,660 --> 00:15:56,030 Let's just copy the column six and make it after the five. 173 00:15:56,720 --> 00:16:01,550 In case you want to make in case if you want to take this page as a reference. 174 00:16:02,930 --> 00:16:11,930 So now we got this column seven, but I will only be able to add one row inside two columns of the story, 175 00:16:11,930 --> 00:16:15,550 one column or Article seven for this. 176 00:16:15,590 --> 00:16:27,230 Well, if I go and add more Java class column seven and a game right here, the closure. 177 00:16:36,210 --> 00:16:44,440 Just one of them is available here to be added or APAL here to be added. 178 00:16:45,090 --> 00:17:00,420 What if I tried to add one dev with a class of column one I will be able to add until I reach the 12. 179 00:17:01,650 --> 00:17:03,060 You can go here. 180 00:17:03,060 --> 00:17:03,770 I type 181 00:17:06,420 --> 00:17:07,560 O one. 182 00:17:07,890 --> 00:17:09,690 I can just copy this one right now. 183 00:17:10,230 --> 00:17:11,250 We got eight. 184 00:17:13,610 --> 00:17:14,150 Nine. 185 00:17:16,490 --> 00:17:21,050 10, 11 and 12. 186 00:17:23,910 --> 00:17:28,330 So now we are able to add 12 columns for each of them. 187 00:17:28,350 --> 00:17:39,240 We can use column for we've got them six if we wish to let this part and try now for that column eight, 188 00:17:39,510 --> 00:17:46,410 or we can just delete the column seven we can make here column eight. 189 00:17:46,980 --> 00:17:53,880 We can go now to this year's Golden Age for the column page. 190 00:17:54,360 --> 00:17:57,470 We will make eight divided by 12. 191 00:17:58,320 --> 00:18:09,270 Let me try to make it eight divided by 12 times 200, which will be six six point sixty seven percent 192 00:18:09,670 --> 00:18:11,730 for just one column. 193 00:18:12,840 --> 00:18:20,790 So here we got eight, nine, 10, 11 and 12 and this will be 13. 194 00:18:20,790 --> 00:18:22,850 So that road will be broken. 195 00:18:23,760 --> 00:18:28,640 And after this one, we can try for the column nine. 196 00:18:28,920 --> 00:18:31,500 We can make this to be column nine. 197 00:18:33,120 --> 00:18:35,970 OK, that's good enough for the column number nine. 198 00:18:36,750 --> 00:18:46,860 We can add here the width to be nine, divided by twelve point two hundred, which will be seventy five 199 00:18:47,160 --> 00:18:47,770 percent. 200 00:18:49,200 --> 00:18:56,220 OK, so now we got nine, 10, 11 and 12. 201 00:18:56,340 --> 00:18:57,030 That's good. 202 00:18:57,990 --> 00:19:10,860 After this part we can just make for the column ten and for the column ten column time. 203 00:19:11,970 --> 00:19:22,560 We will make it divide by twelve times two hundred which will be eighty three point three three three 204 00:19:23,010 --> 00:19:23,610 percent. 205 00:19:24,450 --> 00:19:31,380 OK, so now what about now, what's wrong with that part? 206 00:19:33,360 --> 00:19:34,540 I think we got something. 207 00:19:34,560 --> 00:19:35,040 Yes. 208 00:19:35,550 --> 00:19:36,770 That would probably. 209 00:19:40,640 --> 00:19:45,710 So now we got this when we got here 10, 11 and 12. 210 00:19:46,070 --> 00:19:46,990 OK, that's good. 211 00:19:47,000 --> 00:19:55,730 And we know how to use this, but now we can try for that column 11 and know how we can deal with that, 212 00:19:56,030 --> 00:19:57,140 call an 11. 213 00:19:57,630 --> 00:20:07,180 And now we can go and add the title of the column 11, column 11 I can make them with here. 214 00:20:08,120 --> 00:20:20,990 We will make 11 divide by 12 time to 100, which will be ninety one point six six six seven percent. 215 00:20:22,160 --> 00:20:26,960 The percent who call them 11 and not one. 216 00:20:29,830 --> 00:20:30,420 OK. 217 00:20:33,560 --> 00:20:35,420 I think we got something wrong here. 218 00:20:36,140 --> 00:20:37,240 What's the problem? 219 00:20:41,050 --> 00:20:44,220 I guess so, yes. 220 00:20:44,770 --> 00:20:49,870 What's the problem right here, Colen 11? 221 00:20:54,590 --> 00:20:56,300 We can try to have more sex. 222 00:20:56,330 --> 00:20:56,780 OK? 223 00:21:01,050 --> 00:21:05,310 We got something wrong with this part, so we need to check the problem fit. 224 00:21:06,690 --> 00:21:07,560 Yes, sir. 225 00:21:09,090 --> 00:21:11,550 Call them the line we can search right here. 226 00:21:11,940 --> 00:21:13,080 Yes, it is the same. 227 00:21:13,440 --> 00:21:16,380 But I think we got a problem here, sir. 228 00:21:16,530 --> 00:21:17,530 We need to check it. 229 00:21:20,010 --> 00:21:24,930 We can go to the column one and try to find more recent. 230 00:21:28,340 --> 00:21:33,530 Yes, I think it's only for the numbers or maybe the closure here. 231 00:21:35,450 --> 00:21:36,890 No, that's not the problem. 232 00:21:37,300 --> 00:21:40,000 So we need to search for the problem of this part. 233 00:21:41,720 --> 00:21:44,170 We can make nine to one point to. 234 00:21:47,140 --> 00:21:51,310 You can just make like one, two, three, four, five, seven. 235 00:21:54,510 --> 00:21:59,260 And for the colon one, we can just go here and see what we can do. 236 00:22:00,530 --> 00:22:03,290 OK, we just need to think about it. 237 00:22:03,300 --> 00:22:04,560 We can make it to. 238 00:22:09,270 --> 00:22:14,700 One, two, three, four, five, six, seven, eight, I think this will solve the problem, I hope 239 00:22:14,700 --> 00:22:16,170 so No. 240 00:22:16,170 --> 00:22:17,190 One get a problem with it. 241 00:22:17,200 --> 00:22:23,580 But the problem is just with the percentage. 242 00:22:24,520 --> 00:22:25,700 Yes. 243 00:22:25,860 --> 00:22:29,280 Yeah, we get a problem with part. 244 00:22:31,460 --> 00:22:33,920 We need to make some space here. 245 00:22:34,550 --> 00:22:35,550 Let's think about it. 246 00:22:35,590 --> 00:22:38,180 Wait, what if I make just 91 percent? 247 00:22:40,960 --> 00:22:44,660 No, we still have something here. 248 00:22:44,680 --> 00:22:46,660 Let's make it to 90 percent. 249 00:22:49,650 --> 00:22:51,670 What about 80? 250 00:22:52,170 --> 00:22:53,640 What's the problem with this part? 251 00:22:56,230 --> 00:22:57,410 We got something here. 252 00:22:57,430 --> 00:23:00,410 I think the page is not being reloaded. 253 00:23:01,330 --> 00:23:07,450 Let's just make this to be a nine to one, as we did before. 254 00:23:08,710 --> 00:23:10,680 Yeah, let me think about it. 255 00:23:14,640 --> 00:23:24,330 Ninety one point one, two, three, four, five, six, seven, six, and minus eight, five hundred 256 00:23:24,900 --> 00:23:26,490 to be eight point. 257 00:23:28,430 --> 00:23:34,820 Three three three three three like that, or we can just make it to eight, it's OK. 258 00:23:35,550 --> 00:23:36,800 Eight point three. 259 00:23:39,780 --> 00:23:41,910 I think the page is not being followed. 260 00:23:41,940 --> 00:23:47,190 Peter, let's try to make it 100 percent, make sure that everything is working fine. 261 00:23:48,360 --> 00:23:51,180 No, we get a problem with this part, I think. 262 00:23:51,450 --> 00:23:52,810 Let's try to make it a game. 263 00:23:53,430 --> 00:23:54,910 No, we got no problem with that. 264 00:23:55,620 --> 00:23:58,320 So what is the problem right here? 265 00:23:59,130 --> 00:24:00,960 We got eight point three. 266 00:24:08,440 --> 00:24:13,840 And we can make this one ninety one point seven, so they will be taking 100 percent. 267 00:24:16,250 --> 00:24:26,840 No, let's try to make something like they do, reverse of pattern of zero, margin zero. 268 00:24:31,960 --> 00:24:36,340 We got a problem this part, and we need to check it, OK? 269 00:24:37,240 --> 00:24:40,790 We will see the problem and solve it in the next video. 270 00:24:41,020 --> 00:24:43,020 So good luck and have fun.