1 00:00:00,830 --> 00:00:01,490 ‫Hey, there. 2 00:00:01,670 --> 00:00:02,420 ‫Welcome back. 3 00:00:02,550 --> 00:00:09,550 ‫Show them the side now in this project, let us utilize our knowledge with sixth grade and build a section 4 00:00:09,560 --> 00:00:10,970 ‫letter to testimonials. 5 00:00:11,630 --> 00:00:16,700 ‫That's a quick section in which you are going to understand the concept of sixth grade, as well as 6 00:00:16,700 --> 00:00:18,860 ‫we will also explore different the concept. 7 00:00:19,250 --> 00:00:24,920 ‫So we are going to maintain the division part, which is related to sixth grade, and we are also going 8 00:00:24,920 --> 00:00:26,510 ‫to understand some new concepts. 9 00:00:27,320 --> 00:00:29,330 ‫Now what we are going to do with sixth grade. 10 00:00:29,570 --> 00:00:32,180 ‫The first thing is simple create a layout. 11 00:00:32,630 --> 00:00:35,990 ‫The second thing is also implement the nesting part. 12 00:00:36,350 --> 00:00:42,830 ‫So if you see these different color boxes, we created this layout with the help of container and item 13 00:00:42,830 --> 00:00:43,460 ‫relation. 14 00:00:44,030 --> 00:00:47,750 ‫The second thing we did is with this item, we have different content. 15 00:00:48,230 --> 00:00:53,300 ‫So all of this content is again arranged with the help of our grade itself. 16 00:00:53,810 --> 00:00:59,610 ‫So that means we are going to also understand the nesting of our as Greg Dotson. 17 00:01:00,080 --> 00:01:04,910 ‫Now remember, the main aim is still to understand and implement this grade. 18 00:01:05,120 --> 00:01:06,860 ‫So don't worry about other things. 19 00:01:07,040 --> 00:01:13,340 ‫We are going to implement other things, but the aim is to revise KSAZ grade properly. 20 00:01:14,240 --> 00:01:14,540 ‫OK. 21 00:01:14,570 --> 00:01:17,690 ‫That said, let me jump here, which is our current project. 22 00:01:18,110 --> 00:01:23,560 ‫And remember, this is the build project already that I did, and this is where we are going to build 23 00:01:23,570 --> 00:01:24,230 ‫right now. 24 00:01:25,160 --> 00:01:27,590 ‫Get back here now, let us start our journey. 25 00:01:27,770 --> 00:01:34,790 ‫So here I have my boilerplate code on here you can see I have attached my African simple fabric on and 26 00:01:34,790 --> 00:01:35,380 ‫then head. 27 00:01:35,390 --> 00:01:42,230 ‫I have attached my style or cast that said, now we are also going to utilize two other dots here as 28 00:01:42,230 --> 00:01:42,530 ‫well. 29 00:01:42,530 --> 00:01:48,560 ‫That is, this is going to be utility dot or you might call this as component or anything else. 30 00:01:48,560 --> 00:01:52,250 ‫And future for Nowland referred, this has utility dot. 31 00:01:53,450 --> 00:01:57,650 ‫Then we have one of the file, which is known as Responsive Dot CST. 32 00:01:58,190 --> 00:02:00,560 ‫So definitely this is going to be responsive. 33 00:02:00,570 --> 00:02:07,820 ‫So if I right click, click on Inspect or if I try to just squeeze this, everything is still working 34 00:02:07,820 --> 00:02:08,180 ‫fine. 35 00:02:08,780 --> 00:02:11,610 ‫So, yeah, it's responsive and we can play with this. 36 00:02:11,630 --> 00:02:14,240 ‫Now we have knowledge about mediocrities. 37 00:02:14,840 --> 00:02:15,890 ‫So yep. 38 00:02:16,100 --> 00:02:17,720 ‫So these are great points. 39 00:02:18,800 --> 00:02:24,560 ‫OK, so I have this simple chord and which I have the initial structure, and also I have reduced my 40 00:02:24,560 --> 00:02:29,240 ‫font size to 10 percent so I can utilize my ram and then edit everything. 41 00:02:29,870 --> 00:02:35,240 ‫Remember, this is imported with the help of Google Font, so all of you are directly jumping on to 42 00:02:35,240 --> 00:02:37,290 ‫see a screen reject part. 43 00:02:37,310 --> 00:02:39,470 ‫So this is through Google Font itself. 44 00:02:40,860 --> 00:02:41,730 ‫OK, that's it. 45 00:02:42,150 --> 00:02:48,120 ‫Now let us start our journey with Delia out, so we will add this header and everything else later, 46 00:02:48,120 --> 00:02:49,770 ‫but let's focus on this layout. 47 00:02:50,160 --> 00:02:55,210 ‫So the first thing I'm going to do is I'm going to create a section because we are aiming to work with 48 00:02:55,210 --> 00:02:55,860 ‫that section. 49 00:02:56,400 --> 00:02:58,500 ‫So let me take this as a section itself. 50 00:02:58,560 --> 00:03:01,410 ‫So I'm going to call this section as testimonials. 51 00:03:03,860 --> 00:03:10,700 ‫Now here, I'm building this section as if we are currently working on our website and our today's job 52 00:03:10,700 --> 00:03:15,320 ‫or our today's task is to build our section for that specific website. 53 00:03:15,650 --> 00:03:17,990 ‫And this is the section that we are going to work on. 54 00:03:18,470 --> 00:03:22,640 ‫Now this section is going to have to pass the past parkway to be about this heading. 55 00:03:22,640 --> 00:03:27,050 ‫And then the second part is going to be the container in which we are going to add things. 56 00:03:27,710 --> 00:03:31,360 ‫So we will add the first part later, which is out of heading and everything else. 57 00:03:31,370 --> 00:03:33,380 ‫But let's focus on the container part. 58 00:03:33,620 --> 00:03:35,360 ‫So I'm going to create a bag. 59 00:03:37,490 --> 00:03:44,540 ‫Cordless container and inside this, I'm going to add multiple items, so currently we are one, two, 60 00:03:44,540 --> 00:03:45,920 ‫three, four and five. 61 00:03:46,400 --> 00:03:48,620 ‫There are five items that I need to add. 62 00:03:48,800 --> 00:03:55,070 ‫So what I'm going to do is I'm going to just call them as items and then created what the five times? 63 00:03:55,680 --> 00:03:57,380 ‫OK, that's fine. 64 00:03:57,710 --> 00:04:00,370 ‫And let me also add a unique item to them. 65 00:04:00,380 --> 00:04:04,220 ‫I'm going to call them as item one, two, three, four and five. 66 00:04:10,790 --> 00:04:12,900 ‫So this is the base section currently. 67 00:04:12,920 --> 00:04:15,800 ‫This is not a parent, and this is all our container. 68 00:04:16,280 --> 00:04:22,100 ‫So since we have already created operating, that's good time for us to jump on to our style or CST. 69 00:04:22,520 --> 00:04:25,540 ‫Now I'm not trying to specify them or specify. 70 00:04:25,540 --> 00:04:31,850 ‫I may select that as inside testimonial, then container or I can directly see a container for now, 71 00:04:32,090 --> 00:04:35,540 ‫since we are just walking on a single section right now. 72 00:04:35,840 --> 00:04:40,550 ‫If you are walking on a big project, you need to specify which container because there are chances 73 00:04:40,550 --> 00:04:43,580 ‫you can have multiple container for different section. 74 00:04:43,590 --> 00:04:44,450 ‫Remember this point? 75 00:04:45,140 --> 00:04:47,470 ‫So that's how things work. 76 00:04:48,670 --> 00:04:49,670 ‫This is our container. 77 00:04:49,690 --> 00:04:55,240 ‫The first thing I'm going to do is I'm going to go wide awake, so I'm not lying hundred percent on 78 00:04:55,240 --> 00:04:55,900 ‫our website. 79 00:04:56,320 --> 00:05:04,060 ‫I want to have it 90 percent greater read and can have the rest of the corners or the rest of the extra 80 00:05:04,060 --> 00:05:08,140 ‫space as margin so that 90 percent is awake. 81 00:05:08,560 --> 00:05:14,710 ‫And then I can see margin as auto, so everything is in center, whatever we try to do. 82 00:05:15,490 --> 00:05:20,710 ‫Now, second task is, let me add, as this is created, so that means my display. 83 00:05:21,430 --> 00:05:26,380 ‫So this is going to be excess grain and then we have to arrange our item. 84 00:05:26,530 --> 00:05:28,660 ‫So we have this. 85 00:05:28,810 --> 00:05:31,450 ‫This is the structure that we want to walk with. 86 00:05:32,430 --> 00:05:34,670 ‫Remember, what are the properties with CSAs? 87 00:05:35,510 --> 00:05:38,270 ‫There are properties like great template corner. 88 00:05:40,260 --> 00:05:45,420 ‫No, I'm not going to feel this right now, but just remember what we need to and then there is great 89 00:05:45,420 --> 00:05:46,560 ‫temporary drop. 90 00:05:49,170 --> 00:05:55,140 ‫And then we also need to mention which is going to cover this, that means a first item is going to 91 00:05:55,140 --> 00:05:56,070 ‫cover these two. 92 00:05:56,400 --> 00:05:58,800 ‫Then this is second item, then third item. 93 00:05:58,830 --> 00:06:03,690 ‫So if you remember the visual thing that we did, which is great template area. 94 00:06:04,890 --> 00:06:10,890 ‫Don't worry if you don't remember them, we are going to build this right now, so it will be easy for 95 00:06:10,890 --> 00:06:11,160 ‫you. 96 00:06:11,310 --> 00:06:17,550 ‫So it is going to be a great template ideas and the next thing is going to be the gap that we currently 97 00:06:17,550 --> 00:06:18,330 ‫have with them. 98 00:06:18,810 --> 00:06:20,790 ‫So we just need to utilize gap. 99 00:06:21,890 --> 00:06:27,320 ‫Now, remember, the aliyah method was related to create a gap, the new Methodist gap. 100 00:06:27,860 --> 00:06:31,220 ‫I also mentioned this at the time of implementing them. 101 00:06:32,000 --> 00:06:32,690 ‫Great gap. 102 00:06:32,690 --> 00:06:39,020 ‫Really walk right now and most of the website at this point of time are utilizing great gap, but it 103 00:06:39,020 --> 00:06:42,230 ‫is not recommended it will be obsolete soon. 104 00:06:42,710 --> 00:06:45,550 ‫So you need to focus on Gap and both are walking. 105 00:06:45,560 --> 00:06:46,100 ‫Don't worry. 106 00:06:46,880 --> 00:06:49,760 ‫So these are the properties that we need to work with. 107 00:06:49,940 --> 00:06:51,440 ‫OK, this looks good. 108 00:06:51,860 --> 00:06:54,830 ‫So what I'm going to do is I'm going to add certain things. 109 00:06:55,250 --> 00:07:02,470 ‫So, for example, I'm going to add next right now just simple text so we can play with that item only. 110 00:07:06,410 --> 00:07:07,610 ‫OK, save this one. 111 00:07:08,150 --> 00:07:10,880 ‫So it's simple, there's nothing much simple text. 112 00:07:10,910 --> 00:07:15,560 ‫OK, so I'm going to get back here and get into my style or CFS. 113 00:07:15,980 --> 00:07:19,910 ‫Now, first thing I need to do is I need basically four columns. 114 00:07:20,730 --> 00:07:27,890 ‫If you visualize this, this is my first column, my second column, my third column and my fourth column. 115 00:07:28,310 --> 00:07:29,480 ‫So I need four column. 116 00:07:29,570 --> 00:07:32,090 ‫I can utilize repeat itself four times. 117 00:07:32,090 --> 00:07:36,410 ‫That is going to be one at far greater than I need two rows. 118 00:07:37,000 --> 00:07:44,930 ‫Now, if you're seeing one and two, I can utilize repeat itself to drama one apart looks good to me. 119 00:07:45,490 --> 00:07:52,730 ‫And you see, things are working fine, but currently we need to add some background color so we can 120 00:07:52,730 --> 00:07:53,630 ‫differentiate them. 121 00:07:54,110 --> 00:07:58,160 ‫So what I'm going to do is I'm going to select the child on the child. 122 00:07:58,160 --> 00:08:00,560 ‫Names are my two, one, two, three, four and five. 123 00:08:00,950 --> 00:08:05,160 ‫Remember, they are different colors, so we need to add them differently. 124 00:08:05,180 --> 00:08:09,080 ‫Otherwise, I can directly attack on this part, which is items. 125 00:08:10,370 --> 00:08:17,010 ‫So here I just need to select item one and had I need to provide a property background and I can select 126 00:08:17,030 --> 00:08:24,860 ‫a background color, you can utilize this tool, which I hope you remember Zscaler, because you can 127 00:08:24,860 --> 00:08:31,130 ‫utilize the store and that should work fine and get back here and save this one. 128 00:08:31,670 --> 00:08:37,370 ‫If I jump here, you can see this is our first section on, I should say our first child. 129 00:08:38,450 --> 00:08:42,290 ‫Now I need to do something similar for the different items as well. 130 00:08:42,710 --> 00:08:47,300 ‫So I just need to add multiple items, which is going to be item two. 131 00:08:48,460 --> 00:08:51,550 ‫Three, four and five. 132 00:08:52,150 --> 00:08:58,480 ‫And I just need to select their colors, so I have already copied them, and I don't need to jump again 133 00:08:58,480 --> 00:08:59,740 ‫and copy paste them. 134 00:09:00,190 --> 00:09:02,290 ‫But you have to do that, actually. 135 00:09:03,900 --> 00:09:08,670 ‫If you are walking on any real website or rail project, so this looks fine. 136 00:09:09,330 --> 00:09:13,830 ‫This is probably maybe dark gray, whitish and then black something. 137 00:09:14,100 --> 00:09:20,250 ‫OK, now currently we are not calling any type of responsiveness, but we are calling that OK. 138 00:09:20,280 --> 00:09:23,370 ‫These are wonderful and they are walking pretty fine. 139 00:09:24,480 --> 00:09:30,060 ‫If you see, I know this is pretty small, so let me also add some size. 140 00:09:30,540 --> 00:09:32,730 ‫What I can do is I can select item. 141 00:09:34,690 --> 00:09:42,760 ‫So let me jump outside my container and head, I can select items, and the first thing I'm going Virginias, 142 00:09:42,760 --> 00:09:46,030 ‫I'm going to change the font size for now and I'm going to call. 143 00:09:46,030 --> 00:09:50,110 ‫This has three RAM, so it is clearly visible what we are doing. 144 00:09:50,260 --> 00:09:50,650 ‫OK. 145 00:09:50,860 --> 00:09:52,790 ‫I hope it's visible to all of you. 146 00:09:53,750 --> 00:09:54,080 ‫Yep. 147 00:09:55,650 --> 00:09:58,200 ‫So that's how this is going to work for now. 148 00:09:58,530 --> 00:09:59,400 ‫OK, great. 149 00:09:59,760 --> 00:10:02,460 ‫Now we need to get this type of section. 150 00:10:02,970 --> 00:10:05,670 ‫So the first thing I am going to do is. 151 00:10:07,120 --> 00:10:12,280 ‫Utilize my area this past great template areas. 152 00:10:12,580 --> 00:10:20,080 ‫I just need to refine what I need on my foster and then my second row so I can say I need item one and 153 00:10:20,080 --> 00:10:21,130 ‫I done one here. 154 00:10:23,030 --> 00:10:29,120 ‫Remember these two, but I need my eye on one here, something like this. 155 00:10:29,810 --> 00:10:33,110 ‫Then this is going to be my item to something like this. 156 00:10:33,620 --> 00:10:35,780 ‫And then this is going to be my identity. 157 00:10:38,220 --> 00:10:42,870 ‫So this is going to be my item, too, and then this is going to be my item three. 158 00:10:44,030 --> 00:10:48,680 ‫Great, that is was my first report, and I also need to do something similar for all my other role. 159 00:10:49,070 --> 00:10:57,710 ‫So what I'm going to do is I'm going to select my item for item by item five and then item three again. 160 00:10:57,920 --> 00:10:58,400 ‫Why? 161 00:10:59,000 --> 00:11:08,540 ‫Because if you solve this in this particular manner, we have two blocks for item one, then item two, 162 00:11:09,050 --> 00:11:11,870 ‫then how do we have item for item five? 163 00:11:11,870 --> 00:11:13,760 ‫And then this is what item three? 164 00:11:13,920 --> 00:11:15,190 ‫OK, save this one. 165 00:11:15,230 --> 00:11:16,010 ‫Get back here. 166 00:11:16,610 --> 00:11:19,370 ‫And yeah, definitely you are not going to see any changes. 167 00:11:19,400 --> 00:11:19,880 ‫Why? 168 00:11:20,480 --> 00:11:24,320 ‫Because we need to add these name, these item names. 169 00:11:24,890 --> 00:11:30,140 ‫So here you just need to jump on to the grid area part and you need to provide a name. 170 00:11:30,530 --> 00:11:32,510 ‫And I'm going to call this item one. 171 00:11:32,870 --> 00:11:34,880 ‫Remember, you can call this anything. 172 00:11:34,880 --> 00:11:36,460 ‫You can call this ask property. 173 00:11:36,890 --> 00:11:37,940 ‫So this is Paul Paul. 174 00:11:37,940 --> 00:11:38,660 ‫This is Paul Paul. 175 00:11:38,660 --> 00:11:44,120 ‫And you can also call this house, but it depend on you or whatever the name is familiar to your project. 176 00:11:44,720 --> 00:11:50,090 ‫Let me quickly add all this name, which is going to be item one, two, three, four and five. 177 00:11:56,220 --> 00:12:00,210 ‫If I jump back here now, you can see we got our desired part. 178 00:12:00,570 --> 00:12:02,730 ‫But this might look a bit confusing. 179 00:12:03,020 --> 00:12:06,900 ‫Good time for us to add the background color, which is slightly blue. 180 00:12:07,620 --> 00:12:13,500 ‫So what I'm going to do is I'm going to jump onto my container and here I'm going to add the background 181 00:12:13,500 --> 00:12:13,860 ‫color. 182 00:12:15,180 --> 00:12:19,920 ‫Basically, we need to add background color to this testimonial section because we are also going to 183 00:12:19,920 --> 00:12:20,940 ‫have this heading. 184 00:12:21,150 --> 00:12:26,200 ‫So if I'm only adding my color to container only this will be attached actually. 185 00:12:26,220 --> 00:12:27,420 ‫But I need this also. 186 00:12:27,810 --> 00:12:31,260 ‫So for now, I'm going to target my testimonials. 187 00:12:34,530 --> 00:12:40,220 ‫And had I simply need to add background color, or you can utilize background itself more because it's 188 00:12:40,220 --> 00:12:45,840 ‫not shorthand property and jump back here, you can see now there is something. 189 00:12:46,560 --> 00:12:52,020 ‫One other thing that I can do right now is add some border areas, which is going to be five pixels. 190 00:12:52,470 --> 00:12:56,790 ‫So if I save this one and get back here, OK, much better. 191 00:12:56,790 --> 00:13:00,840 ‫You can see now we are moving forward towards this whole direction. 192 00:13:01,740 --> 00:13:02,160 ‫Great. 193 00:13:02,550 --> 00:13:03,960 ‫You can also add padding here. 194 00:13:04,680 --> 00:13:05,670 ‫Let me out bounding. 195 00:13:08,330 --> 00:13:11,690 ‫Let me try one point five from save this one. 196 00:13:12,320 --> 00:13:12,850 ‫Brilliant. 197 00:13:13,640 --> 00:13:19,970 ‫So this is our current section, and we got this type of whole grid thing, right? 198 00:13:20,660 --> 00:13:23,660 ‫I hope you got the idea what we are trying to do currently. 199 00:13:24,020 --> 00:13:28,040 ‫We just created an entire base for our oil project. 200 00:13:28,640 --> 00:13:30,460 ‫Now there are a lot of things that we have to do. 201 00:13:30,470 --> 00:13:35,390 ‫We need to create content inside it and then play with these other two files. 202 00:13:36,260 --> 00:13:41,780 ‫So for now, that's it for this lecture, and let's continue our whole journey in the next one. 203 00:13:42,410 --> 00:13:45,170 ‫Thank you for calling, and I see you guys in the next one.