1 00:00:00,980 --> 00:00:01,610 ‫Hey, there. 2 00:00:01,700 --> 00:00:02,420 ‫Welcome back. 3 00:00:02,810 --> 00:00:05,300 ‫Now let us start our journey with the four top by. 4 00:00:06,900 --> 00:00:09,450 ‫Currently, we are walking inside our mine. 5 00:00:09,780 --> 00:00:12,510 ‫Now let's get out of army and stock with for that. 6 00:00:13,110 --> 00:00:18,570 ‫So let me just create a photo and inside this, we are going to create everything that we want. 7 00:00:19,110 --> 00:00:23,490 ‫Now first thing is, which is a clear example of Flexbox. 8 00:00:23,970 --> 00:00:31,380 ‫So what I'm going to do is I'm going to divide this one item and this whole item into a Flexbox simple 9 00:00:31,380 --> 00:00:31,690 ‫thing. 10 00:00:31,710 --> 00:00:37,770 ‫What I'm going to do is I'm going to create a div here, and let's call this ask. 11 00:00:38,430 --> 00:00:46,140 ‫I'm going to give it a Class B flex and everything we will do inside this will already Flexbox property. 12 00:00:46,920 --> 00:00:52,230 ‫The first thing we are going to do is just simply add up the dock and cause the name which is going 13 00:00:52,230 --> 00:00:52,620 ‫to be show. 14 00:00:52,670 --> 00:00:53,070 ‫I'm showing. 15 00:00:54,120 --> 00:00:55,200 ‫Now in this case. 16 00:00:55,650 --> 00:00:56,970 ‫This is the first part. 17 00:00:57,090 --> 00:01:01,830 ‫The second part is going to be another div, which is going to have both these item. 18 00:01:02,850 --> 00:01:05,720 ‫So what I'm going to do is I'm going to create another name. 19 00:01:06,060 --> 00:01:09,870 ‫Now this step will be treated as a child or this flexbox. 20 00:01:10,230 --> 00:01:11,490 ‫OK, sounds great. 21 00:01:11,760 --> 00:01:13,650 ‫And I hope you got the basic idea. 22 00:01:13,920 --> 00:01:20,020 ‫If I jump back here, this is the current structure now have one important thing. 23 00:01:20,040 --> 00:01:21,590 ‫We are out of our mean. 24 00:01:21,600 --> 00:01:26,370 ‫That means this container property will not be applied to our footer. 25 00:01:27,090 --> 00:01:32,280 ‫And this is great thing because we now need to add background going to talk about that. 26 00:01:32,640 --> 00:01:36,840 ‫So if I go with class background, maybe you like here. 27 00:01:39,730 --> 00:01:44,610 ‫I will have a background color that is applicable 100 percent it. 28 00:01:45,100 --> 00:01:50,530 ‫And then what I can do is I can create a container inside this, I can see container. 29 00:01:51,460 --> 00:01:57,640 ‫So this is going to follow the property off container that has all the content will follow the property 30 00:01:57,640 --> 00:02:04,630 ‫of container, but the photo by the main photo tag is not following that and which is great because 31 00:02:04,630 --> 00:02:07,370 ‫we need big light to be 100 percent off of it. 32 00:02:08,740 --> 00:02:14,500 ‫This looks great and we have our first text, but the next thing I need to add is I need to add some 33 00:02:14,500 --> 00:02:17,500 ‫type of padding so we can have some space up and down. 34 00:02:18,580 --> 00:02:19,210 ‫Let's say. 35 00:02:19,790 --> 00:02:22,070 ‫Don't let me go in for. 36 00:02:22,570 --> 00:02:25,780 ‫And the other thing is fighting boredom and I'm going to go over to. 37 00:02:27,730 --> 00:02:28,900 ‫Looks fine to me. 38 00:02:29,530 --> 00:02:36,100 ‫The next stock walk with the other, do so ahead, I'm going to go inside this and here I will have 39 00:02:36,340 --> 00:02:37,240 ‫all the content. 40 00:02:37,630 --> 00:02:43,560 ‫So the first content will be about my world dog, which is going to have three allies. 41 00:02:44,270 --> 00:02:45,850 ‫I will have my home. 42 00:02:46,090 --> 00:02:52,630 ‫Then I'm going to have my project sections and then I will have my loved. 43 00:02:54,030 --> 00:02:56,490 ‫This is going to be the first child of this death. 44 00:02:56,940 --> 00:03:02,070 ‫And then I'm going to have this part, which is going to be my socialite once. 45 00:03:03,270 --> 00:03:10,240 ‫And this is going to be the second time if I get back here, OK, this is a list now, so I need to 46 00:03:10,240 --> 00:03:11,490 ‫utilize a class here. 47 00:03:12,570 --> 00:03:16,890 ‫The first thing is I'm going to go with Flex because I need them in a row. 48 00:03:17,460 --> 00:03:23,940 ‫And the second thing is, I need the list on a style, so I'm going to go and list on stage. 49 00:03:26,380 --> 00:03:27,290 ‫Save this one. 50 00:03:27,340 --> 00:03:33,100 ‫Get back here, you can see how this is going to follow something similar, but remember I warned them 51 00:03:33,100 --> 00:03:33,940 ‫enough in the room. 52 00:03:33,970 --> 00:03:36,400 ‫I want them to be apart from each other. 53 00:03:37,120 --> 00:03:40,170 ‫So at this point of time, this whole day is a child. 54 00:03:40,240 --> 00:03:43,840 ‫So that means this is a childish Obama charade. 55 00:03:43,840 --> 00:03:50,680 ‫I hear this text is one joke and then this whole Dave is another child for my Flexbox. 56 00:03:51,190 --> 00:03:56,890 ‫What I can do is I can convert this whole debate into a Flexbox citizen and then I can provide another 57 00:03:56,890 --> 00:03:57,490 ‫property. 58 00:03:57,580 --> 00:04:04,430 ‫So let's say last year and said enough, let's save this one. 59 00:04:04,450 --> 00:04:05,170 ‫Get back here. 60 00:04:05,500 --> 00:04:10,900 ‫OK, so this is one Flexbox and this is another Flexbox day here. 61 00:04:11,260 --> 00:04:11,950 ‫Looks great. 62 00:04:13,080 --> 00:04:15,240 ‫Click on Inspect and scroll down. 63 00:04:17,160 --> 00:04:23,730 ‫And if you observe this, this is our next property, child one and then child two, great. 64 00:04:24,330 --> 00:04:31,950 ‫Now one thing I need to do is to this child, I can provide a property of flex grow if I jump here. 65 00:04:32,820 --> 00:04:34,050 ‫This is my mean there. 66 00:04:34,500 --> 00:04:36,240 ‫And if I say Flex grow. 67 00:04:38,320 --> 00:04:41,770 ‫That means all the remaining space will be provided to this child. 68 00:04:41,840 --> 00:04:43,000 ‫And again, back here. 69 00:04:44,450 --> 00:04:50,390 ‫If you observe this, you have this trial now, have all the space, all the remaining space. 70 00:04:50,840 --> 00:04:54,650 ‫Now I can provide justify it between. 71 00:04:54,830 --> 00:04:58,220 ‫That will help us to have all the free space in between them. 72 00:04:58,940 --> 00:05:02,030 ‫So these are the two child and I can see. 73 00:05:03,890 --> 00:05:06,320 ‫Justify content. 74 00:05:08,150 --> 00:05:10,310 ‫And if I save this one, get back here. 75 00:05:11,640 --> 00:05:14,610 ‫Look, now you can see they are miles apart. 76 00:05:15,030 --> 00:05:15,820 ‫This is great. 77 00:05:15,840 --> 00:05:16,950 ‫That's the first step. 78 00:05:17,850 --> 00:05:24,090 ‫Now let's do a quick change with our phone, so and I can see glass and I can provide a property all 79 00:05:24,090 --> 00:05:25,950 ‫foreign size, I guess. 80 00:05:26,940 --> 00:05:30,030 ‫And then phoned me as border. 81 00:05:31,650 --> 00:05:32,440 ‫Save this one. 82 00:05:32,460 --> 00:05:33,210 ‫Get back here. 83 00:05:33,510 --> 00:05:34,470 ‫OK, looks great. 84 00:05:34,500 --> 00:05:37,800 ‫This is great, but we need to center both of them. 85 00:05:38,760 --> 00:05:42,090 ‫What I can do is I can add property off line items. 86 00:05:43,440 --> 00:05:54,820 ‫I I don't think that saved this one in my here looks good and S.A. now the only thing remaining is spacing 87 00:05:54,820 --> 00:05:57,880 ‫between them and that we can do it with the help of padding. 88 00:05:58,360 --> 00:06:03,960 ‫So I just need to add this whole class thing, which is on their horizontal. 89 00:06:03,970 --> 00:06:07,040 ‫I cannot padding to save this one. 90 00:06:07,070 --> 00:06:09,280 ‫Get back here much better. 91 00:06:09,460 --> 00:06:11,170 ‫I can add some more space here. 92 00:06:11,170 --> 00:06:16,000 ‫But if you observe much better, yeah, this fix does different. 93 00:06:16,180 --> 00:06:17,470 ‫Don't try to compare them. 94 00:06:17,470 --> 00:06:21,420 ‫You can add more text as you want, but this part is OK. 95 00:06:23,050 --> 00:06:24,550 ‫Let me try to increase this. 96 00:06:24,550 --> 00:06:26,260 ‫Let me try to increase this part. 97 00:06:26,710 --> 00:06:31,060 ‫So what I can do is I can either convert this one the first one to three. 98 00:06:32,480 --> 00:06:33,230 ‫Get back here. 99 00:06:34,280 --> 00:06:35,060 ‫Okay. 100 00:06:35,090 --> 00:06:41,240 ‫I am currently utilizing both horizontal and vertical to what I can say is that it's going to be my 101 00:06:41,240 --> 00:06:46,100 ‫left side and I see three here, three or maybe four here. 102 00:06:46,430 --> 00:06:49,190 ‫Then on the left side, we are going to have four on the right side. 103 00:06:49,200 --> 00:06:54,110 ‫We are going to be inside then p e two. 104 00:06:55,110 --> 00:06:58,980 ‫So on the left side, we are going to have war on the right side, we are going to have to. 105 00:06:59,250 --> 00:07:03,060 ‫And here on both of the side, we are going to have to OK, looks great. 106 00:07:04,050 --> 00:07:04,890 ‫Need and clean. 107 00:07:07,690 --> 00:07:12,150 ‫And the other thing is, the next is different, as with the blogs. 108 00:07:13,180 --> 00:07:14,550 ‫Fine, fine, fine, fine. 109 00:07:14,560 --> 00:07:15,280 ‫You are doing well. 110 00:07:16,060 --> 00:07:17,800 ‫And here we have our spacing. 111 00:07:18,430 --> 00:07:20,600 ‫So that's all for this whole part. 112 00:07:20,620 --> 00:07:25,360 ‫Now we have a proper homepage on our own portfolio. 113 00:07:25,810 --> 00:07:27,580 ‫There are few things that we need to change. 114 00:07:27,880 --> 00:07:34,330 ‫The first thing is I need to add something here so I can go onto this contact part. 115 00:07:34,820 --> 00:07:39,070 ‫What I can do is I can attach it with the idea. 116 00:07:39,460 --> 00:07:43,330 ‫That means whenever someone is going to click on this button, which is going to be. 117 00:07:44,610 --> 00:07:50,310 ‫Contact with me, I need to IRA expert, but whenever someone is going to click on this button, we 118 00:07:50,310 --> 00:07:54,180 ‫can move them towards this idea, which is going to be contact. 119 00:07:55,050 --> 00:07:59,850 ‫I need to add here so I can say I need to contact. 120 00:08:01,690 --> 00:08:08,540 ‫And then I garnered a traveling show there with my tag, I can mention when I wonder why I want to go 121 00:08:08,550 --> 00:08:08,830 ‫over it. 122 00:08:09,340 --> 00:08:10,360 ‫Contact Heidi. 123 00:08:10,690 --> 00:08:11,770 ‫OK, looks good. 124 00:08:12,640 --> 00:08:16,640 ‫Let's take this one out there and see it back here. 125 00:08:16,760 --> 00:08:17,860 ‫Refresh our page. 126 00:08:18,010 --> 00:08:18,760 ‫Scroll up. 127 00:08:19,120 --> 00:08:20,470 ‫Click on Contact with me. 128 00:08:20,830 --> 00:08:22,240 ‫OK, it's working fine. 129 00:08:23,470 --> 00:08:24,000 ‫It looks good. 130 00:08:24,010 --> 00:08:25,330 ‫I hope you got the idea. 131 00:08:25,810 --> 00:08:29,080 ‫One other thing we need to do is we need to add links to them. 132 00:08:30,110 --> 00:08:30,440 ‫Yup. 133 00:08:30,800 --> 00:08:32,420 ‫And there's also. 134 00:08:33,730 --> 00:08:34,720 ‫These are working right. 135 00:08:35,320 --> 00:08:36,380 ‫We have attached to them. 136 00:08:36,940 --> 00:08:39,730 ‫We haven't attached to this, we haven't attached to this. 137 00:08:40,120 --> 00:08:46,300 ‫So it's a simple thing I can do is I can just add a traveling to all of them and make sure to keep track 138 00:08:46,300 --> 00:08:47,260 ‫of target. 139 00:08:47,710 --> 00:08:50,920 ‫What I mean by this ahead of me and it's grappling first. 140 00:08:51,790 --> 00:08:54,190 ‫Dig this a big secret here. 141 00:08:55,690 --> 00:08:58,480 ‫And then this is going to be on project page. 142 00:08:59,690 --> 00:09:03,740 ‫China looks quite something similar, I need you to read it back here. 143 00:09:06,560 --> 00:09:09,500 ‫And this time this is going to be on block page. 144 00:09:09,710 --> 00:09:14,570 ‫So I have my link here and remember to copy the target as well. 145 00:09:17,430 --> 00:09:18,090 ‫Looks good. 146 00:09:19,210 --> 00:09:20,110 ‫Save this one. 147 00:09:21,190 --> 00:09:23,020 ‫I know I scroll down a bit. 148 00:09:23,830 --> 00:09:25,720 ‫I need your energy links to them. 149 00:09:26,470 --> 00:09:28,090 ‫So this is going to be simple. 150 00:09:28,690 --> 00:09:31,450 ‫You want me to show each step individually. 151 00:09:31,900 --> 00:09:32,470 ‫OK? 152 00:09:33,100 --> 00:09:38,230 ‫What I'm going to do is I'm going to just attach a link here so I can. 153 00:09:40,620 --> 00:09:43,410 ‫And a link to them individually. 154 00:09:45,740 --> 00:09:50,870 ‫At some blinking thing, I'm just adding a link to them, so let me try to fast forward this. 155 00:10:05,260 --> 00:10:08,590 ‫Now, links are nice to this whole thing, which jazz. 156 00:10:10,190 --> 00:10:10,970 ‫Despite. 157 00:10:12,520 --> 00:10:18,400 ‫What I'm going to do is I'm going to copy paste this because this is exactly the same that we have currently 158 00:10:18,400 --> 00:10:21,300 ‫have enough water, so I'm going to copy paste to. 159 00:10:23,980 --> 00:10:25,120 ‫That is done. 160 00:10:25,300 --> 00:10:27,160 ‫The other thing remaining is this spot. 161 00:10:28,400 --> 00:10:30,060 ‫I simply need to attach links there. 162 00:10:30,080 --> 00:10:32,360 ‫Again, I'm going to do some fast forwarding here. 163 00:10:32,780 --> 00:10:39,590 ‫This is going to take a ton of time on this or I'm going to do is I'm going to and I just have to keep 164 00:10:39,590 --> 00:10:40,850 ‫my home inside. 165 00:10:54,510 --> 00:10:57,720 ‫OK, that's done, so we have attached links to all of them. 166 00:10:58,440 --> 00:11:00,930 ‫Now one thing you can see is ex decoration. 167 00:11:03,270 --> 00:11:11,190 ‫So if you have observed me, I directly are this on my style nauseous and I can maintain our next decoration 168 00:11:11,190 --> 00:11:17,160 ‫as non prop. I maintain this property, or I should say, just copy paste this on all of my projects. 169 00:11:17,700 --> 00:11:21,630 ‫And the other thing is, I'm going to change the color, which is going to be black. 170 00:11:21,820 --> 00:11:24,060 ‫So this is going to be black. 171 00:11:25,870 --> 00:11:33,130 ‫Again, I'm going to add a property for Howard, because again, these icons are, I should say, the 172 00:11:33,130 --> 00:11:34,840 ‫links have somehow our property. 173 00:11:35,470 --> 00:11:37,060 ‫You can see, I don't want that. 174 00:11:37,060 --> 00:11:37,940 ‫I don't want this. 175 00:11:37,960 --> 00:11:45,420 ‫What I can do is I cannot have our property here, but I should say how I it back and I can just hold 176 00:11:45,490 --> 00:11:46,030 ‫the color. 177 00:11:47,180 --> 00:11:48,410 ‫That is going to be black. 178 00:11:48,890 --> 00:11:51,170 ‫And if I save this one in back here. 179 00:11:53,890 --> 00:11:59,770 ‫Things are fine, and if you observe we are doing pretty well now, there is some pacing issue. 180 00:11:59,920 --> 00:12:00,260 ‫OK. 181 00:12:00,280 --> 00:12:04,570 ‫This is a show on emotion, but everything is working fine here. 182 00:12:05,170 --> 00:12:06,760 ‫I hope you got the idea. 183 00:12:07,180 --> 00:12:08,630 ‫One thing I need good news. 184 00:12:08,650 --> 00:12:14,230 ‫Maybe if I right click on Inspect, try to get on the sidebar. 185 00:12:15,530 --> 00:12:19,760 ‫And if I observe things are working fine, but this is not that center. 186 00:12:20,180 --> 00:12:24,440 ‫So remember big center, we can use it, scroll up. 187 00:12:25,220 --> 00:12:34,040 ‫And if you observe this is my text or I can just add it here and text center saved this one, get back 188 00:12:34,040 --> 00:12:34,370 ‫here. 189 00:12:35,180 --> 00:12:36,380 ‫OK, this is great. 190 00:12:37,530 --> 00:12:42,510 ‫Scrawled on no walking, fine scrawled on it, working fine. 191 00:12:43,380 --> 00:12:44,910 ‫And this is working fine. 192 00:12:45,090 --> 00:12:48,540 ‫Everything looks great, but I might try to squeeze this more. 193 00:12:49,760 --> 00:12:57,140 ‫OK, things are getting no, they are the reason we are utilizing Flexbox and Flexbox as a default property 194 00:12:57,140 --> 00:12:57,980 ‫of no doubt. 195 00:12:58,550 --> 00:13:02,780 ‫So what I can do is I can change the property with this David self. 196 00:13:03,050 --> 00:13:06,320 ‫That means this part, this park itself. 197 00:13:07,460 --> 00:13:11,330 ‫If I try to hover over this, right click click on Inspect. 198 00:13:14,430 --> 00:13:20,760 ‫With this past weekend, our property, and again, with this part, we cannot drop property, so all 199 00:13:20,760 --> 00:13:22,910 ‫you have to do is just jump on to the Duke. 200 00:13:24,030 --> 00:13:28,080 ‫This is going to be the for death, which is going to be flex drop. 201 00:13:28,710 --> 00:13:32,750 ‫And then this is going to be secondary, which is where we flex up. 202 00:13:33,180 --> 00:13:36,390 ‫And if I save this one, get back here now. 203 00:13:36,390 --> 00:13:40,110 ‫If I try to squeeze, you can see this is on the second line. 204 00:13:40,740 --> 00:13:43,350 ‫But things are looking fine now. 205 00:13:45,510 --> 00:13:51,780 ‫Now, one problem I see is this whole thing, this spacing thing that you observe here. 206 00:13:52,800 --> 00:14:00,000 ‫We have added this padding, which was working well when we were using maybe 900 pixel screen, but 207 00:14:00,000 --> 00:14:01,050 ‫now this looks bad. 208 00:14:02,410 --> 00:14:06,850 ‫What we can do is we can add spacing after our name. 209 00:14:07,540 --> 00:14:09,310 ‫That would be much better, actually. 210 00:14:10,970 --> 00:14:18,440 ‫So I can jump here and here I can remove spacing from X, which is home. 211 00:14:19,040 --> 00:14:20,480 ‫I can remove from hair. 212 00:14:22,580 --> 00:14:28,970 ‫And I can add it here, but this is going to be right side, which is end and then save or save this 213 00:14:28,970 --> 00:14:29,900 ‫one, get back here. 214 00:14:30,660 --> 00:14:32,240 ‫OK, looks fine. 215 00:14:32,390 --> 00:14:33,950 ‫Looks fine now. 216 00:14:34,310 --> 00:14:35,030 ‫Looks fine. 217 00:14:36,650 --> 00:14:37,730 ‫OK, great. 218 00:14:37,790 --> 00:14:38,510 ‫That's done. 219 00:14:39,110 --> 00:14:42,200 ‫Our website is responsive, all the links are connected. 220 00:14:42,470 --> 00:14:44,960 ‫And thanks to bootstrap, it was pretty quick. 221 00:14:45,380 --> 00:14:47,950 ‫I was this was a criteria, so we took some time. 222 00:14:47,960 --> 00:14:49,610 ‫We tried to experiment things. 223 00:14:50,000 --> 00:14:52,100 ‫But now you can say it's working fine. 224 00:14:52,730 --> 00:14:59,510 ‫And remember, we are using V800, which is going to be viewed sites if you scroll down. 225 00:15:00,560 --> 00:15:07,430 ‫So if you see this as pretty big, it's because we are using V800 now only V800 is defined. 226 00:15:07,640 --> 00:15:13,820 ‫But if you try to use V70, nothing is going to happen because we it certainly doesn't exist. 227 00:15:13,820 --> 00:15:16,850 ‫So it is going to take on the space that is available. 228 00:15:17,570 --> 00:15:20,450 ‫There is nothing like Rich Dan or we are 70. 229 00:15:21,770 --> 00:15:23,750 ‫We only have reached 100. 230 00:15:24,790 --> 00:15:31,570 ‫Now, if you want your own screen size, basically what you can do is you can create your own screen 231 00:15:31,570 --> 00:15:33,610 ‫size and your style or cast. 232 00:15:34,270 --> 00:15:36,680 ‫Now we haven't wrote much of our success here. 233 00:15:36,730 --> 00:15:38,910 ‫We just had one two three four. 234 00:15:39,400 --> 00:15:42,520 ‫These 14 years only looks good to me. 235 00:15:42,670 --> 00:15:43,660 ‫Everything is done. 236 00:15:43,690 --> 00:15:50,260 ‫Now what we are going to do is we are going to work on this project section on navigation bodies already 237 00:15:50,260 --> 00:15:52,970 ‫done after the part is already done. 238 00:15:53,050 --> 00:15:55,030 ‫We just need to create some cards. 239 00:15:55,030 --> 00:15:56,890 ‫And Aditya, that's it. 240 00:15:57,580 --> 00:15:58,810 ‫So looks good. 241 00:15:59,350 --> 00:16:02,170 ‫Let's catch up and the next one and give her a following. 242 00:16:02,200 --> 00:16:03,580 ‫I hope this was helpful.