1 00:00:00,670 --> 00:00:01,210 ‫Hey, there. 2 00:00:01,360 --> 00:00:02,110 ‫Welcome back. 3 00:00:02,290 --> 00:00:05,410 ‫Now in this lecture, there does discuss about variable. 4 00:00:06,410 --> 00:00:09,860 ‫So why that important and how we are going to utilize them? 5 00:00:10,580 --> 00:00:17,900 ‫The first thing is whenever we have some common numbers, whenever we have some common colors, we usually 6 00:00:17,900 --> 00:00:24,800 ‫see them in very well so that we don't have to remember them and we can use our own variable name. 7 00:00:25,010 --> 00:00:26,850 ‫What it is and how we can do. 8 00:00:26,930 --> 00:00:28,880 ‫Let's discuss about this right now. 9 00:00:29,420 --> 00:00:34,070 ‫So I suppose what I'm going to do is I'm going to jump on to that rude element right now. 10 00:00:34,640 --> 00:00:35,810 ‫So I'm going to say rude. 11 00:00:36,260 --> 00:00:39,920 ‫And inside this, I am going to control all the variables. 12 00:00:40,220 --> 00:00:48,950 ‫For example, if I want to say green, maybe I'm just creating our name as green use double dash and 13 00:00:48,950 --> 00:00:49,670 ‫then green. 14 00:00:50,870 --> 00:00:58,030 ‫And head, I'm going to provide a value, so for example, let me take this value itself and here, 15 00:00:58,040 --> 00:00:59,660 ‫let me provide this here. 16 00:01:00,230 --> 00:01:02,450 ‫So this is going to be my baby. 17 00:01:03,650 --> 00:01:07,910 ‫So this is my variable name and this is the value that I have provided. 18 00:01:08,330 --> 00:01:14,870 ‫Now here, remember, I am working with this root element, so now I can utilize this green anywhere 19 00:01:14,900 --> 00:01:15,470 ‫I want. 20 00:01:15,740 --> 00:01:19,690 ‫Basically, if I want to utilize this value, I don't need to remember. 21 00:01:20,300 --> 00:01:27,910 ‫All I have to use is use the R and then I can directly pass this value and brackets. 22 00:01:28,670 --> 00:01:29,170 ‫That's it. 23 00:01:29,840 --> 00:01:34,820 ‫And I can do that at every single position where I have some power properties. 24 00:01:34,820 --> 00:01:35,930 ‫So maybe I have this. 25 00:01:36,320 --> 00:01:40,550 ‫I can utilize a tab, maybe any other I can utilize there. 26 00:01:40,940 --> 00:01:43,430 ‫And remember, you can give any type of name. 27 00:01:44,500 --> 00:01:47,620 ‫And be careful by replacing all of them. 28 00:01:47,980 --> 00:01:53,740 ‫You can also do control edge and what I have to replace with an. 29 00:01:55,090 --> 00:01:59,470 ‫Add this here, so I am going to replace this one. 30 00:01:59,800 --> 00:02:05,500 ‫Then this one, this one, this one, and not this one, so that stun save this one. 31 00:02:05,530 --> 00:02:06,780 ‫Get back here soon. 32 00:02:06,790 --> 00:02:12,400 ‫I have replaced all the horrible colors with my variable mirrored screen, right? 33 00:02:12,880 --> 00:02:18,820 ‫If I want to change the website team leader, maybe I want to change this color and maybe I want to 34 00:02:18,820 --> 00:02:20,210 ‫go with blue something. 35 00:02:20,560 --> 00:02:23,950 ‫Maybe this one, for example, I'm going to go with this one. 36 00:02:25,360 --> 00:02:25,720 ‫Yep. 37 00:02:25,790 --> 00:02:26,160 ‫Yes. 38 00:02:27,040 --> 00:02:28,510 ‫OK, save this one. 39 00:02:29,320 --> 00:02:30,320 ‫Here if I jump. 40 00:02:30,490 --> 00:02:34,390 ‫Now all the green will be this blue itself. 41 00:02:35,590 --> 00:02:41,820 ‫Because they are dependent on this value, this value of this really, really had to be called green, 42 00:02:41,830 --> 00:02:46,330 ‫you can call it anything and utilize that variable name every single place. 43 00:02:47,170 --> 00:02:52,600 ‫So maybe you can call this as caller one and the other callers caller to whatever you want. 44 00:02:53,020 --> 00:02:55,540 ‫So that's how this variable is important. 45 00:02:56,230 --> 00:02:57,880 ‫I hope you got the idea. 46 00:02:58,840 --> 00:03:02,470 ‫Now let me also utilize Discolor, which is going to be great. 47 00:03:02,620 --> 00:03:10,360 ‫So I'm going to call this has Dash Dash Gray, and I'm going to save it radically. 48 00:03:11,470 --> 00:03:17,860 ‫Now, my aim is to just replace this or just use this color specifically. 49 00:03:19,750 --> 00:03:28,450 ‫And replace this with gravity when name companies want and save this year and replace not the don't 50 00:03:28,450 --> 00:03:31,300 ‫take place this one, but the next one, so skip this one. 51 00:03:32,690 --> 00:03:34,670 ‫Replace, replace, replace. 52 00:03:35,700 --> 00:03:39,030 ‫Knox said make sure you don't replace this one. 53 00:03:40,050 --> 00:03:40,860 ‫So that's it. 54 00:03:40,890 --> 00:03:47,490 ‫Now we have created the value, so if I scroll on, all of them are great, but they are following this 55 00:03:47,490 --> 00:03:48,300 ‫very well name. 56 00:03:49,730 --> 00:03:55,490 ‫Now, these are also important, and we are working with common heights when we are working with Commonwealth. 57 00:03:55,880 --> 00:04:02,640 ‫So for example, here we are, trying to build specific height every time we are changing our size. 58 00:04:03,350 --> 00:04:05,510 ‫Maybe here, maybe here again. 59 00:04:05,960 --> 00:04:12,260 ‫So what I can say is I can save the Bay Area name as header height and I can save the variable names 60 00:04:12,260 --> 00:04:13,850 ‫image type R logo height. 61 00:04:14,270 --> 00:04:17,820 ‫And then we can replace them directly inside at all. 62 00:04:17,870 --> 00:04:20,150 ‫And we don't have to target this every time. 63 00:04:20,390 --> 00:04:23,230 ‫For example, let's stake here. 64 00:04:23,240 --> 00:04:24,860 ‫I'm going to take the height. 65 00:04:27,780 --> 00:04:31,770 ‫Which was initially, I guess, had that high, it was a trend. 66 00:04:32,130 --> 00:04:35,610 ‫So I'm going to call this a on, I should say, 10:00 a.m.. 67 00:04:37,000 --> 00:04:39,440 ‫Ahead, I'm going to call this as atrium. 68 00:04:41,950 --> 00:04:47,820 ‫Now, remember, this crime is not going to work because we changed our -- sites here in HDMI. 69 00:04:48,190 --> 00:04:51,550 ‫So how you need to pass the pixels himself? 70 00:04:52,180 --> 00:04:54,310 ‫So this is the default header, right? 71 00:04:54,670 --> 00:04:56,770 ‫And if I say what is logo right? 72 00:04:58,400 --> 00:05:04,040 ‫At the local high, disquieting pixel, so I can go with local high. 73 00:05:06,950 --> 00:05:07,970 ‫40 pixels. 74 00:05:09,430 --> 00:05:19,160 ‫Save this one now, every time I require this header, I can utilize the law and then I can see I heard 75 00:05:19,160 --> 00:05:19,630 ‫that I. 76 00:05:20,860 --> 00:05:25,150 ‫And simply with my logo, I can see why. 77 00:05:25,480 --> 00:05:28,390 ‫And that is my variable and say logo height. 78 00:05:31,660 --> 00:05:33,940 ‫Save this one and get back here. 79 00:05:34,360 --> 00:05:39,370 ‫Things are looking fine now, what I'm going to do is I'm going to override this rule. 80 00:05:39,610 --> 00:05:43,780 ‫So for example, here inside my weight section. 81 00:05:45,680 --> 00:05:53,720 ‫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 82 00:05:53,720 --> 00:05:58,640 ‫6:00 a.m. And this logo hide this is currently 40. 83 00:05:58,640 --> 00:06:00,710 ‫I'm going to convert it into 30. 84 00:06:00,950 --> 00:06:05,990 ‫I don't need both of them because I have updated the value itself. 85 00:06:06,500 --> 00:06:07,580 ‫Remember this point? 86 00:06:08,570 --> 00:06:16,160 ‫So remember, our header is updated to six, depicts a jumper and try to minimize this. 87 00:06:19,650 --> 00:06:20,940 ‫You can see it's working. 88 00:06:22,280 --> 00:06:25,700 ‫Right click here, click on Inspect Container. 89 00:06:25,730 --> 00:06:30,250 ‫OK, I should go even harder here is the logistics typical. 90 00:06:30,710 --> 00:06:32,270 ‫And this is what we updated. 91 00:06:32,900 --> 00:06:34,800 ‫We can do something similar here. 92 00:06:34,820 --> 00:06:36,470 ‫Get back and. 93 00:06:38,450 --> 00:06:46,940 ‫And instead of paying their 60, I can go with 50 and this is 25, so I can go with 25 and remove both 94 00:06:46,940 --> 00:06:47,370 ‫of them. 95 00:06:48,080 --> 00:06:50,620 ‫Save this one and get back here. 96 00:06:52,070 --> 00:06:53,510 ‫So if I go inspect. 97 00:06:55,010 --> 00:06:58,640 ‫You can see they are walking fine exactly the way that we live. 98 00:06:58,810 --> 00:07:02,950 ‫They might say, inspect this container and go with header. 99 00:07:04,090 --> 00:07:07,630 ‫This is 60 now, and if I just try to decrease it more. 100 00:07:08,670 --> 00:07:14,130 ‫This is in our so that's how is going to work, and I hope you got the idea about these variables. 101 00:07:14,730 --> 00:07:17,960 ‫These are also important when you are working with the common value. 102 00:07:17,970 --> 00:07:24,030 ‫There are certain values that are pretty common when we work with big projects, and that's where these 103 00:07:24,030 --> 00:07:26,280 ‫type of variables come into picture. 104 00:07:26,310 --> 00:07:31,260 ‫Now this was just a single page landing page and we walk with multiple pages. 105 00:07:31,560 --> 00:07:37,860 ‫These colors matter a lot because it's a theme you can see blue, black, white and green. 106 00:07:38,170 --> 00:07:39,420 ‫It's a theme itself. 107 00:07:39,720 --> 00:07:47,070 ‫So if I see if I utilize this specific variable only to them these, then we can change the website 108 00:07:47,070 --> 00:07:48,510 ‫team and seconds. 109 00:07:48,540 --> 00:07:52,320 ‫Because all I have to do is just change the variable name. 110 00:07:52,410 --> 00:07:53,070 ‫That's it. 111 00:07:53,760 --> 00:07:57,540 ‫So that's the important point that I wanted to share. 112 00:07:58,140 --> 00:08:04,680 ‫You can skip this topic entirely, but if you are going to follow this, it will help you a lot when 113 00:08:04,680 --> 00:08:09,840 ‫you are walking on a big project because chances are you are going to create your own custom colors, 114 00:08:09,840 --> 00:08:15,090 ‫you are going to create your own gradient colors and you don't want to utilize these values again and 115 00:08:15,090 --> 00:08:21,120 ‫again, like a big gradient color name or even the color name because you cannot remember them. 116 00:08:21,300 --> 00:08:23,640 ‫So that's where these values come into picture. 117 00:08:25,210 --> 00:08:30,250 ‫That's all for this lecture, I hope this was helpful, and we are also done with our current project. 118 00:08:30,730 --> 00:08:33,590 ‫One thing I strongly recommend the last thing or get done. 119 00:08:33,610 --> 00:08:34,490 ‫Everything is done. 120 00:08:34,510 --> 00:08:38,470 ‫The last thing I strongly recommend is make sure you check about the buttons. 121 00:08:38,770 --> 00:08:42,700 ‫There are chances that several position we miss out button sizing. 122 00:08:42,910 --> 00:08:44,820 ‫So make sure you check about the buttons. 123 00:08:44,830 --> 00:08:48,490 ‫Make sure you check about the margins, if any text is touching or not. 124 00:08:48,970 --> 00:08:51,910 ‫Also, make sure to check about the responsiveness. 125 00:08:51,910 --> 00:08:58,090 ‫So if you are working on a project that depend on responsive size, you can just click on here and then 126 00:08:58,090 --> 00:08:59,500 ‫select different devices. 127 00:08:59,890 --> 00:09:03,640 ‫There are different tools that are important and can help you here. 128 00:09:04,680 --> 00:09:10,850 ‫Are you going to jump onto Google and search about check website responsive and they will help you to 129 00:09:10,860 --> 00:09:15,990 ‫test out your website for free or if your website is already deployed on? 130 00:09:15,990 --> 00:09:21,720 ‫So what that means that you are working with our website that is already on also where you can test 131 00:09:21,720 --> 00:09:24,540 ‫out different tools to test their responsiveness. 132 00:09:24,750 --> 00:09:31,410 ‫For now, this Google Chrome tool as best you can do things easily with different type of devices, 133 00:09:31,740 --> 00:09:34,410 ‫also go with 100 percent to get proper view. 134 00:09:34,890 --> 00:09:42,060 ‫Now here you might need to increase the size because at the time of this spark, things were looking 135 00:09:42,060 --> 00:09:42,450 ‫fine. 136 00:09:44,870 --> 00:09:46,820 ‫So you might need to increase the height. 137 00:09:47,840 --> 00:09:50,100 ‫Now the project is done totally depend on you. 138 00:09:50,120 --> 00:09:54,020 ‫Maybe you want to increase the height, decrease the height, our dependence on you. 139 00:09:54,470 --> 00:09:55,100 ‫So that's it. 140 00:09:55,100 --> 00:09:57,770 ‫I hope you understood about Flexbox. 141 00:09:57,770 --> 00:10:00,860 ‫You understood about the structure of our website. 142 00:10:01,280 --> 00:10:08,000 ‫You understood about how to use variables, you understood about how to utilize these media queries. 143 00:10:08,400 --> 00:10:11,870 ‫Also, the important thing was to discuss about these background. 144 00:10:12,650 --> 00:10:15,770 ‫So that's that's all about this whole project. 145 00:10:15,980 --> 00:10:17,000 ‫Thank you for calling. 146 00:10:17,210 --> 00:10:20,030 ‫I hope this project help you to learn different content. 147 00:10:20,450 --> 00:10:22,280 ‫And I see you guys in the next one.