‫Hey, there.
‫Welcome back.
‫Now in this lecture, there does discuss about variable.
‫So why that important and how we are going to utilize them?
‫The first thing is whenever we have some common numbers, whenever we have some common colors, we usually
‫see them in very well so that we don't have to remember them and we can use our own variable name.
‫What it is and how we can do.
‫Let's discuss about this right now.
‫So I suppose what I'm going to do is I'm going to jump on to that rude element right now.
‫So I'm going to say rude.
‫And inside this, I am going to control all the variables.
‫For example, if I want to say green, maybe I'm just creating our name as green use double dash and
‫then green.
‫And head, I'm going to provide a value, so for example, let me take this value itself and here,
‫let me provide this here.
‫So this is going to be my baby.
‫So this is my variable name and this is the value that I have provided.
‫Now here, remember, I am working with this root element, so now I can utilize this green anywhere
‫I want.
‫Basically, if I want to utilize this value, I don't need to remember.
‫All I have to use is use the R and then I can directly pass this value and brackets.
‫That's it.
‫And I can do that at every single position where I have some power properties.
‫So maybe I have this.
‫I can utilize a tab, maybe any other I can utilize there.
‫And remember, you can give any type of name.
‫And be careful by replacing all of them.
‫You can also do control edge and what I have to replace with an.
‫Add this here, so I am going to replace this one.
‫Then this one, this one, this one, and not this one, so that stun save this one.
‫Get back here soon.
‫I have replaced all the horrible colors with my variable mirrored screen, right?
‫If I want to change the website team leader, maybe I want to change this color and maybe I want to
‫go with blue something.
‫Maybe this one, for example, I'm going to go with this one.
‫Yep.
‫Yes.
‫OK, save this one.
‫Here if I jump.
‫Now all the green will be this blue itself.
‫Because they are dependent on this value, this value of this really, really had to be called green,
‫you can call it anything and utilize that variable name every single place.
‫So maybe you can call this as caller one and the other callers caller to whatever you want.
‫So that's how this variable is important.
‫I hope you got the idea.
‫Now let me also utilize Discolor, which is going to be great.
‫So I'm going to call this has Dash Dash Gray, and I'm going to save it radically.
‫Now, my aim is to just replace this or just use this color specifically.
‫And replace this with gravity when name companies want and save this year and replace not the don't
‫take place this one, but the next one, so skip this one.
‫Replace, replace, replace.
‫Knox said make sure you don't replace this one.
‫So that's it.
‫Now we have created the value, so if I scroll on, all of them are great, but they are following this
‫very well name.
‫Now, these are also important, and we are working with common heights when we are working with Commonwealth.
‫So for example, here we are, trying to build specific height every time we are changing our size.
‫Maybe here, maybe here again.
‫So what I can say is I can save the Bay Area name as header height and I can save the variable names
‫image type R logo height.
‫And then we can replace them directly inside at all.
‫And we don't have to target this every time.
‫For example, let's stake here.
‫I'm going to take the height.
‫Which was initially, I guess, had that high, it was a trend.
‫So I'm going to call this a on, I should say, 10:00 a.m..
‫Ahead, I'm going to call this as atrium.
‫Now, remember, this crime is not going to work because we changed our -- sites here in HDMI.
‫So how you need to pass the pixels himself?
‫So this is the default header, right?
‫And if I say what is logo right?
‫At the local high, disquieting pixel, so I can go with local high.
‫40 pixels.
‫Save this one now, every time I require this header, I can utilize the law and then I can see I heard
‫that I.
‫And simply with my logo, I can see why.
‫And that is my variable and say logo height.
‫Save this one and get back here.
‫Things are looking fine now, what I'm going to do is I'm going to override this rule.
‫So for example, here inside my weight section.
‫I'm not going to what I am, but here I can override the right, which is 6:00 a.m. I'm going to say
‫6:00 a.m. And this logo hide this is currently 40.
‫I'm going to convert it into 30.
‫I don't need both of them because I have updated the value itself.
‫Remember this point?
‫So remember, our header is updated to six, depicts a jumper and try to minimize this.
‫You can see it's working.
‫Right click here, click on Inspect Container.
‫OK, I should go even harder here is the logistics typical.
‫And this is what we updated.
‫We can do something similar here.
‫Get back and.
‫And instead of paying their 60, I can go with 50 and this is 25, so I can go with 25 and remove both
‫of them.
‫Save this one and get back here.
‫So if I go inspect.
‫You can see they are walking fine exactly the way that we live.
‫They might say, inspect this container and go with header.
‫This is 60 now, and if I just try to decrease it more.
‫This is in our so that's how is going to work, and I hope you got the idea about these variables.
‫These are also important when you are working with the common value.
‫There are certain values that are pretty common when we work with big projects, and that's where these
‫type of variables come into picture.
‫Now this was just a single page landing page and we walk with multiple pages.
‫These colors matter a lot because it's a theme you can see blue, black, white and green.
‫It's a theme itself.
‫So if I see if I utilize this specific variable only to them these, then we can change the website
‫team and seconds.
‫Because all I have to do is just change the variable name.
‫That's it.
‫So that's the important point that I wanted to share.
‫You can skip this topic entirely, but if you are going to follow this, it will help you a lot when
‫you are walking on a big project because chances are you are going to create your own custom colors,
‫you are going to create your own gradient colors and you don't want to utilize these values again and
‫again, like a big gradient color name or even the color name because you cannot remember them.
‫So that's where these values come into picture.
‫That's all for this lecture, I hope this was helpful, and we are also done with our current project.
‫One thing I strongly recommend the last thing or get done.
‫Everything is done.
‫The last thing I strongly recommend is make sure you check about the buttons.
‫There are chances that several position we miss out button sizing.
‫So make sure you check about the buttons.
‫Make sure you check about the margins, if any text is touching or not.
‫Also, make sure to check about the responsiveness.
‫So if you are working on a project that depend on responsive size, you can just click on here and then
‫select different devices.
‫There are different tools that are important and can help you here.
‫Are you going to jump onto Google and search about check website responsive and they will help you to
‫test out your website for free or if your website is already deployed on?
‫So what that means that you are working with our website that is already on also where you can test
‫out different tools to test their responsiveness.
‫For now, this Google Chrome tool as best you can do things easily with different type of devices,
‫also go with 100 percent to get proper view.
‫Now here you might need to increase the size because at the time of this spark, things were looking
‫fine.
‫So you might need to increase the height.
‫Now the project is done totally depend on you.
‫Maybe you want to increase the height, decrease the height, our dependence on you.
‫So that's it.
‫I hope you understood about Flexbox.
‫You understood about the structure of our website.
‫You understood about how to use variables, you understood about how to utilize these media queries.
‫Also, the important thing was to discuss about these background.
‫So that's that's all about this whole project.
‫Thank you for calling.
‫I hope this project help you to learn different content.
‫And I see you guys in the next one.