1 00:00:01,520 --> 00:00:02,060 ‫Hey, there. 2 00:00:02,240 --> 00:00:03,050 ‫Welcome back. 3 00:00:03,440 --> 00:00:08,810 ‫Now let us quickly discuss about a new unit, which as we edge and VW. 4 00:00:09,260 --> 00:00:12,410 ‫What is this and why they are important? 5 00:00:12,890 --> 00:00:15,310 ‫Now first thing is, I hope you remember about you. 6 00:00:16,340 --> 00:00:17,300 ‫What is your work? 7 00:00:17,450 --> 00:00:22,730 ‫The screen that is visible to us currently, that is from here to here. 8 00:00:23,420 --> 00:00:24,360 ‫What is it? 9 00:00:24,380 --> 00:00:25,730 ‫It is viewport height. 10 00:00:26,030 --> 00:00:27,390 ‫And what is VW? 11 00:00:27,410 --> 00:00:28,790 ‫It is viewed with. 12 00:00:29,690 --> 00:00:35,930 ‫So whenever we want to utilize the height and weight of our current screen, we can utilize V Edge and 13 00:00:35,930 --> 00:00:36,590 ‫VW. 14 00:00:36,920 --> 00:00:38,780 ‫One big, important information. 15 00:00:38,990 --> 00:00:46,580 ‫There will be several sites that utilize this village and VW to add their banner, or maybe to just 16 00:00:46,580 --> 00:00:47,610 ‫cover the screen. 17 00:00:48,050 --> 00:00:53,840 ‫For example, if this is the current view, if you see this, it means the background color here. 18 00:00:54,860 --> 00:00:56,900 ‫So making our banner. 19 00:00:58,810 --> 00:01:00,130 ‫And then add a background. 20 00:01:01,870 --> 00:01:05,470 ‫Now, this is the current screen size, I haven't removed any padding. 21 00:01:07,280 --> 00:01:13,310 ‫Earnings, you know, gross margins, it'll save this one, get back in here, you can see now this 22 00:01:13,310 --> 00:01:20,420 ‫is currently taking the exact size which is required by content, but maybe we want to cover all the 23 00:01:20,420 --> 00:01:23,630 ‫visible screen sizes at that point of time. 24 00:01:23,810 --> 00:01:28,400 ‫We can utilize the edge as well as VW, for example. 25 00:01:28,430 --> 00:01:31,190 ‫This is Daniel and had I considered. 26 00:01:32,980 --> 00:01:35,980 ‫Height as hundreds the age. 27 00:01:36,370 --> 00:01:40,750 ‫If I jump back here now, you can see it start from here, this point. 28 00:01:40,870 --> 00:01:46,590 ‫Then here it has captured the height and if I scroll down, you can see the other content start. 29 00:01:47,110 --> 00:01:54,520 ‫That means one which equals to one percent off screen size 100, which equals 200 percent of screen 30 00:01:54,520 --> 00:01:56,260 ‫size in terms of height. 31 00:01:56,830 --> 00:02:03,100 ‫And this is important when we want to cover 100 percent of screen height as well as width, we can utilize 32 00:02:03,100 --> 00:02:03,280 ‫it. 33 00:02:03,760 --> 00:02:08,170 ‫This works well when we want to cover the maybe here we have navigation bar. 34 00:02:08,440 --> 00:02:13,510 ‫And then here we have some background image and then button here, something like this. 35 00:02:13,630 --> 00:02:16,390 ‫It is pretty common to have this type of style. 36 00:02:16,660 --> 00:02:22,150 ‫Maybe you are working on a portfolio, or maybe you are working on e-commerce websites that want to 37 00:02:22,150 --> 00:02:25,690 ‫have such hair and then a complete background image. 38 00:02:26,140 --> 00:02:26,800 ‫So that's all. 39 00:02:26,800 --> 00:02:33,100 ‫Instead of using background color, you can utilize background image and as you can see, all the other 40 00:02:33,100 --> 00:02:34,830 ‫content is after this. 41 00:02:35,920 --> 00:02:37,990 ‫So this is how it is going to work. 42 00:02:38,350 --> 00:02:42,640 ‫If I want to cover the entire world, I will use V.W. 43 00:02:43,450 --> 00:02:47,650 ‫At this point of time, we are using block elements, so there is no issue about which. 44 00:02:48,830 --> 00:02:53,150 ‫Now, maybe we have some element and we want to stretch it to complete the award. 45 00:02:53,480 --> 00:02:55,280 ‫We can utilize VW. 46 00:02:55,790 --> 00:02:58,640 ‫One good example can be related to font size. 47 00:02:58,970 --> 00:03:02,120 ‫So maybe right now our phone sizes. 48 00:03:02,540 --> 00:03:06,170 ‫Exactly 16 pixel by default via utilizing that. 49 00:03:06,860 --> 00:03:09,560 ‫So on, one of them will be 16 pixel mark. 50 00:03:09,560 --> 00:03:12,680 ‫Suppose I want to organize my phone size according to my screen. 51 00:03:13,160 --> 00:03:18,110 ‫What I can do is I can jump here and utilize this information. 52 00:03:18,860 --> 00:03:23,570 ‫I'm going to select the information and insight that I'm working on will be done. 53 00:03:23,990 --> 00:03:27,380 ‫And here I'm going to use font size. 54 00:03:28,100 --> 00:03:33,110 ‫Now, if I'm using two, then that will be how do you do pixel, right? 55 00:03:33,680 --> 00:03:35,870 ‫So I saved this on. 56 00:03:35,870 --> 00:03:36,680 ‫Get back here. 57 00:03:37,980 --> 00:03:40,170 ‫So this program will be 32 mixing. 58 00:03:40,480 --> 00:03:45,480 ‫OK, I got the idea, but I wanted this to change as I changed my screen size. 59 00:03:46,050 --> 00:03:50,760 ‫One thing I can do is I can define three ways like our mediocrity. 60 00:03:51,030 --> 00:03:57,510 ‫So with Dublin, I can change red, the mobile I can change, or I can use calculation function. 61 00:03:57,810 --> 00:04:03,240 ‫So here I have calc and I can pass the size. 62 00:04:03,270 --> 00:04:14,070 ‫Plus, I can pass 0.5 VW now just VW is viewport with and it will keep on changing as we increase and 63 00:04:14,070 --> 00:04:15,460 ‫decrease the size head. 64 00:04:15,480 --> 00:04:18,180 ‫If you look at this point now at the bottom. 65 00:04:19,400 --> 00:04:21,170 ‫You can see it's changing its size. 66 00:04:22,400 --> 00:04:30,110 ‫If you want to let me use this as for free for now and also take this as do so we can properly visualize 67 00:04:30,110 --> 00:04:30,920 ‫it back here. 68 00:04:31,730 --> 00:04:37,670 ‫Now head, if you see the font is changing in a drastic way, and that's how this is going to work. 69 00:04:38,390 --> 00:04:42,140 ‫So how do you can utilize this one village and it should work fine? 70 00:04:44,850 --> 00:04:52,590 ‫Now here, what we can do is we can utilize our mediocrity and then define our marks on minimum wage. 71 00:04:52,860 --> 00:04:54,620 ‫So minimum wage. 72 00:04:56,690 --> 00:04:58,520 ‫As 70 percent. 73 00:05:00,110 --> 00:05:02,960 ‫But actually, as does this tolerance point. 74 00:05:03,050 --> 00:05:09,830 ‫That means about seven excel, we can have our own settings here, I can utilize this and I can just 75 00:05:09,830 --> 00:05:11,040 ‫use them. 76 00:05:11,720 --> 00:05:14,440 ‫So for all this, I it, this is going to work. 77 00:05:14,450 --> 00:05:21,260 ‫But as soon as we reach this minimum point 780 pixel, this will come in to play it back here. 78 00:05:23,130 --> 00:05:29,220 ‫So this is working fine, this is working fine now you can see it's not changing, so the size is not 79 00:05:29,220 --> 00:05:37,660 ‫changing here, I just took an example you can use as one room itself or maybe 1.5 them. 80 00:05:38,700 --> 00:05:42,300 ‫And here you can see it's increasing, decreasing. 81 00:05:42,300 --> 00:05:45,240 ‫But after reaching out to mediocrity, it's not changing. 82 00:05:45,630 --> 00:05:49,230 ‫So that's how you can add a limit to our calculation itself. 83 00:05:50,160 --> 00:05:51,840 ‫I hope this lecture was helpful. 84 00:05:52,080 --> 00:05:53,850 ‫And this is pretty important. 85 00:05:53,910 --> 00:05:55,500 ‫The hard part is important. 86 00:05:55,500 --> 00:05:56,400 ‫This part is OK. 87 00:05:56,630 --> 00:06:01,490 ‫We might use, we might not use or guess how art is utilized several times. 88 00:06:01,500 --> 00:06:06,000 ‫The court just gave us access to our viewpoint, which is important. 89 00:06:07,300 --> 00:06:13,300 ‫And nowadays you can understand that you both are different, pretty much different for different mobiles, 90 00:06:13,420 --> 00:06:16,300 ‫for different tablets and even with monitors. 91 00:06:16,720 --> 00:06:19,450 ‫We are working with tons of sites nowadays. 92 00:06:20,170 --> 00:06:25,420 ‫So that's why this part is important and you for falling and I see you guys in the next one.