1 00:00:00,520 --> 00:00:01,090 ‫Hey, there. 2 00:00:01,240 --> 00:00:01,960 ‫Welcome back. 3 00:00:02,230 --> 00:00:04,960 ‫Now let us continue our task with our current items. 4 00:00:06,040 --> 00:00:12,160 ‫For now, I need to get back here with my items because I need to start working with the individual 5 00:00:12,160 --> 00:00:13,720 ‫elements like this image. 6 00:00:13,990 --> 00:00:16,720 ‫Name, description, title and other things. 7 00:00:17,410 --> 00:00:22,690 ‫So here we need to play with this and this structure is fine or the current requirement. 8 00:00:23,290 --> 00:00:26,560 ‫Let me get back here and I need to start working with my items. 9 00:00:27,400 --> 00:00:30,030 ‫So let me remove this fix and head. 10 00:00:30,040 --> 00:00:35,770 ‫I simply need to add my first item, which is going to be my image, and then I need to add names. 11 00:00:35,810 --> 00:00:38,590 ‫I'm going to create new paragraphs for each one of them. 12 00:00:39,340 --> 00:00:45,100 ‫So this is going to be our name, and then I'm going to have phyto, which is going to be about the 13 00:00:45,100 --> 00:00:45,970 ‫review title. 14 00:00:46,180 --> 00:00:51,100 ‫And then I'm going to have our description, which is going to be the reviewer description. 15 00:00:51,730 --> 00:00:54,190 ‫So for now, let me take some sample values. 16 00:00:54,280 --> 00:00:56,500 ‫I have all the images and the reference part. 17 00:00:56,830 --> 00:01:03,760 ‫Well, which is our testimonial one, two, three, four and five, which are the profile images that 18 00:01:03,760 --> 00:01:05,470 ‫we are going to utilize here. 19 00:01:06,520 --> 00:01:13,780 ‫So let me get back here and jump onto my media and then select the first one and also make sure you 20 00:01:13,780 --> 00:01:18,910 ‫add this alternative attribute value whenever you are working on a real project. 21 00:01:19,540 --> 00:01:22,810 ‫The second thing is let me add a name on now. 22 00:01:22,810 --> 00:01:26,890 ‫Let me take some sampling, which is going to be this random name. 23 00:01:26,890 --> 00:01:27,970 ‫I have no idea. 24 00:01:28,570 --> 00:01:31,150 ‫So let me organize this name itself. 25 00:01:31,960 --> 00:01:34,600 ‫And the second thing I'm going to do is title. 26 00:01:35,050 --> 00:01:43,660 ‫So let me add last autumn five title, and then let me take a short description, maybe 20 and save 27 00:01:43,660 --> 00:01:44,140 ‫this one. 28 00:01:45,400 --> 00:01:49,090 ‫So this is the sample structure that we took currently. 29 00:01:49,630 --> 00:01:56,920 ‫Now remember, we need to follow some type of very tight on our image and also about this one size. 30 00:01:57,430 --> 00:02:04,750 ‫So let me get back here, jump onto my style now I can remove this one size three because we are not 31 00:02:04,750 --> 00:02:05,740 ‫going to work with it. 32 00:02:05,950 --> 00:02:13,120 ‫The intention was to just have a decent display of this whole section, so I'm not going to follow the 33 00:02:13,120 --> 00:02:13,750 ‫three of them. 34 00:02:14,350 --> 00:02:20,830 ‫The other thing I'm going to do is add some words to our image, so I'm going to select my items and 35 00:02:20,830 --> 00:02:23,850 ‫then I'm going to select all the images inside my item. 36 00:02:24,310 --> 00:02:30,600 ‫So let me out of it, as well as height, which is going to be a pixel as well as served up except. 37 00:02:31,660 --> 00:02:33,220 ‫Saved us one get back here. 38 00:02:33,610 --> 00:02:39,640 ‫OK, this looks fine, pretty much better than the earlier version, but we need to add some foreign 39 00:02:39,640 --> 00:02:41,530 ‫science because this is too small. 40 00:02:42,100 --> 00:02:44,500 ‫So what I'm going to do is I'm going to jump here. 41 00:02:45,680 --> 00:02:53,690 ‫And individually create fear for our name, for our title as an as description, the consequences for 42 00:02:53,690 --> 00:02:55,520 ‫all three of them are different. 43 00:02:56,120 --> 00:03:03,200 ‫So what I'm going to do is I'm going to OK this year, I'm going to create a new park, which is going 44 00:03:03,200 --> 00:03:04,460 ‫to be a dumb name. 45 00:03:05,720 --> 00:03:12,500 ‫Remember, this is common for all to I can say, item IMG, I can say name I as well as description, 46 00:03:13,160 --> 00:03:17,720 ‫so maintain my items, which is likely, then I'm going to select name. 47 00:03:18,800 --> 00:03:24,050 ‫Similarly, I need to follow something similar for my title as well as description. 48 00:03:29,090 --> 00:03:34,370 ‫Now here, I need to name which is going to be about one size. 49 00:03:36,620 --> 00:03:39,030 ‫Let's take one point REM. 50 00:03:39,800 --> 00:03:46,760 ‫Similarly, let me add on my data, and let's try read maybe one point eight because spider. 51 00:03:48,040 --> 00:03:53,930 ‫The next thing is about our description, how that description needs something smaller than a title 52 00:03:53,930 --> 00:03:57,290 ‫because title is something that should get the maximum attention. 53 00:03:57,410 --> 00:04:03,710 ‫So here I'm going to utilize maybe 1.6 Adam, save this one and get back here. 54 00:04:04,370 --> 00:04:07,430 ‫OK, much better, much better than the previous one. 55 00:04:08,420 --> 00:04:13,900 ‫Now, what I'm going to do is I'm going to convert this items, that means all these individual element 56 00:04:14,330 --> 00:04:18,800 ‫into grids so we can arrange all of them, all of these items. 57 00:04:19,100 --> 00:04:20,840 ‫So I can say, OK, this is here. 58 00:04:20,840 --> 00:04:21,680 ‫This is here. 59 00:04:21,920 --> 00:04:23,420 ‫You can follow something similar. 60 00:04:24,140 --> 00:04:30,140 ‫So the first thing I'm going to do is I'm going to add border with our image, so I just need to jump 61 00:04:30,140 --> 00:04:31,400 ‫her head. 62 00:04:31,400 --> 00:04:35,530 ‫I need to connect or the radios, and I'm going to go with 50 percent. 63 00:04:35,540 --> 00:04:37,970 ‫So we have us for our personal goal. 64 00:04:39,560 --> 00:04:45,200 ‫And if you jump here, you can see our images so good, but I need both of these items in a single bag. 65 00:04:45,950 --> 00:04:53,000 ‫So what I am going to do basically is if you right click here and go on to the inspect box. 66 00:04:53,360 --> 00:04:55,980 ‫Just click on the item part items. 67 00:04:56,330 --> 00:04:57,650 ‫Click on to the screen. 68 00:04:58,280 --> 00:05:03,350 ‫Now what I'm going to do is I'm going to call this as a grid and then divide them into three column. 69 00:05:03,620 --> 00:05:06,290 ‫The first column is going to contain our image. 70 00:05:06,740 --> 00:05:10,340 ‫The second column is going to contain the name, the second and third column. 71 00:05:10,760 --> 00:05:15,840 ‫And then what we are going to do is and the next row, we are going to have a description on the title. 72 00:05:15,860 --> 00:05:16,700 ‫Everything else. 73 00:05:17,450 --> 00:05:24,650 ‫So we basically need to convert this whole items and low grade and we call this has great excel. 74 00:05:26,000 --> 00:05:31,580 ‫Now, since this is great, that means it is going to take certain certain settings like our column 75 00:05:31,580 --> 00:05:36,560 ‫and row, and we have information about this with these included in the previous lecture. 76 00:05:37,190 --> 00:05:42,890 ‫So if I jump here with our current structure, we are currently following great remember. 77 00:05:43,460 --> 00:05:44,900 ‫So you can see this is a major. 78 00:05:44,930 --> 00:05:46,680 ‫Now we are following the rule structure. 79 00:05:46,700 --> 00:05:48,200 ‫This is a major name. 80 00:05:48,590 --> 00:05:49,850 ‫Ezra's description. 81 00:05:50,490 --> 00:05:56,370 ‫So the first thing I'm going to do is instead of the rule of law, I'm going to change the flow. 82 00:05:56,390 --> 00:05:58,700 ‫I'm going to change the flow towards column. 83 00:05:59,090 --> 00:06:00,260 ‫I'm going to say a grid. 84 00:06:00,870 --> 00:06:05,930 ‫And remember, that is auto loans, and I'm going to say a column. 85 00:06:06,290 --> 00:06:10,790 ‫If I save this one now, everything is followed in the almost column. 86 00:06:11,480 --> 00:06:13,380 ‫But now we can restrict things. 87 00:06:13,400 --> 00:06:17,720 ‫Now we can say, OK, I provide our own structure. 88 00:06:17,720 --> 00:06:23,180 ‫Let the force say they need for this column is about the size of our image. 89 00:06:23,780 --> 00:06:29,930 ‫So if I jump parents effective acceptance because that's the size of an image and then say one at five. 90 00:06:32,390 --> 00:06:33,780 ‫Wonderful and wonderful. 91 00:06:33,920 --> 00:06:36,980 ‫And if I saved this one, you will get a structure like this. 92 00:06:37,520 --> 00:06:39,290 ‫You don't need actually three columns. 93 00:06:39,290 --> 00:06:43,910 ‫You can see two columns only because in the first one we are going to have an image. 94 00:06:44,240 --> 00:06:47,510 ‫And then in the second one, we have our name, which is this one. 95 00:06:48,260 --> 00:06:54,410 ‫Now, the next thing we can do is we can utilize this powerful thing, which we have been utilizing 96 00:06:54,410 --> 00:06:56,840 ‫from quite a few lectures now, which is area. 97 00:06:57,620 --> 00:07:02,030 ‫And what I can say is the first 50, because that is going to be our image. 98 00:07:02,690 --> 00:07:10,240 ‫And then the next all space will be a low band name, and we need to do something similar for the next 99 00:07:10,250 --> 00:07:10,610 ‫row. 100 00:07:13,040 --> 00:07:16,820 ‫So the first story is going to have our image as well as our name. 101 00:07:17,240 --> 00:07:21,740 ‫And then the second one is going to have our title and description, then the next one. 102 00:07:22,340 --> 00:07:25,310 ‫So the next one is. 103 00:07:26,360 --> 00:07:32,840 ‫Going to have our title now, remember, I need both columns here and then the next one is going to 104 00:07:32,840 --> 00:07:39,620 ‫have our description and our description that looks fine. 105 00:07:39,650 --> 00:07:43,880 ‫All I have to do is now provide these names to these respective section. 106 00:07:44,000 --> 00:07:47,420 ‫So I just need to see a grid area. 107 00:07:47,630 --> 00:07:49,340 ‫And this is going to be imaged. 108 00:07:50,060 --> 00:07:55,520 ‫And similarly, for name, I just need to provide grid name. 109 00:07:55,730 --> 00:07:59,390 ‫And then I'm going to provide grid. 110 00:08:02,210 --> 00:08:03,680 ‫This is going to be tighter. 111 00:08:04,100 --> 00:08:06,800 ‫And then the next one will be about that description. 112 00:08:11,010 --> 00:08:11,940 ‫Save this one. 113 00:08:11,970 --> 00:08:12,810 ‫Get back here. 114 00:08:14,220 --> 00:08:15,720 ‫OK, this is great. 115 00:08:15,870 --> 00:08:24,240 ‫We have divided things according to our requirements, if I just jump on to our items and remember we 116 00:08:24,240 --> 00:08:27,120 ‫are inside the container, so this is a. 117 00:08:27,660 --> 00:08:28,630 ‫This is container. 118 00:08:28,680 --> 00:08:30,480 ‫This is items now had. 119 00:08:30,480 --> 00:08:36,660 ‫If you click on this great part, what we did is we first created a 50 percent bar, which is going 120 00:08:36,660 --> 00:08:37,830 ‫to container image. 121 00:08:38,280 --> 00:08:44,070 ‫Then we have the next part which is going to have information about the name, then our title and then 122 00:08:44,070 --> 00:08:44,790 ‫description. 123 00:08:45,420 --> 00:08:49,140 ‫The next thing we need to do is add some gap if you see some gap here. 124 00:08:49,860 --> 00:08:53,490 ‫We can do that with the help of padding itself, but we have option. 125 00:08:53,490 --> 00:08:55,140 ‫We have option about Gap here. 126 00:08:55,470 --> 00:08:58,170 ‫So inside out items, let's utilize the gap. 127 00:08:58,860 --> 00:09:03,380 ‫But remember, I don't need grab for column itself, so I just need to up. 128 00:09:03,390 --> 00:09:04,620 ‫So let's roll gap. 129 00:09:05,040 --> 00:09:07,410 ‫And let me go with one point five rim. 130 00:09:08,070 --> 00:09:09,660 ‫Save this one and get back here. 131 00:09:10,700 --> 00:09:12,320 ‫You can see now we have some gap. 132 00:09:12,860 --> 00:09:16,280 ‫The other thing is, I need this this name to be at center. 133 00:09:16,820 --> 00:09:20,030 ‫So we have property, we have several properties that can help. 134 00:09:20,450 --> 00:09:28,000 ‫So either we can jump onto this whole column thing about our name and utilize our line self and see 135 00:09:28,010 --> 00:09:28,670 ‫a center. 136 00:09:30,360 --> 00:09:35,700 ‫You can see this is working fine or we can utilize again, padding margin, few other things, but we 137 00:09:35,700 --> 00:09:40,740 ‫are utilizing Flexbox grade this type of layout to avoid the extra headache. 138 00:09:41,430 --> 00:09:46,800 ‫Now the other small thing is the gap between this image, as well as the specs you see. 139 00:09:47,310 --> 00:09:54,000 ‫So what I'm going to do is I am going to add some padding here, but simple, just add some padding, 140 00:09:54,000 --> 00:09:58,200 ‫which is going to be left and I'm going to send one the same. 141 00:09:58,200 --> 00:09:59,400 ‫This one get back here. 142 00:09:59,700 --> 00:10:00,720 ‫OK, great. 143 00:10:00,930 --> 00:10:06,000 ‫This is looking great enough to start our journey with other items as well. 144 00:10:06,930 --> 00:10:08,550 ‫So I hope this lecture was helpful. 145 00:10:08,550 --> 00:10:09,570 ‫In the next lecture. 146 00:10:09,570 --> 00:10:13,650 ‫Let us continue and also discuss about this utility, not success. 147 00:10:14,460 --> 00:10:15,960 ‫I hope this lecture was helpful. 148 00:10:16,110 --> 00:10:19,140 ‫Thank you for following, and I see you guys in the next one.