‫Hey, there.
‫Welcome back.
‫Show them the side now in this project, let us utilize our knowledge with sixth grade and build a section
‫letter to testimonials.
‫That's a quick section in which you are going to understand the concept of sixth grade, as well as
‫we will also explore different the concept.
‫So we are going to maintain the division part, which is related to sixth grade, and we are also going
‫to understand some new concepts.
‫Now what we are going to do with sixth grade.
‫The first thing is simple create a layout.
‫The second thing is also implement the nesting part.
‫So if you see these different color boxes, we created this layout with the help of container and item
‫relation.
‫The second thing we did is with this item, we have different content.
‫So all of this content is again arranged with the help of our grade itself.
‫So that means we are going to also understand the nesting of our as Greg Dotson.
‫Now remember, the main aim is still to understand and implement this grade.
‫So don't worry about other things.
‫We are going to implement other things, but the aim is to revise KSAZ grade properly.
‫OK.
‫That said, let me jump here, which is our current project.
‫And remember, this is the build project already that I did, and this is where we are going to build
‫right now.
‫Get back here now, let us start our journey.
‫So here I have my boilerplate code on here you can see I have attached my African simple fabric on and
‫then head.
‫I have attached my style or cast that said, now we are also going to utilize two other dots here as
‫well.
‫That is, this is going to be utility dot or you might call this as component or anything else.
‫And future for Nowland referred, this has utility dot.
‫Then we have one of the file, which is known as Responsive Dot CST.
‫So definitely this is going to be responsive.
‫So if I right click, click on Inspect or if I try to just squeeze this, everything is still working
‫fine.
‫So, yeah, it's responsive and we can play with this.
‫Now we have knowledge about mediocrities.
‫So yep.
‫So these are great points.
‫OK, so I have this simple chord and which I have the initial structure, and also I have reduced my
‫font size to 10 percent so I can utilize my ram and then edit everything.
‫Remember, this is imported with the help of Google Font, so all of you are directly jumping on to
‫see a screen reject part.
‫So this is through Google Font itself.
‫OK, that's it.
‫Now let us start our journey with Delia out, so we will add this header and everything else later,
‫but let's focus on this layout.
‫So the first thing I'm going to do is I'm going to create a section because we are aiming to work with
‫that section.
‫So let me take this as a section itself.
‫So I'm going to call this section as testimonials.
‫Now here, I'm building this section as if we are currently working on our website and our today's job
‫or our today's task is to build our section for that specific website.
‫And this is the section that we are going to work on.
‫Now this section is going to have to pass the past parkway to be about this heading.
‫And then the second part is going to be the container in which we are going to add things.
‫So we will add the first part later, which is out of heading and everything else.
‫But let's focus on the container part.
‫So I'm going to create a bag.
‫Cordless container and inside this, I'm going to add multiple items, so currently we are one, two,
‫three, four and five.
‫There are five items that I need to add.
‫So what I'm going to do is I'm going to just call them as items and then created what the five times?
‫OK, that's fine.
‫And let me also add a unique item to them.
‫I'm going to call them as item one, two, three, four and five.
‫So this is the base section currently.
‫This is not a parent, and this is all our container.
‫So since we have already created operating, that's good time for us to jump on to our style or CST.
‫Now I'm not trying to specify them or specify.
‫I may select that as inside testimonial, then container or I can directly see a container for now,
‫since we are just walking on a single section right now.
‫If you are walking on a big project, you need to specify which container because there are chances
‫you can have multiple container for different section.
‫Remember this point?
‫So that's how things work.
‫This is our container.
‫The first thing I'm going to do is I'm going to go wide awake, so I'm not lying hundred percent on
‫our website.
‫I want to have it 90 percent greater read and can have the rest of the corners or the rest of the extra
‫space as margin so that 90 percent is awake.
‫And then I can see margin as auto, so everything is in center, whatever we try to do.
‫Now, second task is, let me add, as this is created, so that means my display.
‫So this is going to be excess grain and then we have to arrange our item.
‫So we have this.
‫This is the structure that we want to walk with.
‫Remember, what are the properties with CSAs?
‫There are properties like great template corner.
‫No, I'm not going to feel this right now, but just remember what we need to and then there is great
‫temporary drop.
‫And then we also need to mention which is going to cover this, that means a first item is going to
‫cover these two.
‫Then this is second item, then third item.
‫So if you remember the visual thing that we did, which is great template area.
‫Don't worry if you don't remember them, we are going to build this right now, so it will be easy for
‫you.
‫So it is going to be a great template ideas and the next thing is going to be the gap that we currently
‫have with them.
‫So we just need to utilize gap.
‫Now, remember, the aliyah method was related to create a gap, the new Methodist gap.
‫I also mentioned this at the time of implementing them.
‫Great gap.
‫Really walk right now and most of the website at this point of time are utilizing great gap, but it
‫is not recommended it will be obsolete soon.
‫So you need to focus on Gap and both are walking.
‫Don't worry.
‫So these are the properties that we need to work with.
‫OK, this looks good.
‫So what I'm going to do is I'm going to add certain things.
‫So, for example, I'm going to add next right now just simple text so we can play with that item only.
‫OK, save this one.
‫So it's simple, there's nothing much simple text.
‫OK, so I'm going to get back here and get into my style or CFS.
‫Now, first thing I need to do is I need basically four columns.
‫If you visualize this, this is my first column, my second column, my third column and my fourth column.
‫So I need four column.
‫I can utilize repeat itself four times.
‫That is going to be one at far greater than I need two rows.
‫Now, if you're seeing one and two, I can utilize repeat itself to drama one apart looks good to me.
‫And you see, things are working fine, but currently we need to add some background color so we can
‫differentiate them.
‫So what I'm going to do is I'm going to select the child on the child.
‫Names are my two, one, two, three, four and five.
‫Remember, they are different colors, so we need to add them differently.
‫Otherwise, I can directly attack on this part, which is items.
‫So here I just need to select item one and had I need to provide a property background and I can select
‫a background color, you can utilize this tool, which I hope you remember Zscaler, because you can
‫utilize the store and that should work fine and get back here and save this one.
‫If I jump here, you can see this is our first section on, I should say our first child.
‫Now I need to do something similar for the different items as well.
‫So I just need to add multiple items, which is going to be item two.
‫Three, four and five.
‫And I just need to select their colors, so I have already copied them, and I don't need to jump again
‫and copy paste them.
‫But you have to do that, actually.
‫If you are walking on any real website or rail project, so this looks fine.
‫This is probably maybe dark gray, whitish and then black something.
‫OK, now currently we are not calling any type of responsiveness, but we are calling that OK.
‫These are wonderful and they are walking pretty fine.
‫If you see, I know this is pretty small, so let me also add some size.
‫What I can do is I can select item.
‫So let me jump outside my container and head, I can select items, and the first thing I'm going Virginias,
‫I'm going to change the font size for now and I'm going to call.
‫This has three RAM, so it is clearly visible what we are doing.
‫OK.
‫I hope it's visible to all of you.
‫Yep.
‫So that's how this is going to work for now.
‫OK, great.
‫Now we need to get this type of section.
‫So the first thing I am going to do is.
‫Utilize my area this past great template areas.
‫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
‫I done one here.
‫Remember these two, but I need my eye on one here, something like this.
‫Then this is going to be my item to something like this.
‫And then this is going to be my identity.
‫So this is going to be my item, too, and then this is going to be my item three.
‫Great, that is was my first report, and I also need to do something similar for all my other role.
‫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.
‫Why?
‫Because if you solve this in this particular manner, we have two blocks for item one, then item two,
‫then how do we have item for item five?
‫And then this is what item three?
‫OK, save this one.
‫Get back here.
‫And yeah, definitely you are not going to see any changes.
‫Why?
‫Because we need to add these name, these item names.
‫So here you just need to jump on to the grid area part and you need to provide a name.
‫And I'm going to call this item one.
‫Remember, you can call this anything.
‫You can call this ask property.
‫So this is Paul Paul.
‫This is Paul Paul.
‫And you can also call this house, but it depend on you or whatever the name is familiar to your project.
‫Let me quickly add all this name, which is going to be item one, two, three, four and five.
‫If I jump back here now, you can see we got our desired part.
‫But this might look a bit confusing.
‫Good time for us to add the background color, which is slightly blue.
‫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
‫color.
‫Basically, we need to add background color to this testimonial section because we are also going to
‫have this heading.
‫So if I'm only adding my color to container only this will be attached actually.
‫But I need this also.
‫So for now, I'm going to target my testimonials.
‫And had I simply need to add background color, or you can utilize background itself more because it's
‫not shorthand property and jump back here, you can see now there is something.
‫One other thing that I can do right now is add some border areas, which is going to be five pixels.
‫So if I save this one and get back here, OK, much better.
‫You can see now we are moving forward towards this whole direction.
‫Great.
‫You can also add padding here.
‫Let me out bounding.
‫Let me try one point five from save this one.
‫Brilliant.
‫So this is our current section, and we got this type of whole grid thing, right?
‫I hope you got the idea what we are trying to do currently.
‫We just created an entire base for our oil project.
‫Now there are a lot of things that we have to do.
‫We need to create content inside it and then play with these other two files.
‫So for now, that's it for this lecture, and let's continue our whole journey in the next one.
‫Thank you for calling, and I see you guys in the next one.