1 00:00:00,890 --> 00:00:08,130 OK, guys, now we can quit our project for the Web business, which is the final project for this year, 2 00:00:08,210 --> 00:00:16,890 us here I have created in depth and also the title as and I have connected between them. 3 00:00:17,390 --> 00:00:25,350 The first thing we will do and also I have copied the grid system I content and align items from the 4 00:00:25,670 --> 00:00:26,390 As folder. 5 00:00:28,930 --> 00:00:36,310 And now the first thing we will do here is to add some classes to the style that leads us to make everything 6 00:00:36,310 --> 00:00:37,040 responsive. 7 00:00:37,060 --> 00:00:39,220 I'm going to show you an example right here. 8 00:00:39,640 --> 00:00:43,600 Let's make each one and then we can type where business 9 00:00:46,180 --> 00:00:49,260 when we go here, safer reloads. 10 00:00:49,960 --> 00:00:52,150 OK, let's open the inspect. 11 00:00:54,750 --> 00:01:04,680 Let's make it clear this is not responsive, and if I make it larger, these are not be responsive. 12 00:01:05,070 --> 00:01:07,140 There's something which is cold here. 13 00:01:07,150 --> 00:01:12,770 We can make web design business, OK? 14 00:01:12,780 --> 00:01:15,020 We can say this is not responsive. 15 00:01:15,390 --> 00:01:21,180 We need to edit the font size of each one in order to make it responsive. 16 00:01:21,570 --> 00:01:29,010 Here we can go to the and we will also add some Placide, which we will use and they will help us to 17 00:01:29,010 --> 00:01:31,100 make the website responsive. 18 00:01:31,440 --> 00:01:34,880 The first thing we will do right here is to type that one. 19 00:01:35,040 --> 00:01:42,570 And of the project there's a property which is called calculation here, return type, font size. 20 00:01:43,350 --> 00:01:57,210 And then we can make calc calculation and then we can type one three seven five dot art plus four W 21 00:01:58,110 --> 00:02:00,090 for the W. 22 00:02:00,510 --> 00:02:07,320 So the font size of this part, which just something here, the font size of each one will be taking 23 00:02:07,320 --> 00:02:16,650 one point three seven five plus the four of the width of any screen and then we can create a medium 24 00:02:16,650 --> 00:02:18,390 for this one. 25 00:02:18,450 --> 00:02:27,390 We can create the medium of minimum width of one, two or three words. 26 00:02:27,390 --> 00:02:28,170 You were pixels. 27 00:02:29,370 --> 00:02:38,400 And if anything, this part we can type each one to be having the font size of 2.5 RTM, which is the 28 00:02:38,400 --> 00:02:41,190 original size of this one. 29 00:02:41,640 --> 00:02:43,600 We can go here and reload. 30 00:02:44,040 --> 00:02:47,690 Now we got the 2.5 larger Buddhistic here. 31 00:02:47,850 --> 00:02:49,040 This is responsive. 32 00:02:49,290 --> 00:02:51,430 Had the same screen tested before. 33 00:02:52,230 --> 00:02:53,550 OK, that's good. 34 00:02:53,550 --> 00:03:04,890 It and after this part we can go here can we can create for a class which is called display one, display 35 00:03:04,890 --> 00:03:05,220 one. 36 00:03:05,220 --> 00:03:10,740 We'll be having a larger font size but different font weight here. 37 00:03:10,740 --> 00:03:22,140 We can get over the display, one up in the print and this to be having the font size of all the calculation 38 00:03:22,140 --> 00:03:23,360 to make the responsive. 39 00:03:23,940 --> 00:03:37,950 And then we can make one point six, two, five, three and plus four point five three w the names are 40 00:03:37,950 --> 00:03:39,810 from the bootstrap website. 41 00:03:40,260 --> 00:03:46,350 And then after this party we can make font weight of three hundred. 42 00:03:46,860 --> 00:03:51,480 We can just go here and try to do something with the display one. 43 00:03:51,750 --> 00:03:58,920 We can come this far off again, but this to be having the class of displaying one and here we will 44 00:03:58,930 --> 00:03:59,760 see the difference. 45 00:03:59,760 --> 00:04:10,260 But let's add something here for the media of this display, one we can make here media of minimum width, 46 00:04:10,650 --> 00:04:12,300 or we can just make it here. 47 00:04:12,330 --> 00:04:15,120 We can cut this part here. 48 00:04:16,110 --> 00:04:22,830 And for the class of displaying one, I want to be having the font of five of them. 49 00:04:23,370 --> 00:04:27,450 We can now go and let's see what we have right here. 50 00:04:27,690 --> 00:04:31,650 Now, we got this larger but smaller than in twenty eighteen. 51 00:04:31,650 --> 00:04:34,110 When we up in the inspect, it's very good. 52 00:04:34,500 --> 00:04:35,610 Just the s. 53 00:04:35,610 --> 00:04:37,090 But this is not a problem. 54 00:04:37,770 --> 00:04:39,000 OK, that's good. 55 00:04:40,620 --> 00:04:46,290 After this part, what we can do is to add for the display too. 56 00:04:46,800 --> 00:04:50,470 We can go to the as best we will be having this play. 57 00:04:51,300 --> 00:04:54,000 Uh one, two, three, four, five, eight six. 58 00:04:54,600 --> 00:05:04,350 Here we can make after this one display, but instead of one, it will be to open the bracket and inside 59 00:05:04,650 --> 00:05:13,830 we can type the font size and we will use the same calculation method, which is calculation. 60 00:05:14,160 --> 00:05:23,850 And then inside we can make one point five seven five are plus three point nine the W. 61 00:05:24,960 --> 00:05:31,680 And then after this part, we can also make a font weight to be the same as the one hundred. 62 00:05:32,130 --> 00:05:36,210 And then inside here we can copy this part paste. 63 00:05:36,360 --> 00:05:38,670 This could be for the display too. 64 00:05:39,330 --> 00:05:44,400 And here I can make or we can make this to be having the four point five. 65 00:05:44,490 --> 00:05:44,760 Ah. 66 00:05:46,380 --> 00:05:48,450 Let's see if it is good right now. 67 00:05:48,480 --> 00:05:53,900 We can copy this part to be here, this P2 instead of. 68 00:05:55,220 --> 00:05:58,760 OK, so now we've got this and also when we up expect. 69 00:06:00,060 --> 00:06:01,740 It's also responsive. 70 00:06:03,390 --> 00:06:13,860 OK, as it is part, if he was to prevent this exact scrolling, you can you can decrease here the font 71 00:06:13,860 --> 00:06:23,520 size or we can go to the house and add overflow into heaven and activist that display to we can make 72 00:06:23,520 --> 00:06:32,430 for the display screen display up at the Prickett and inside we will type the font size. 73 00:06:32,440 --> 00:06:35,520 We can copy this part actually pasted here. 74 00:06:36,790 --> 00:06:45,430 And instead of this number, we can make one point five to five and for which we can make a three point 75 00:06:45,430 --> 00:06:45,880 three. 76 00:06:47,440 --> 00:06:49,180 We can now copy this part. 77 00:06:49,450 --> 00:06:53,040 And the goal here is to be three. 78 00:06:53,740 --> 00:06:56,500 We can go here and up and inspect. 79 00:06:56,510 --> 00:06:57,560 It's already opened. 80 00:06:57,910 --> 00:07:00,490 So now we got this display three. 81 00:07:00,790 --> 00:07:03,160 But I think we can add font weight. 82 00:07:04,150 --> 00:07:11,950 We can copy this point from here and post OK, that could add to this one. 83 00:07:12,070 --> 00:07:15,820 We can make for the media quite of the display. 84 00:07:15,820 --> 00:07:24,340 The three, we can give it the phone to fight off four point five RTM, I think. 85 00:07:25,300 --> 00:07:26,130 Yes. 86 00:07:26,170 --> 00:07:27,260 No, no, no, no. 87 00:07:27,520 --> 00:07:31,300 Just this past for the display too. 88 00:07:31,750 --> 00:07:33,310 It would gather display three. 89 00:07:33,520 --> 00:07:37,660 We can just give it the font size of four them. 90 00:07:38,500 --> 00:07:42,850 They will be all changing when we go to the one to zero zero. 91 00:07:46,030 --> 00:07:46,810 Not yet. 92 00:07:48,010 --> 00:07:49,760 Not that we will inspect. 93 00:07:49,840 --> 00:07:57,010 So now we've got this perfect and after this part, we can close the screen again and up and inspect, 94 00:08:02,230 --> 00:08:07,320 you will not find any screen that is having that one five zero pixels. 95 00:08:07,690 --> 00:08:11,680 So this actually scrolling will be making no problem. 96 00:08:12,550 --> 00:08:20,860 And then after display this to be three activities like three, we can apply the same spot for the display 97 00:08:21,100 --> 00:08:30,700 for we can just copy this place three based again, if to be for and for the calculation. 98 00:08:30,940 --> 00:08:42,730 We can just set this one to be four one four point seven five plus two point seven W and the same font 99 00:08:42,730 --> 00:08:43,090 weight. 100 00:08:43,570 --> 00:08:47,260 We can go here, copy this part. 101 00:08:48,580 --> 00:08:50,510 Pasted this before. 102 00:08:52,870 --> 00:08:53,880 OK, that's good. 103 00:08:54,310 --> 00:09:00,790 And now we can apply for the display five or the media acquired first. 104 00:09:03,070 --> 00:09:04,670 We can copy this one here. 105 00:09:04,720 --> 00:09:14,080 There's to be four and concerning the font size we can make it to three point five are M and then we 106 00:09:14,080 --> 00:09:17,140 can apply for the display five. 107 00:09:18,910 --> 00:09:20,320 Display five. 108 00:09:23,480 --> 00:09:34,160 OK, and here we can make this to be two and this one to be two point one, and after this part, me 109 00:09:34,160 --> 00:09:34,920 give me the phone. 110 00:09:34,970 --> 00:09:36,380 One of the hundred. 111 00:09:37,630 --> 00:09:42,880 We can go now to the media inquiry and make it font size of we are about. 112 00:09:45,600 --> 00:09:50,260 We can now go to the part and test this one here. 113 00:09:50,280 --> 00:09:53,810 We need this Angad bracket and this to be five. 114 00:09:54,420 --> 00:09:56,880 We can now go and reload the page. 115 00:09:57,540 --> 00:09:59,880 So now we got the display five. 116 00:10:00,210 --> 00:10:03,870 The last one we can do for the display is the display. 117 00:10:04,830 --> 00:10:05,660 This to be five. 118 00:10:06,750 --> 00:10:13,860 We can go to the top, copied this part and pasted this to be six. 119 00:10:14,160 --> 00:10:23,270 And for the six, we can just make it one, two, three, seven, five plus one point. 120 00:10:23,940 --> 00:10:25,800 Just ok, ok. 121 00:10:26,190 --> 00:10:28,090 I think we can make it something different. 122 00:10:28,920 --> 00:10:31,240 No, let's make it one point five. 123 00:10:34,950 --> 00:10:43,010 OK, we just need to make the major query copy this part here with to be displayed six. 124 00:10:44,610 --> 00:10:56,220 OK, and then we can make this to be for two point five, go to the temple out and copy this part pasted 125 00:10:56,370 --> 00:10:56,920 here. 126 00:10:56,940 --> 00:10:57,990 This to be six. 127 00:11:00,570 --> 00:11:03,780 So now we got the display six and this is perfect. 128 00:11:04,140 --> 00:11:08,550 And after this part we can work on the etch one. 129 00:11:08,920 --> 00:11:10,410 We can go here. 130 00:11:12,630 --> 00:11:13,770 Do we have X one here? 131 00:11:13,990 --> 00:11:14,970 Yes, we have. 132 00:11:15,450 --> 00:11:16,140 It's OK. 133 00:11:16,140 --> 00:11:17,820 We can't compete from. 134 00:11:18,330 --> 00:11:19,930 OK, ok, ok, ok. 135 00:11:19,940 --> 00:11:21,300 We can make it something different. 136 00:11:21,720 --> 00:11:27,510 This to for one point five we w I think this would be better. 137 00:11:28,200 --> 00:11:33,840 OK, so now we get this when, when it was four it was bigger. 138 00:11:34,050 --> 00:11:38,490 Let's just make it to one point five and this will be better. 139 00:11:40,020 --> 00:11:45,480 And after this part we can add for the media quirino of each one. 140 00:11:45,480 --> 00:11:50,160 I think we did it so we don't add more after the edge one. 141 00:11:50,340 --> 00:11:53,220 We can apply for the edge too. 142 00:11:53,730 --> 00:11:55,470 We can just go to. 143 00:11:55,500 --> 00:12:06,210 Yes, this is s and add edge to you to to be having the font size of one point three to five. 144 00:12:07,470 --> 00:12:18,810 We forgot the calculation about one point three to five plus O point nine we w. 145 00:12:21,450 --> 00:12:28,380 And then actually this part we would set the media query for the Edge to, we can just cover this part 146 00:12:28,380 --> 00:12:29,850 and go here 147 00:12:32,670 --> 00:12:33,270 and here. 148 00:12:33,560 --> 00:12:38,510 We can set the font size of our and just to up. 149 00:12:39,540 --> 00:12:47,670 And eventually this part, we can go and apply for the edge that we actually need to be having. 150 00:12:47,670 --> 00:12:51,810 The font size of calculation. 151 00:12:54,000 --> 00:12:56,120 One point. 152 00:12:56,190 --> 00:13:06,660 Uh, yes, three are and plus oh point six, we w and then after this part we can set the. 153 00:13:07,230 --> 00:13:08,530 Why are we for this part. 154 00:13:08,970 --> 00:13:09,930 That's three. 155 00:13:10,290 --> 00:13:17,610 We can copy the font size here and this one we can make it to one point seventy five or. 156 00:13:20,170 --> 00:13:24,900 We can start before that. 157 00:13:25,270 --> 00:13:29,790 That's one, that's two and then three, 158 00:13:32,560 --> 00:13:33,230 OK? 159 00:13:33,340 --> 00:13:35,820 I we got the edge two and three. 160 00:13:36,040 --> 00:13:38,170 They are different in the size. 161 00:13:39,580 --> 00:13:51,760 And now we can test for the edge for we can just go to the safest file where we're at four to be having 162 00:13:51,760 --> 00:13:58,510 the phone the size of one point two seven five. 163 00:13:59,320 --> 00:14:13,510 The calculation of game one point two seven five plus the O point three W we can copy a spark or we 164 00:14:13,510 --> 00:14:23,030 can just copy from here, copy this to be four and this one we can just set it to one point five are. 165 00:14:23,050 --> 00:14:23,410 Yeah. 166 00:14:23,980 --> 00:14:30,520 Let's test for the four, we can cover the spark and go there again. 167 00:14:30,880 --> 00:14:35,860 This be it's four and then we can go to the web page and see what we did. 168 00:14:37,450 --> 00:14:40,810 OK, so it's four, let's make four. 169 00:14:40,900 --> 00:14:45,310 That's five and the six for the edge. 170 00:14:45,310 --> 00:14:46,890 Five and six. 171 00:14:47,320 --> 00:14:51,010 We can make it to here. 172 00:14:52,630 --> 00:14:53,500 That's five. 173 00:14:54,100 --> 00:14:58,870 This to be having the font size of one point two, five 174 00:15:02,050 --> 00:15:06,970 and six to be having the font size of uh. 175 00:15:08,260 --> 00:15:10,450 One hour again, OK, that's good. 176 00:15:11,710 --> 00:15:19,360 I don't think we need to add media coverage for the next five and six, we can just test again now because 177 00:15:19,990 --> 00:15:29,800 they are very small to be quoted for the response side and here to be five and six. 178 00:15:31,480 --> 00:15:32,710 They are very small. 179 00:15:33,370 --> 00:15:35,230 OK, and that's good. 180 00:15:37,180 --> 00:15:41,790 After this part, we can try to add something for the paragraph. 181 00:15:42,100 --> 00:15:53,740 We can go here at P rather than large on top of zero and and put one out of them because we will need 182 00:15:53,740 --> 00:15:53,980 it. 183 00:15:54,940 --> 00:16:03,820 And then after this part we can actually add another class classes, which is called F s f f f meaning 184 00:16:03,820 --> 00:16:17,560 the font size here we can make up that we want this to be having the font size of Calc one point three 185 00:16:17,560 --> 00:16:23,770 seven five RTM plus one point five the W. 186 00:16:25,180 --> 00:16:36,580 We can just go to this part and be with class of one and we can copy this text we have here EFS one, 187 00:16:36,580 --> 00:16:38,440 two, three, four and five. 188 00:16:38,860 --> 00:16:40,300 We can copy this part. 189 00:16:41,210 --> 00:16:54,940 Could be four, two, three, four, five, and then we can go to the style. 190 00:16:55,560 --> 00:17:00,820 S an example here we have the F. 191 00:17:00,850 --> 00:17:06,100 S one after the first one we can try for the first two. 192 00:17:09,180 --> 00:17:18,420 We can cover this part and then based this to be having one point three to five plus all point nine, 193 00:17:18,450 --> 00:17:23,990 we w we can save and go back to our Parousia. 194 00:17:25,230 --> 00:17:27,480 This is the second one. 195 00:17:27,660 --> 00:17:30,930 And after this part, we can try for no start. 196 00:17:30,930 --> 00:17:33,370 But there's something wrong with us too. 197 00:17:33,900 --> 00:17:35,410 So this is the second one. 198 00:17:35,790 --> 00:17:37,890 Now we can try for the F. 199 00:17:37,890 --> 00:17:39,030 S. three 200 00:17:42,810 --> 00:17:52,160 and here we can set up three to be having the calculation of one point three RTM plus all point six. 201 00:17:52,500 --> 00:18:01,650 We w we can go back to our web browser, this one, OK, and now we can make for the F. 202 00:18:01,650 --> 00:18:11,060 S four, we can copy this part and then paste this before and for the calculation we can set here at 203 00:18:11,070 --> 00:18:16,110 one point two seven five plus O point three. 204 00:18:16,260 --> 00:18:21,470 Are we w we can go back to the Web browser and see what we have right now. 205 00:18:23,140 --> 00:18:35,520 OK, and the last one will be for the F F five, and now we can just copy and paste this one to be five 206 00:18:37,090 --> 00:18:43,380 and instead of calculation with it calculation, it will be very small font size. 207 00:18:43,810 --> 00:18:51,820 We can just make it to one point, one point to five, Artan, and then we can make for the phone by 208 00:18:52,150 --> 00:18:57,700 the three of six, which will be just one hour each time. 209 00:18:59,890 --> 00:19:09,670 And eventually the closest we can add for the lead class, we can make leap to be having the font size 210 00:19:09,820 --> 00:19:13,060 of one point two five are in them. 211 00:19:13,780 --> 00:19:19,230 And then after this part we can get within the width font weight of three hundred. 212 00:19:20,410 --> 00:19:24,430 And now this could add to this part what we can do. 213 00:19:24,460 --> 00:19:30,280 We can up and this choose first the line items or great. 214 00:19:30,640 --> 00:19:41,970 First we can copy all what's inside and pasted where here we can pasted the game paste. 215 00:19:42,580 --> 00:19:45,490 We don't need the margin job and we don't need all that. 216 00:19:45,490 --> 00:19:50,680 We can add some space here to separate between then and then. 217 00:19:50,680 --> 00:19:57,000 Now we knew we don't need the margin put in and we also need the background colors. 218 00:19:58,450 --> 00:19:59,260 OK, that's good. 219 00:19:59,260 --> 00:20:02,290 We can save it, ok. 220 00:20:04,050 --> 00:20:04,590 Good. 221 00:20:06,400 --> 00:20:18,880 And here we can we can just add a container to be having left and left, one point three are empty and 222 00:20:18,880 --> 00:20:20,610 also pending right off. 223 00:20:20,860 --> 00:20:22,200 One more point. 224 00:20:22,300 --> 00:20:23,290 So we are RTM. 225 00:20:23,500 --> 00:20:24,280 We will need it. 226 00:20:24,940 --> 00:20:28,310 And now we can go to the green dot. 227 00:20:28,470 --> 00:20:32,680 You know, we already get it for the allied items. 228 00:20:33,730 --> 00:20:38,170 We can just copy what we want and delete what we don't want. 229 00:20:38,440 --> 00:20:48,010 We can copy this part, go back to the title boxes and placed it after the great system. 230 00:20:49,880 --> 00:20:50,330 Here. 231 00:20:52,300 --> 00:20:54,880 We don't need a so we can delete it. 232 00:21:01,570 --> 00:21:02,530 OK, that's good. 233 00:21:02,800 --> 00:21:10,030 And now we can make for the justified content, we can just keep what they want and delete what we don't 234 00:21:10,030 --> 00:21:12,580 want, we can't start from here. 235 00:21:14,230 --> 00:21:15,490 OK, that's good. 236 00:21:17,110 --> 00:21:24,750 And they have to part and now we can apply for we get food. 237 00:21:24,760 --> 00:21:27,860 I like items, grid system and justify content. 238 00:21:28,270 --> 00:21:28,980 Where is the war. 239 00:21:29,200 --> 00:21:29,560 OK. 240 00:21:29,830 --> 00:21:30,400 It's OK. 241 00:21:31,440 --> 00:21:34,350 And now what about now? 242 00:21:34,380 --> 00:21:35,090 OK. 243 00:21:39,930 --> 00:21:44,640 Yes, let's test let's make sure that everything is OK. 244 00:21:45,570 --> 00:21:47,430 Yes, I think we got the problem now. 245 00:21:53,340 --> 00:21:55,160 OK, OK. 246 00:22:03,140 --> 00:22:04,150 OK, that's good. 247 00:22:04,160 --> 00:22:10,940 Now from the next video, we will start cutting our project for this is actually I have some estimate 248 00:22:11,180 --> 00:22:17,690 we will add the home page, which is shown in the demo screen right here. 249 00:22:20,250 --> 00:22:24,650 We can go to Web business this month or demo, I think. 250 00:22:26,310 --> 00:22:26,970 Yes. 251 00:22:28,650 --> 00:22:29,760 Where is the index? 252 00:22:29,790 --> 00:22:41,070 This one here, this is the home page that inspiration came from Bootstrap made dotcom and the responsive 253 00:22:41,070 --> 00:22:44,340 design here of the font size are from bootstrap. 254 00:22:44,850 --> 00:22:47,630 So good luck and have fun.