1 00:00:01,390 --> 00:00:01,930 ‫Hey, there. 2 00:00:02,050 --> 00:00:08,170 ‫Welcome back, Siobhan Desired, and welcome to our project session in which we are going to build a 3 00:00:08,170 --> 00:00:14,620 ‫fresh new project when the concept that we have learned and now also by learning some new concepts. 4 00:00:15,070 --> 00:00:20,680 ‫So then now we have been discussing about forms we have been discussing about display position. 5 00:00:21,040 --> 00:00:26,830 ‫Then there are several theses properties now the right time for us to implement all of them. 6 00:00:27,160 --> 00:00:32,710 ‫Also, we'll be discussing about tons of new ones in terms of form transformation. 7 00:00:33,010 --> 00:00:37,120 ‫And then there will be icons, extension and a lot of that stuff. 8 00:00:37,510 --> 00:00:43,600 ‫So this project will not only help you to revise or, I should say, implement the old concept, but 9 00:00:43,600 --> 00:00:47,620 ‫also help you to understand new concepts that will help you to build your profile. 10 00:00:48,370 --> 00:00:54,490 ‫The first thing I want to discuss about how to get inspiration towards different project and also what 11 00:00:54,490 --> 00:00:55,360 ‫you are going to be. 12 00:00:55,780 --> 00:01:02,770 ‫So let me jump onto the correct example here we are going to build this profile card, and I hope this 13 00:01:02,770 --> 00:01:03,340 ‫looks good. 14 00:01:03,820 --> 00:01:10,030 ‫We have our profile image and then here we have some message regarding if a user is normal or pro, 15 00:01:10,480 --> 00:01:17,020 ‫then we have information about country name as well as my dick stack or development stack or something 16 00:01:17,020 --> 00:01:20,800 ‫else that you want and a button regarding message following. 17 00:01:21,100 --> 00:01:26,410 ‫Then we have certain icons regarding our social media and then we have our skillset. 18 00:01:26,860 --> 00:01:34,030 ‫So we haven't done this blank sheet into this and how I get these designed. 19 00:01:34,420 --> 00:01:35,920 ‫You can jump on to dribble. 20 00:01:36,010 --> 00:01:41,170 ‫It's a free, open source website that will help you to get inspiration with different design. 21 00:01:41,620 --> 00:01:43,750 ‫Scroll down to see what you want. 22 00:01:43,780 --> 00:01:47,920 ‫Use this search and you will get several ideas about different projects. 23 00:01:48,400 --> 00:01:54,100 ‫Maybe you are building 13 small projects like this, or maybe you want to build a full fledged website 24 00:01:54,100 --> 00:01:54,670 ‫in future. 25 00:01:54,670 --> 00:02:01,540 ‫After completing the course, you can jump on 213 ideas like this, so all you have to do is just see 26 00:02:01,780 --> 00:02:06,180 ‫what inspire you or what you can build as a big NARAL's uproar. 27 00:02:06,970 --> 00:02:13,180 ‫This is one quick website that I strongly suggest anyone who is currently working with HDMI, KSAZ, 28 00:02:13,180 --> 00:02:17,560 ‫Bootstrap or any other frontend web designing overdevelopment site. 29 00:02:17,920 --> 00:02:20,440 ‫So this help you to get certain ideas. 30 00:02:21,190 --> 00:02:24,970 ‫Now head while scrolling and I got this profile. 31 00:02:25,270 --> 00:02:33,790 ‫Got these small elements shout out to the creator with all these open source designs so they are available. 32 00:02:33,820 --> 00:02:41,020 ‫You can see here is a profile card sample background gradient, and it's a decent looking profile card. 33 00:02:42,100 --> 00:02:46,390 ‫Then we have certain other small elements like maybe this the subscribe later. 34 00:02:47,710 --> 00:02:53,920 ‫Or maybe you want to create log in or registration fee, so you will get certain items like this. 35 00:02:55,010 --> 00:03:00,500 ‫So all these small element help you do understand, OK, I can build this how I'm going to do this, 36 00:03:00,510 --> 00:03:01,580 ‫you can plan things. 37 00:03:02,030 --> 00:03:07,090 ‫So this gives you an idea about what type of design you can create now had. 38 00:03:07,100 --> 00:03:08,870 ‫This was the design that I got. 39 00:03:09,230 --> 00:03:12,700 ‫I created this part, then some of my own genius. 40 00:03:12,700 --> 00:03:19,490 ‫So like I added the social media icons and had instead of description, I used my what is the position 41 00:03:19,490 --> 00:03:22,490 ‫of that developer or maybe any other type of profile card? 42 00:03:22,850 --> 00:03:26,060 ‫So I just took an inspiration from this and just created it. 43 00:03:26,990 --> 00:03:30,710 ‫So there are several of their designs that you can utilize on River. 44 00:03:30,860 --> 00:03:37,700 ‫Just such and get certain ideas will be creating a few more projects, maybe log in page registration, 45 00:03:37,700 --> 00:03:41,210 ‫creating in future that will help you to understand more such thing. 46 00:03:42,140 --> 00:03:48,620 ‫I hope this give you an idea from where you can get certain design ideas, maybe for your small project 47 00:03:48,620 --> 00:03:54,890 ‫or big project as a big, not just for your practice, but was OK, let me close this one. 48 00:03:55,880 --> 00:03:57,870 ‫So now this is the idea that we are going to. 49 00:03:59,030 --> 00:04:01,240 ‫Also, you can access this whole design. 50 00:04:01,250 --> 00:04:04,760 ‫I got to my GitHub or you can utilize my code. 51 00:04:04,900 --> 00:04:10,910 ‫And so this is the exact same project I just uploaded on code then, so you can access it easily. 52 00:04:11,570 --> 00:04:17,150 ‫I hope you got the idea link between the resource part, and we will also understand how to create our 53 00:04:17,150 --> 00:04:21,200 ‫code then and just add all these content at the end of this whole project. 54 00:04:21,620 --> 00:04:27,350 ‫So for now, let me get back to this and we want to create something like this as a new project. 55 00:04:28,010 --> 00:04:29,860 ‫So I removed all the previous code. 56 00:04:29,870 --> 00:04:35,990 ‫What I did is just created a blank template, and there are only two things that are included currently, 57 00:04:35,990 --> 00:04:39,320 ‫which is our title submission of profile card. 58 00:04:39,320 --> 00:04:46,130 ‫That said, you can add certain other titles, and then I have included our general fabric on maybe 59 00:04:46,310 --> 00:04:49,580 ‫simple, just a normal icon of our profile. 60 00:04:50,120 --> 00:04:52,550 ‫Now here you can add certain avatars. 61 00:04:52,550 --> 00:04:56,420 ‫Add your own fabric on depends on your customization. 62 00:04:57,050 --> 00:05:03,010 ‫That said again, styled artists, I just created what a box and then does. 63 00:05:03,020 --> 00:05:06,860 ‫One size is 10 pixels, so we can utilize ram pretty easily. 64 00:05:06,860 --> 00:05:08,000 ‫And this whole project? 65 00:05:08,750 --> 00:05:12,380 ‫I hope you got the best idea how we are going to start the project. 66 00:05:12,650 --> 00:05:14,180 ‫That's the first step. 67 00:05:14,450 --> 00:05:16,520 ‫And then we are going to discuss not opting. 68 00:05:17,720 --> 00:05:20,330 ‫So let me get back, and this is our integration. 69 00:05:20,840 --> 00:05:24,080 ‫Now, first thing I need to add is quickly accelerating things. 70 00:05:24,140 --> 00:05:27,410 ‫The first thing is going to be on my background color. 71 00:05:27,740 --> 00:05:34,490 ‫And then I need to, ah, dive section and try to use maybe position to get it at the center. 72 00:05:35,120 --> 00:05:38,000 ‫And then I need to add this content to. 73 00:05:38,000 --> 00:05:41,630 ‫The first thing is how to use the exact background color. 74 00:05:42,050 --> 00:05:43,400 ‫So I have an extension. 75 00:05:43,790 --> 00:05:47,510 ‫It's a simple free chrome extension called color zila. 76 00:05:48,820 --> 00:05:54,940 ‫Now, just add this Chrome extension on your browser now, once you install this, you will have a icon 77 00:05:55,390 --> 00:05:57,640 ‫that will help you to select any type of colour. 78 00:05:57,790 --> 00:06:03,670 ‫So maybe I'm on Amazon right now and I want to know which color is this or this one? 79 00:06:04,060 --> 00:06:06,910 ‫I can just select this and which color I want. 80 00:06:07,000 --> 00:06:08,350 ‫Yes, hover over to this. 81 00:06:08,350 --> 00:06:11,440 ‫Click here and now have access to that information. 82 00:06:11,890 --> 00:06:14,920 ‫So in this way, I can select any type of color I want. 83 00:06:14,950 --> 00:06:17,080 ‫Maybe I wanted this exact background color. 84 00:06:17,500 --> 00:06:18,100 ‫Click here. 85 00:06:18,190 --> 00:06:23,260 ‫Select the background color that maybe I want to know which button color is this. 86 00:06:23,560 --> 00:06:25,630 ‫Click here and then select the button color. 87 00:06:26,230 --> 00:06:28,990 ‫It's a simple chrome extension free to use. 88 00:06:29,440 --> 00:06:36,730 ‫As a developer, you are going to utilize it a lot with HDMI access and even with for the frontend development. 89 00:06:38,020 --> 00:06:41,830 ‫So that's it, that's the whole general discussion required currently. 90 00:06:42,280 --> 00:06:45,430 ‫And let's move forward and start our project now. 91 00:06:45,920 --> 00:06:47,200 ‫Lot of talking to now. 92 00:06:47,200 --> 00:06:51,800 ‫So I'm going to just minimize this part and get into my thesis. 93 00:06:51,820 --> 00:06:54,250 ‫The first thing is I'm going to use my body. 94 00:06:55,820 --> 00:06:58,160 ‫And head, I'm going to utilize background color. 95 00:06:59,510 --> 00:07:03,350 ‫And again, I have already copied the background color so you can utilize it. 96 00:07:04,220 --> 00:07:08,900 ‫And there are certain other things that I will discuss, but let's build fuel tanks, otherwise you 97 00:07:08,900 --> 00:07:13,640 ‫will see, OK, this is too much of a discussion right now, but that's what this project is for. 98 00:07:13,970 --> 00:07:19,550 ‫We are going to discuss new things a lot generally about these Gibbo, these designs. 99 00:07:19,580 --> 00:07:21,250 ‫No one is going to discuss with you. 100 00:07:21,270 --> 00:07:23,870 ‫So that's why I'm focusing on Woodside. 101 00:07:24,740 --> 00:07:25,760 ‫Let me see this one. 102 00:07:25,770 --> 00:07:26,600 ‫Get back here. 103 00:07:27,140 --> 00:07:32,750 ‫OK, now we have our background at least, and then let us talk with other content. 104 00:07:32,770 --> 00:07:37,130 ‫So you have our background feedback head inside our body. 105 00:07:37,170 --> 00:07:38,990 ‫Let us start adding content. 106 00:07:39,410 --> 00:07:45,290 ‫So the first thing I'm going to do is I'm going to create a section so we can add everything inside 107 00:07:45,290 --> 00:07:46,310 ‫this section. 108 00:07:46,610 --> 00:07:52,850 ‫If I jump over so I can create a section and then divide this section into two part using this. 109 00:07:53,300 --> 00:07:59,480 ‫The first part will be about this whole container and the second part will be about this whole scale. 110 00:07:59,600 --> 00:08:06,500 ‫I can call this blog as personal information because it does contain all the personal information and 111 00:08:06,500 --> 00:08:10,280 ‫call this second one as a skill that will be much better. 112 00:08:10,310 --> 00:08:11,540 ‫So let me get back here. 113 00:08:11,720 --> 00:08:14,090 ‫And the first one will be personal. 114 00:08:14,660 --> 00:08:15,290 ‫OK? 115 00:08:15,950 --> 00:08:18,890 ‫And had the second one will whisk is. 116 00:08:20,050 --> 00:08:22,660 ‫There's no fine now inside personal. 117 00:08:23,080 --> 00:08:25,000 ‫We have two important thing. 118 00:08:25,510 --> 00:08:27,490 ‫This is our span. 119 00:08:27,850 --> 00:08:31,840 ‫I guess we can create us on our background and our next as grow. 120 00:08:32,260 --> 00:08:33,790 ‫And then we have our image. 121 00:08:33,880 --> 00:08:34,960 ‫OK, great thing. 122 00:08:35,350 --> 00:08:41,200 ‫So what I'm going to do is I'm going to call this a span and I'm going to call the task group and then 123 00:08:41,200 --> 00:08:42,850 ‫I'm going to add an image. 124 00:08:43,330 --> 00:08:47,050 ‫And I have already image inside my media. 125 00:08:48,930 --> 00:08:51,930 ‫So I'm going to utilize this a major offshore 1.2Gbps. 126 00:08:52,170 --> 00:08:52,500 ‫OK. 127 00:08:52,530 --> 00:08:55,680 ‫Nobody's nowadays you don't need to utilize my image. 128 00:08:56,430 --> 00:08:57,480 ‫So this is the image. 129 00:08:57,480 --> 00:09:04,830 ‫Currently I have added to other images and resource pack, which will be allowed outdoors. 130 00:09:04,980 --> 00:09:08,190 ‫So there will be a factor which will be regarding female authorship. 131 00:09:08,190 --> 00:09:09,110 ‫I saved this one. 132 00:09:09,120 --> 00:09:12,840 ‫Get back up this score and then there will be. 133 00:09:14,050 --> 00:09:16,120 ‫And my staff will be about men. 134 00:09:16,480 --> 00:09:17,080 ‫That's good. 135 00:09:17,560 --> 00:09:20,830 ‫So you can utilize these and start off my image. 136 00:09:21,520 --> 00:09:22,040 ‫That's it. 137 00:09:22,060 --> 00:09:26,410 ‫So this is the first change we created this big part. 138 00:09:28,120 --> 00:09:34,150 ‫Now, let me also add some content here, then we can add sizing and see what we are going to do. 139 00:09:34,180 --> 00:09:40,690 ‫Also, we need to format all this content, though I'm also going to add this fixed as skill inside 140 00:09:40,690 --> 00:09:41,920 ‫our skill section. 141 00:09:45,420 --> 00:09:46,300 ‫Save this one. 142 00:09:46,320 --> 00:09:46,620 ‫OK. 143 00:09:46,650 --> 00:09:47,400 ‫This is fine. 144 00:09:48,030 --> 00:09:49,860 ‫Now we have some small content. 145 00:09:50,070 --> 00:09:58,170 ‫The main thing that I want to do is use the section, change its position, get it at the center. 146 00:09:58,710 --> 00:10:03,120 ‫Also, I want to adjust according to Garp Left right, whatever I want. 147 00:10:03,720 --> 00:10:07,770 ‫Also, I want to have a word and some color behind the scene. 148 00:10:08,250 --> 00:10:09,930 ‫So that's my current aim is. 149 00:10:11,190 --> 00:10:12,810 ‫This is our current situation. 150 00:10:13,230 --> 00:10:18,980 ‫What I'm going to do is get back here, so the first thing I'm going to do is just control the missiles 151 00:10:18,980 --> 00:10:18,990 ‫size. 152 00:10:18,990 --> 00:10:22,680 ‫It's looking pretty back to me, so I'm going to use personal. 153 00:10:24,150 --> 00:10:29,460 ‫And so I guess I'm going to select my I image and just set our world. 154 00:10:30,700 --> 00:10:33,790 ‫Maybe as well then that should be fine. 155 00:10:34,800 --> 00:10:35,730 ‫It back had. 156 00:10:36,880 --> 00:10:37,190 ‫OK. 157 00:10:37,210 --> 00:10:38,330 ‫This is looking fine. 158 00:10:38,350 --> 00:10:43,180 ‫Also, I haven't zoomed anything, so we are going to build everything in our natural way. 159 00:10:43,660 --> 00:10:44,830 ‫So this looks fine. 160 00:10:45,950 --> 00:10:51,120 ‫Now, let us work with this content, so here we have this day and this day. 161 00:10:52,140 --> 00:10:57,810 ‫So the first thing I'm going to do is I'm going to select both of them and change their color and add 162 00:10:57,810 --> 00:10:59,400 ‫some personal setting. 163 00:10:59,790 --> 00:11:07,110 ‫That means if you see this, this is a complete block which is personal lock itself and I can set up 164 00:11:07,110 --> 00:11:07,890 ‫background colors. 165 00:11:07,920 --> 00:11:09,210 ‫We can see the difference. 166 00:11:09,480 --> 00:11:11,910 ‫What I'm going to do is here, I'm going to jump. 167 00:11:14,070 --> 00:11:22,140 ‫Well, the first move and I'm going to select the background color on, yeah, definitely I have already 168 00:11:22,140 --> 00:11:22,710 ‫selected. 169 00:11:24,910 --> 00:11:25,900 ‫Save this one. 170 00:11:25,930 --> 00:11:26,890 ‫Get back here. 171 00:11:28,150 --> 00:11:34,810 ‫OK, now that is different, if you are not able to visualize this audio, it's not visible. 172 00:11:35,890 --> 00:11:38,860 ‫Let me try to use this, save this one. 173 00:11:39,280 --> 00:11:40,630 ‫I hope you got the idea. 174 00:11:41,230 --> 00:11:45,120 ‫Similarly, I'm going to utilize this skatepark symbol. 175 00:11:45,130 --> 00:11:47,980 ‫I have to utilize docs go. 176 00:11:49,340 --> 00:11:54,290 ‫And just use the background color, and this time I'm going to utilize. 177 00:11:55,740 --> 00:11:58,590 ‫A big doctor saved this on get back here. 178 00:11:59,100 --> 00:12:00,930 ‫OK, now we have these two killers. 179 00:12:01,560 --> 00:12:05,280 ‫But the problem had is this is taking complete space. 180 00:12:05,760 --> 00:12:12,780 ‫So what I want is I want somebody to this section because this diverse block element and depend on experience. 181 00:12:13,110 --> 00:12:18,510 ‫So suppose the section is off maybe 30 Pixel 4a because it will restrict everything. 182 00:12:19,230 --> 00:12:26,370 ‫So inside my section, I can add maybe my weight, just jump onto my section part and head. 183 00:12:26,370 --> 00:12:29,850 ‫I'm going to add over 12, maybe 20, then. 184 00:12:33,130 --> 00:12:33,800 ‫OK. 185 00:12:33,850 --> 00:12:35,650 ‫This is pretty much small. 186 00:12:35,770 --> 00:12:36,610 ‫Get back here. 187 00:12:40,330 --> 00:12:45,610 ‫Mark, let me use Typekit crew here here, OK, this looks fine. 188 00:12:46,100 --> 00:12:47,710 ‫So that's what we are doing now. 189 00:12:48,260 --> 00:12:52,240 ‫Now we can use light going on and then change things later. 190 00:12:57,000 --> 00:13:03,060 ‫Yeah, so this is our current section now, my main task is to move this at the middle. 191 00:13:03,760 --> 00:13:05,920 ‫What I'm going to do is and tighten my section. 192 00:13:05,920 --> 00:13:08,650 ‫I can directly select position as absolute. 193 00:13:09,130 --> 00:13:15,670 ‫So this doesn't follow the natural flow and I can go top bottom because that section parent is body, 194 00:13:15,670 --> 00:13:17,860 ‫which covers almost the entire space. 195 00:13:18,900 --> 00:13:28,590 ‫And had I can give thought as maybe 50 percent from comments, 50 percent and also from right, at least 196 00:13:28,590 --> 00:13:30,470 ‫50 percent save this one. 197 00:13:35,140 --> 00:13:42,160 ‫This looks top 50, but the problem here we are facing is that after the 50 percent of talk, it starts 198 00:13:42,550 --> 00:13:46,630 ‫and also after the 50 percent off right, it starts. 199 00:13:47,110 --> 00:13:50,110 ‫But what I want is I want the middle part to be hit. 200 00:13:51,410 --> 00:13:52,670 ‫I hope you got the idea. 201 00:13:53,120 --> 00:13:58,430 ‫I wanted this middle part to was drag up and then this middle part to drag it out. 202 00:13:59,210 --> 00:14:00,560 ‫That's the whole issue. 203 00:14:00,680 --> 00:14:03,590 ‫What we can do is we can utilize transformed. 204 00:14:04,800 --> 00:14:11,430 ‫Now, head, we have a quick, important property, which is known as transform that help us to transform 205 00:14:11,610 --> 00:14:15,030 ‫our current section or whatever the element that we are working with. 206 00:14:15,480 --> 00:14:22,170 ‫So maybe I want to transform this whole element 50 percent on right, 50 percent on Y-axis or X-axis. 207 00:14:22,440 --> 00:14:23,340 ‫I can do that. 208 00:14:23,820 --> 00:14:26,160 ‫So all I have to do is inside this. 209 00:14:26,160 --> 00:14:27,870 ‫I can just use transmit. 210 00:14:29,290 --> 00:14:34,570 ‫So translate, help us to do that, there are several other properties we transform, transform, help 211 00:14:34,570 --> 00:14:37,710 ‫us to work with this section, maybe more on to stretch it. 212 00:14:37,720 --> 00:14:44,080 ‫Maybe we want to rotated everything we can do with this transform property here. 213 00:14:44,080 --> 00:14:48,730 ‫We want to translate it according to X and Y property of this element. 214 00:14:49,030 --> 00:14:56,710 ‫So if I use this translate and save 50 percent x axis and then 50 percent towards y axis, save this 215 00:14:56,710 --> 00:15:00,520 ‫one, you can see it moved 50 percent 50 percent. 216 00:15:01,590 --> 00:15:05,100 ‫The best thing I should do right now is jump on to see a similar trend. 217 00:15:05,550 --> 00:15:07,320 ‫So how if you jump transform? 218 00:15:07,830 --> 00:15:11,640 ‫We have this nun basically means nothing by default or none. 219 00:15:11,910 --> 00:15:18,630 ‫Then we have translated that means move the element on the horizontal axis, not move according to the 220 00:15:18,630 --> 00:15:22,020 ‫native position, whatever the position this element has. 221 00:15:22,940 --> 00:15:27,500 ‫It doesn't look anything else, don't worry about position, display or whatever the content you have 222 00:15:27,500 --> 00:15:27,950 ‫in mind. 223 00:15:28,400 --> 00:15:30,690 ‫It just move according to this element. 224 00:15:30,710 --> 00:15:35,180 ‫So if I say 50 percent said we'll move according to the size of this section. 225 00:15:35,720 --> 00:15:39,770 ‫So here you can see we have this and then we have to. 226 00:15:40,430 --> 00:15:47,630 ‫Why that means if I say translate white 50 percent, that means it is going to go down 50 percent, 227 00:15:47,630 --> 00:15:48,620 ‫according to these size. 228 00:15:48,920 --> 00:15:55,730 ‫If I say translate x 50 percent, that means it will move according to horizontal direction 50 percent. 229 00:15:56,250 --> 00:15:57,590 ‫So that's how it is going to go up. 230 00:15:57,950 --> 00:16:02,620 ‫Then we have this translate that combines both the value of X and Y Z. 231 00:16:02,630 --> 00:16:08,990 ‫If you say translate, the first value is about x axis and the second value is about the y axis and 232 00:16:08,990 --> 00:16:14,240 ‫had, if you see that's how it is going to move and then we have a scale that will help us increase 233 00:16:14,240 --> 00:16:17,900 ‫the size, then we have to rotate, then we have skew. 234 00:16:19,020 --> 00:16:20,190 ‫And we have several of that. 235 00:16:20,370 --> 00:16:24,870 ‫So we are going to utilize this translate now at this point of time. 236 00:16:24,900 --> 00:16:28,590 ‫You can see this is working well, but the horizontal is not working. 237 00:16:29,040 --> 00:16:32,580 ‫So that means instead of this positive, I need to give negative. 238 00:16:33,880 --> 00:16:38,800 ‫Because we are pointing why actions like this and if I give any positive value, it is going to go down, 239 00:16:39,040 --> 00:16:40,660 ‫negative value will take it up. 240 00:16:42,970 --> 00:16:44,620 ‫Save the Swan, get back here. 241 00:16:44,800 --> 00:16:47,350 ‫OK, now we are at the center of page. 242 00:16:49,000 --> 00:16:52,540 ‫Since this isn't the percentage level which depends on body know. 243 00:16:53,860 --> 00:16:55,150 ‫I hope you got the idea. 244 00:16:55,840 --> 00:16:57,090 ‫This looks fine now. 245 00:16:57,310 --> 00:17:03,580 ‫Ask us to add content, some gibberish content so you can first fill the whole section. 246 00:17:04,300 --> 00:17:08,620 ‫So we have this then as a leftist person, a softer image. 247 00:17:08,620 --> 00:17:15,550 ‫What I want is I won't name so I can this a one which show one shot on. 248 00:17:16,770 --> 00:17:22,860 ‫Then I can add about the country, I'm going to utilize up dark and cold, this has India and then I'm 249 00:17:22,860 --> 00:17:24,900 ‫going to utilize my stock again. 250 00:17:24,900 --> 00:17:30,960 ‫I'm going to use up, be and call this house for the stock developer. 251 00:17:31,620 --> 00:17:36,480 ‫Once that is done, I want to button so the First Order button will be about message. 252 00:17:37,470 --> 00:17:44,670 ‫And the second button will be about following simple madness, I'm going to utilize buttons and this 253 00:17:44,670 --> 00:17:46,020 ‫is going to be as. 254 00:17:46,990 --> 00:17:47,740 ‫Message. 255 00:17:49,380 --> 00:17:51,930 ‫The second one will be called as following. 256 00:17:54,590 --> 00:17:57,500 ‫Basically, here we are trying to clone our design. 257 00:17:57,530 --> 00:18:01,940 ‫This will be a small part of a big project and maybe in future some of that. 258 00:18:02,210 --> 00:18:06,590 ‫Suppose you are working on a big project and you want to design a small garden. 259 00:18:06,860 --> 00:18:08,660 ‫That's what this project is about. 260 00:18:09,500 --> 00:18:10,820 ‫I hope you got the idea. 261 00:18:11,300 --> 00:18:16,640 ‫So that's where our button is done and then we have certain social icons. 262 00:18:16,640 --> 00:18:19,670 ‫So this part I will discuss later. 263 00:18:20,310 --> 00:18:24,230 ‫It has its own concept, actually, so we'll be discussing about this later. 264 00:18:24,650 --> 00:18:28,940 ‫And then third scale we have despite ongoing war and all other thing. 265 00:18:29,360 --> 00:18:35,460 ‫So what I'm going to do is I'm going to utilize unordered list and inside this, I'm going to add a 266 00:18:35,480 --> 00:18:36,520 ‫light dog for. 267 00:18:37,610 --> 00:18:38,420 ‫Quiet on. 268 00:18:40,690 --> 00:18:43,090 ‫Next, LT will be about Django. 269 00:18:44,790 --> 00:18:47,790 ‫Unlike Dog will be about API development. 270 00:18:49,120 --> 00:18:53,920 ‫Let me fast-forward this, otherwise you will watch me singing all the names individually. 271 00:19:00,070 --> 00:19:01,480 ‫This looks fine. 272 00:19:01,630 --> 00:19:03,840 ‫We are pretty close to our final. 273 00:19:04,270 --> 00:19:05,170 ‫OK, just kidding. 274 00:19:05,440 --> 00:19:07,270 ‫So now we have this content. 275 00:19:07,790 --> 00:19:11,350 ‫OK, the first problem I see is the start. 276 00:19:11,690 --> 00:19:16,660 ‫So I want to remove them, get inside my skull and remove all of them. 277 00:19:17,050 --> 00:19:20,350 ‫So all I do is select my dog and remove them. 278 00:19:22,070 --> 00:19:27,920 ‫So these are general settings, I'm going to do that at the top, it's also an inside my dog. 279 00:19:28,280 --> 00:19:32,570 ‫I'm going to remove less dial tone on this one. 280 00:19:33,790 --> 00:19:34,140 ‫OK. 281 00:19:34,180 --> 00:19:34,900 ‫This is done. 282 00:19:35,380 --> 00:19:38,020 ‫So that's all thank you for following, we are done with our project. 283 00:19:38,410 --> 00:19:39,310 ‫OK, just kidding. 284 00:19:39,670 --> 00:19:41,770 ‫So let's continue and there's a next lecture. 285 00:19:41,770 --> 00:19:43,570 ‫Otherwise I'm going to drag this a lot. 286 00:19:43,930 --> 00:19:45,150 ‫So thank you for calling. 287 00:19:45,160 --> 00:19:46,780 ‫I hope you got the best idea. 288 00:19:46,840 --> 00:19:51,700 ‫The main aim was to discuss about travel, as well as to understand about this transform. 289 00:19:52,150 --> 00:19:53,980 ‫Read about this You will get more idea. 290 00:19:54,490 --> 00:19:57,880 ‫So these are the two content that I really want to discuss. 291 00:19:58,380 --> 00:20:00,880 ‫Also implement all the concept that we have utilized. 292 00:20:00,880 --> 00:20:03,970 ‫And now, like we just implemented position absolute. 293 00:20:04,330 --> 00:20:06,280 ‫I hope you got the idea out there. 294 00:20:06,460 --> 00:20:07,840 ‫We are going to utilize it. 295 00:20:08,050 --> 00:20:08,860 ‫So that's it. 296 00:20:09,280 --> 00:20:13,090 ‫In the next lecture, let us continue all the on to thank you for calling. 297 00:20:13,330 --> 00:20:15,100 ‫And I see you guys in the next one.