1 00:00:00,770 --> 00:00:01,400 ‫Hey, there. 2 00:00:01,520 --> 00:00:02,270 ‫Welcome back. 3 00:00:02,540 --> 00:00:04,820 ‫Now let us continue our journey with our project. 4 00:00:05,240 --> 00:00:12,050 ‫And we just need to add a few items here that means fill all the content inside them so that currently 5 00:00:12,050 --> 00:00:18,350 ‫what we have is we just simply have this whole title and name thing that we need to add here also. 6 00:00:18,500 --> 00:00:22,340 ‫I mean, everything that means image name vital as well as description. 7 00:00:22,910 --> 00:00:29,960 ‫So let me simply add my image thing, which is going to be media, and then it is going to be about 8 00:00:29,960 --> 00:00:35,060 ‫all the images and then simply create our format for others. 9 00:00:35,150 --> 00:00:36,590 ‫So this is going to be name. 10 00:00:37,070 --> 00:00:39,740 ‫And the second one is going to be about title. 11 00:00:40,250 --> 00:00:42,890 ‫The third one is going to be about this collection. 12 00:00:44,680 --> 00:00:50,080 ‫OK, now I need to feel content, but before that, let me copy paste this on all of them. 13 00:00:52,760 --> 00:00:58,700 ‫So I don't need to replace every single thing with all of them, so let me have this whole thing, and 14 00:00:58,700 --> 00:01:02,630 ‫the question I'm going to do is going to change the image. 15 00:01:04,540 --> 00:01:05,010 ‫Great. 16 00:01:05,110 --> 00:01:11,380 ‫The next thing I'm going to do is add their name, make sure to add different name on all your projects 17 00:01:11,380 --> 00:01:14,440 ‫that I'm utilizing, so you have some difference. 18 00:01:14,470 --> 00:01:18,310 ‫Otherwise, chances are most of these students are copy pasting the same name. 19 00:01:18,790 --> 00:01:25,390 ‫So if you have option, try to utilize different name, try to utilize different image as a. different 20 00:01:25,390 --> 00:01:28,990 ‫color patterns so you can maintain some type of different. 21 00:01:30,100 --> 00:01:31,810 ‫OK, I have added names. 22 00:01:32,200 --> 00:01:40,270 ‫Now let me add some type of title for all of them, so that's in Lawrence in here and maybe not to draw 23 00:01:40,310 --> 00:01:41,980 ‫them forward here. 24 00:01:42,640 --> 00:01:44,140 ‫I'm adding title, remember? 25 00:01:45,100 --> 00:01:53,080 ‫And maybe let's say Norton seven here now I had this is a small one to 10 Norton four. 26 00:01:53,260 --> 00:01:56,650 ‫And maybe here let me say Norton seven. 27 00:01:57,340 --> 00:01:58,570 ‫This looks great. 28 00:01:59,050 --> 00:02:01,030 ‫Now let me add some type of description. 29 00:02:01,030 --> 00:02:02,140 ‫Let me remove this one. 30 00:02:04,790 --> 00:02:08,150 ‫Now here, let me fill up the content utilizing the alarm. 31 00:02:08,420 --> 00:02:14,120 ‫So what I'm going to do is I'm going to add content or my title as well as my description. 32 00:02:14,720 --> 00:02:20,570 ‫Now, since we are building a clone, I'm restricted to utilizing type of spider Lazarus description. 33 00:02:28,240 --> 00:02:36,190 ‫In terms of land now, had I have built up my whole thing, which is my next read the respect or title, 34 00:02:36,190 --> 00:02:42,010 ‫as well as the description part and you can see we got some type of similarity. 35 00:02:44,810 --> 00:02:50,810 ‫But one big difference is this is 90 percent, and this is 95, I guess. 36 00:02:51,230 --> 00:02:57,080 ‫So what I'm going to do is I'm going to jump onto my style sheet and here let me change my container 37 00:02:57,080 --> 00:03:00,050 ‫to 95 so we can have better space. 38 00:03:00,830 --> 00:03:06,020 ‫One other thing is whenever you utilize the word, you can add IMAX to it. 39 00:03:06,500 --> 00:03:13,580 ‫So that means if they are trying to view this on a big, big monitor, you are not going to cover 95 40 00:03:13,580 --> 00:03:15,110 ‫percent of that big monitor. 41 00:03:15,410 --> 00:03:18,680 ‫We can say, OK, 95 percent is OK, but maximum. 42 00:03:18,680 --> 00:03:27,740 ‫We should go maybe 100 or relative pixels or something like maybe 400 pixels, 14 art, 280 something 43 00:03:27,740 --> 00:03:28,250 ‫similar. 44 00:03:28,820 --> 00:03:32,630 ‫So in this way, you can restrict your sizing on big monitors. 45 00:03:33,870 --> 00:03:34,330 ‫OK. 46 00:03:34,350 --> 00:03:35,010 ‫This is great. 47 00:03:35,340 --> 00:03:42,450 ‫Now, one small thing I want to talk about, which is utility Dorset says similarly, you component 48 00:03:42,450 --> 00:03:43,500 ‫and a few other things. 49 00:03:43,950 --> 00:03:45,990 ‫What are they and why they're important? 50 00:03:47,190 --> 00:03:52,470 ‫The first thing is that our town says that we need to apply a certain settings, maybe here, maybe 51 00:03:52,470 --> 00:03:56,880 ‫here, but only for specific units, but multiple times. 52 00:03:57,360 --> 00:04:00,900 ‫Maybe you are working on some similar section and you want to apply setting it. 53 00:04:01,260 --> 00:04:03,570 ‫Maybe you want to apply setting it here, it said. 54 00:04:03,600 --> 00:04:05,590 ‫Or maybe you want to apply here, too. 55 00:04:06,200 --> 00:04:11,100 ‫So what we can do is we can define that setting here with our custom code. 56 00:04:11,280 --> 00:04:19,710 ‫For example, I want my techs colors black so I can say, OK, bp and I can do white color hair. 57 00:04:21,210 --> 00:04:22,340 ‫And I can say. 58 00:04:23,370 --> 00:04:25,440 ‫Zero zero zero zero. 59 00:04:25,590 --> 00:04:26,060 ‫OK. 60 00:04:26,340 --> 00:04:29,640 ‫And something similar I can create for my white text. 61 00:04:29,640 --> 00:04:31,200 ‫I can say WP. 62 00:04:32,160 --> 00:04:33,030 ‫And I can say. 63 00:04:33,870 --> 00:04:35,100 ‫And this is going to be. 64 00:04:36,860 --> 00:04:44,750 ‫Triple and triple f now, if I want to utilize this thing, I can simply say here, OK, for this specific 65 00:04:44,750 --> 00:04:47,000 ‫item, I want my text color to be white. 66 00:04:47,360 --> 00:04:53,810 ‫Maybe if you take this example by default, colors black, but maybe for this example, I want white. 67 00:04:54,380 --> 00:04:55,220 ‫I've got this one. 68 00:04:55,220 --> 00:04:56,750 ‫I want my text as white. 69 00:04:57,350 --> 00:05:02,270 ‫So there are chances that you want to specifically utilize this setting multiple times. 70 00:05:02,510 --> 00:05:06,620 ‫You can create this type of utility and then you can just mention here. 71 00:05:07,580 --> 00:05:13,430 ‫Now here I'm taking a simple example, a simple example where you have this type of setting required. 72 00:05:13,630 --> 00:05:20,080 ‫Now remember, this utility is not going to work unless and until the importer and our stylus notices. 73 00:05:20,600 --> 00:05:26,750 ‫So simply import this sense that in same folder, I just need to mention the name which is going to 74 00:05:26,750 --> 00:05:28,340 ‫be utility. 75 00:05:28,340 --> 00:05:28,550 ‫Not. 76 00:05:29,240 --> 00:05:31,100 ‫And if I save this one, get back here. 77 00:05:32,160 --> 00:05:32,610 ‫OK. 78 00:05:33,120 --> 00:05:38,880 ‫This with the fourth one I need to address with the fifth one, so I just need to remove here and at 79 00:05:38,880 --> 00:05:40,650 ‫that, you can't save this one. 80 00:05:40,680 --> 00:05:41,430 ‫Get back here. 81 00:05:41,790 --> 00:05:44,650 ‫You can see that's how this is going to work out. 82 00:05:44,700 --> 00:05:52,350 ‫Whenever I want this white color, I can simply attach it whenever I want, maybe with my two, with 83 00:05:52,350 --> 00:05:54,480 ‫my one and save this one. 84 00:05:54,990 --> 00:05:59,550 ‫You can see this is going to work and we are much closer to our current project. 85 00:06:00,060 --> 00:06:03,570 ‫But that might mean more was going to make you understand about utility. 86 00:06:04,200 --> 00:06:07,380 ‫Now there are several things that you will see in different projects. 87 00:06:07,380 --> 00:06:12,540 ‫Maybe in future you are going to work on stealth projects, maybe as a freelancer or maybe as a full 88 00:06:12,540 --> 00:06:13,170 ‫time employee. 89 00:06:14,070 --> 00:06:18,810 ‫You will see small utilities whenever you are going to work on framework itself. 90 00:06:19,200 --> 00:06:20,040 ‫You will see them. 91 00:06:20,430 --> 00:06:27,070 ‫So maybe you will see be one and had to have defined finding one pixel. 92 00:06:28,140 --> 00:06:31,730 ‫Now maybe you will see the truth. 93 00:06:32,040 --> 00:06:36,140 ‫And here they have different fighting toolbox. 94 00:06:36,270 --> 00:06:41,640 ‫And so you will have option to just copy this one and simply added it here. 95 00:06:41,980 --> 00:06:46,050 ‫Now, if I did it, I will have a fighting one for this particular item. 96 00:06:46,050 --> 00:06:50,760 ‫I don't need to jump and add it manually for two specific items. 97 00:06:50,760 --> 00:06:53,460 ‫If these are common utilities, remember them. 98 00:06:55,480 --> 00:07:00,760 ‫OK, I hope you got the idea, this basic idea of we will discuss about this later again in the next 99 00:07:00,760 --> 00:07:03,460 ‫lecture or whenever we are going to have some requirement. 100 00:07:04,430 --> 00:07:06,120 ‫For now, that's all for this lecture. 101 00:07:06,140 --> 00:07:13,580 ‫What we did is we simply copy paste this content and also attached this utility file with the help of 102 00:07:13,730 --> 00:07:14,390 ‫import. 103 00:07:14,660 --> 00:07:20,390 ‫Now remember to attach it at the top itself and whatever we are going to utilize in this utility are 104 00:07:20,390 --> 00:07:26,930 ‫basically short forms or custom codes, custom classes that we are going to utilize many times in our 105 00:07:26,930 --> 00:07:27,410 ‫project. 106 00:07:27,680 --> 00:07:30,680 ‫So we can specify them here now. 107 00:07:30,680 --> 00:07:35,270 ‫In this case, we have utilized this W.T. property, which we created right now. 108 00:07:35,840 --> 00:07:37,340 ‫So that's all for this lecture. 109 00:07:37,380 --> 00:07:39,440 ‫Let us continue our task for the next one. 110 00:07:39,880 --> 00:07:42,560 ‫Well, we are going to discuss a few other important concept. 111 00:07:43,160 --> 00:07:46,010 ‫Thank you for calling, and I see you guys in the next one.