‫Hey, dad.
‫Welcome back.
‫Now let us start our task with the responsive part.
‫So if you observe here, if I click on Inspect and if I try to just decrease the size as soon as we
‫reach the top or the plastic, maybe around 990 pixel, we are going to remove one column and add it
‫at the bottom.
‫Now here, if I try to squeeze it again, I guess 13 pixel, maybe around 760, we are going to go completely
‫in the form of column.
‫So we need to add this restriction with the help of our responsive, not CSIS.
‫The first thing I'm going to do is I noticed quantum dots here says here are simply not HDMI 2.1 with
‫the standard responsive Garcia.
‫This looks great.
‫Me jump here and here is our current breakout points that are added by default.
‫Now we need to add one more breakout point, which is going to be around 991 picks, and I totally depend
‫on our requirement.
‫This is, I guess, for air bags.
‫So if I right click here, I'm going to inspect, you will see around 1991.
‫We need to break out.
‫So something similar, how do we need to do it, I guess?
‫700 some pixel, I guess 760 pixel, which is going to be 768 pixel.
‫We need to break out, so these two are going to be attractive.
‫So the first thing I need credit is Argentina because these are the field which are going to be edited.
‫So if I copied this whole container right now, get back here now.
‫First, I'm going to get inside my 991 pixel.
‫This is OK.
‫There's going to remain same.
‫If I need to change anything.
‫These are the things I need to customize.
‫So what I need to do is I need to move towards this type of structure.
‫Where we currently have one, two, three or five.
‫Where we are going to have three rows and basically three columns and three rows, so if you see one
‫column here, one column here and one column here, so I need to have three columns.
‫And then I need to have three rows, so I just need to change it to three.
‫And the next thing is, I need to change it to three.
‫So I will have three columns and three row, but the structure will change.
‫So I need to have.
‫I don't want I don't want item to.
‫Hard will be to move here.
‫I don't order five five card will be removed there, but I will have I done three here, which is going
‫to be done.
‫Three.
‫Item three.
‫And Item three looks fine to me if I get back here.
‫This one on my right click and try to decrease the size, you can see a talking point.
‫I hope you got the idea, what we just did.
‫Now, something similar we need to do with our 768 pixel.
‫So if I copied this container itself and here I need to change setting what I need to do, the major
‫changes, I need to go on one column setting.
‫So this is going to be one after directly one column.
‫And then there will be multiple roles.
‫That means if I have fire hydrant, it is going to have five floors.
‫I don't need to mention this, actually.
‫I can just directly mention or two here because read one, they're fine.
‫They will have equal shape.
‫One example if I have one, if I had all the columns, how equals shape?
‫What if I see one?
‫If I withdraws, all of them are going to have equal shape, which is not required.
‫One example if I say repeat five comma one apart, let's try to utilize this one.
‫And if I jump here, get back, OK, I need to change this also.
‫Now we have five items, so we are going to deal with five rows.
‫Item three.
‫I don't forward and I don't fight if I save this one.
‫Get back here.
‫And I try to decrease the size you can see it's working fine, scroll down.
‫Everything is working fine, but the problem is this extra space.
‫Behind the scenes, what is happening is we have provided this rule with one effort.
‫That means it does equal for all.
‫So I need to provide us saving as auto.
‫What I can say five or over the short walk, when you can see now it is only taking space, which is
‫required.
‫Similarly for this one.
‫Or I can say simply or not.
‫Because this will be applied on all of them, so I hope you got the idea how we did the entire change.
‫So if you right click on Inspect and I try to take this out.
‫And let me try to control this from this small panel, if I said go with toggle device and try to utilize
‫this.
‫Now here you can see this screen, this 2000 pixel.
‫I'm still going to restrict my maximum avatars around one 200 something, right?
‫If you remember this part, we are restricting our weight to Max Hawk one two eight zero.
‫And I try to decrease the decrease or decrease it.
‫Things are working fine now.
‫We are trying to squeeze it, and as soon as we reach somewhere around 900, I'm going to.
‫Getting dressed once or more again, if I try to touch something 768, I'm going to get into breast
‫cancer more.
‫So that's how you are going to make your website, or I should say your section responsive.
‫Now there is one small thing is remaining which is going to be are heading.
‫So I'm going to call our Dave Glass, and he would not name as hurting.
‫And then I moved to Hawaii at one class, and we took all this, has testimonials, and then I'm going
‫to have our emoji.
‫Okay, so let me add this text.
‫Save this one, get back here.
‫So this is our current testimonial.
‫We need to do a few settings, which is going to be about the chin and size seconds on own sites as
‫well as my chin.
‫Before I jump carriage, I'm going to do my first.
‫This is before container, so here I just need to select my heading.
‫And inside my head, I need to select actually a choice.
‫And how do we need to change our own size?
‫Let me try it through them.
‫And also, I'm going to go get my margin, which is going to be three RAM again.
‫Save this one.
‫Get back here.
‫Looks great.
‫Now I need to add it at this point so we can add it at the center with the help of next time for no
‫little extra line.
‫And let me see the center.
‫And it is going to work fine.
‫But what if we create a utility in sense, whenever we want to do anything center, it can be a block,
‫it can be anything.
‫We can utilize something related to Flexbox.
‫So for now, I'm going to create our property on, I should say, a class call center, and I'm just
‫going to change the display to Flex.
‫And then I can say just to buy content and I can do this and that, so I can name it as parties on something
‫like this, since it's my utility, I can name it anything.
‫And if I copied this one now, every time I need to horizontal anything, I can just add a here and
‫see and see horizontal center.
‫Now, if I jump back here, you can see it center.
‫So I don't need to mess with different things.
‫I can simplify things with the help of this type of utility.
‫Now I can do something similar.
‫I can copy this and add this here itself.
‫But this will help me to utilize this same property again and again whenever I need to do something.
‫Now this is a small project.
‫That's a small example when you work with big projects that can be custom utilities working on multiple
‫pages, multiple projects as well.
‫So you will understand more about this when you are going to work with a framework like bootstrap or
‫maybe any other framework, you will get more knowledge about these utilities, or it can be any component.
‫For example, you can build different types of buttons and see where and then whenever you want to utilize
‫any button, you can just add a particular property.
‫Now you will see common names like primary or maybe success.
‫So success is always represented towards green.
‫Or maybe alert is always represented towards the law.
‫The injuries represented or failure a failure is represented.
‫The word maybe red.
‫So you can have different type of colors, colors of maybe primary color.
‫See something like this, and the color may be related to blue, whatever the primary color you want
‫on your website.
‫So this was just an example about utility.
‫I hope you got the idea, and this looks fine.
‫I hope you got the idea.
‫How to design a clone of our section with the help of is great.
‫Now one last thing, then our chances that you might need different sizes at this point of time, I'm
‫pretty zoomed in while recording these lectures.
‫So maybe you want different sizes?
‫Try to play with different sizes.
‫Try to play with different colors.
‫You have color and knowledge.
‫By now, I do play with different forms.
‫You don't need to stick with this whole Poppins thing.
‫And try to play with images, at least when you are uploading a project, at least when you are showing
‫your project in your resumé or maybe anywhere else on social media or anywhere.
‫Try to have some other images.
‫It's free.
‫You can use Unsplash.
‫You can use pixels, anything and just have different images.
‫Make sure you maintain the ratio.
‫For example, if you jump on to any type of image here, I guess this is 700 by 700.
‫So make sure you maintain these ratios 700 by 700.
‫So whenever you try to squeeze them, they will still maintain their expectations.
‫So that's all for this whole project, EU-Canada.
‫But I had and then push this code on to get up or open.
‫That's all for this whole project, I hope you got the idea about, says Greg, utilities, responsiveness
‫and a few other concepts.
‫Thank you for calling.
‫Make sure after designing this or completing the section or this project.
‫Read this on Twitter.
‫Make sure to tag me, or maybe on LinkedIn, as well as Instagram.
‫Thank you for calling.
‫I hope this was helpful and I see you guys in the next one.