1 00:00:00,530 --> 00:00:01,190 ‫Hey, there. 2 00:00:01,280 --> 00:00:02,030 ‫Welcome back. 3 00:00:02,360 --> 00:00:07,820 ‫Now let us in Mustang, how to up in a practical way with our current concept that we discussed. 4 00:00:08,570 --> 00:00:14,270 ‫Now first thing is I'm going to create a new folder and I'm going to shift all my thesis file inside 5 00:00:14,270 --> 00:00:14,930 ‫that folder. 6 00:00:15,620 --> 00:00:20,510 ‫Now there are two answers that you will see different people or different company organize their file 7 00:00:20,510 --> 00:00:23,480 ‫differently, some directly key this year. 8 00:00:23,480 --> 00:00:30,410 ‫Along with this achievement file, some create style folder, which is called style, and then keep 9 00:00:30,410 --> 00:00:32,150 ‫all their files inside this folder. 10 00:00:32,420 --> 00:00:39,040 ‫Are there are chances you will see folders like assets, and some keep all their files inside this asset? 11 00:00:39,320 --> 00:00:42,830 ‫So basically what happened is they created their asset folder. 12 00:00:43,070 --> 00:00:46,970 ‫Inside this folder, they create media as well as styling. 13 00:00:47,240 --> 00:00:51,140 ‫So inside media, you will have all the images inside styling or style. 14 00:00:51,140 --> 00:00:52,810 ‫You would have all cease-fires. 15 00:00:53,300 --> 00:00:54,890 ‫So I'm going to remove this. 16 00:00:56,880 --> 00:01:02,040 ‫I'm going to just create a folder names style for now, let's call this a style. 17 00:01:02,970 --> 00:01:06,870 ‫And I'm going to move all my success inside this file folder. 18 00:01:08,480 --> 00:01:15,590 ‫Now, the reason I'm taking this pre-med project is so we can understand how to convert things and also 19 00:01:15,650 --> 00:01:16,970 ‫how to write new things. 20 00:01:17,570 --> 00:01:21,620 ‫So this is the first step that I have moved everything. 21 00:01:22,010 --> 00:01:26,570 ‫Now, all the drama that we are going to do will be inside this file folder. 22 00:01:27,710 --> 00:01:28,100 ‫OK. 23 00:01:28,690 --> 00:01:29,730 ‫Know everything is fine. 24 00:01:29,760 --> 00:01:38,240 ‫But let me change this, so we are going to hear go inside our style folder and then inside out of style 25 00:01:38,240 --> 00:01:39,030 ‫or CSIS. 26 00:01:39,050 --> 00:01:40,040 ‫Remember this point? 27 00:01:40,460 --> 00:01:46,670 ‫And one now I'm going to comment my response to rosiest because we will be combining everything inside 28 00:01:46,670 --> 00:01:48,100 ‫our style or courses. 29 00:01:48,530 --> 00:01:53,070 ‫OK, now let's jump back, jump back to this nonsense. 30 00:01:53,540 --> 00:01:59,060 ‫And have you ever have options regarding different topic like variables make sense, inheritance ends 31 00:01:59,060 --> 00:01:59,750 ‫and few other? 32 00:02:00,320 --> 00:02:02,120 ‫OK, let's start with the basic one. 33 00:02:02,150 --> 00:02:03,170 ‫It does variable. 34 00:02:03,530 --> 00:02:05,570 ‫But before that, let me create a new file. 35 00:02:06,950 --> 00:02:10,520 ‫And I'm going to call this US style as S6's. 36 00:02:11,570 --> 00:02:16,310 ‫Remember, it's style dot x, remember this point? 37 00:02:18,980 --> 00:02:25,310 ‫And just remove everything from my style or CSIS, because this will be created by the convergence of 38 00:02:25,850 --> 00:02:28,340 ‫our C-spine, remember this point? 39 00:02:29,090 --> 00:02:32,380 ‫So we are not going to write anything inside this file. 40 00:02:33,090 --> 00:02:35,210 ‫Let me pick up carpet. 41 00:02:36,240 --> 00:02:40,170 ‫And paste this inside out of this, save this one, save this one. 42 00:02:40,500 --> 00:02:42,090 ‫Now this file is empty. 43 00:02:42,600 --> 00:02:49,170 ‫Our style doors, he says, is empty and we are not going to edit anything whatever we need to do. 44 00:02:49,230 --> 00:02:52,350 ‫We will do insider style Doc S6's. 45 00:02:52,710 --> 00:02:58,440 ‫And then by this point, the other thing is, if you need to connect multiple files, you can do that 46 00:02:58,440 --> 00:03:02,280 ‫with the help of a mod or there will be few other things that we are going to discuss. 47 00:03:02,760 --> 00:03:07,020 ‫So what I'm going to do is I'm going to utilize this file only now. 48 00:03:07,020 --> 00:03:10,050 ‫Once you are working with this access file, you will see this. 49 00:03:10,260 --> 00:03:13,750 ‫Watch SAS icon remember the extension? 50 00:03:13,750 --> 00:03:16,500 ‫We installed this one now. 51 00:03:16,500 --> 00:03:20,350 ‫This extension is going to help us get this stuff. 52 00:03:20,880 --> 00:03:26,100 ‫Now, if I click this one, what it is going to do is every time we do any changes, it is going to 53 00:03:26,100 --> 00:03:28,620 ‫convert a precious file into CSIS. 54 00:03:29,400 --> 00:03:32,760 ‫So that's the main task of this extension. 55 00:03:33,390 --> 00:03:39,180 ‫For now, if I click here, you'll see a stock working on a just watching. 56 00:03:39,180 --> 00:03:43,140 ‫That means everything is going to be generated here inside styled CSIS. 57 00:03:43,470 --> 00:03:48,780 ‫And now if I do any change, this will automatically save the only time it is watching, remember. 58 00:03:49,140 --> 00:03:55,650 ‫So you can now jump onto styluses so you can see everything is generated automatically, and you are 59 00:03:55,650 --> 00:04:01,110 ‫also going to see these render effects that we discussed during browser come back compatibility. 60 00:04:02,550 --> 00:04:05,370 ‫They are automated and you don't need to write them. 61 00:04:05,640 --> 00:04:08,820 ‫They are auto generated for different browser. 62 00:04:08,850 --> 00:04:12,850 ‫Here we are working for our Internet Edge as well as Explorer. 63 00:04:13,340 --> 00:04:16,500 ‫Ah, here we are, working for Chrome as well as Safari. 64 00:04:16,890 --> 00:04:19,830 ‫So you will see all these changes automatically. 65 00:04:20,220 --> 00:04:24,990 ‫I hope you are the first idea why it is important to utilize S6's. 66 00:04:25,410 --> 00:04:30,510 ‫Neither Baker now you don't need to do that, but you should be aware of what are the changes that it 67 00:04:30,510 --> 00:04:30,990 ‫is doing. 68 00:04:31,260 --> 00:04:32,670 ‫You can see the first changes. 69 00:04:33,120 --> 00:04:35,910 ‫This whole web getting itself, and that is automatic. 70 00:04:35,910 --> 00:04:41,840 ‫We are not going to touch dots this way and everything will be inside on S6's. 71 00:04:41,880 --> 00:04:42,300 ‫OK? 72 00:04:43,020 --> 00:04:46,560 ‫Let's talk about the first point, which is variable now. 73 00:04:46,560 --> 00:04:49,500 ‫By default, we have variables in access. 74 00:04:49,520 --> 00:04:52,110 ‫We can use double dash, then the final variable. 75 00:04:52,650 --> 00:04:56,600 ‫But with the help of our S6's, we can do that. 76 00:04:56,610 --> 00:05:02,430 ‫All you have to do is use Carlesimo and give our variable name, for example, here why I want to create 77 00:05:02,430 --> 00:05:03,300 ‫a background color. 78 00:05:03,990 --> 00:05:05,400 ‫Let me say the color. 79 00:05:06,690 --> 00:05:09,100 ‫And provide a background color, let me say this one. 80 00:05:09,900 --> 00:05:11,040 ‫Let me copy this one. 81 00:05:11,260 --> 00:05:17,730 ‫I see this is watching every time I see it, it is going to watch. 82 00:05:18,000 --> 00:05:19,160 ‫And we can close this. 83 00:05:19,170 --> 00:05:20,610 ‫We can do several sittings. 84 00:05:20,620 --> 00:05:23,220 ‫So all you have to do is just jump onto settings. 85 00:05:23,730 --> 00:05:30,210 ‫Jump on to settings and how you need to such a move like SAS compiler. 86 00:05:31,300 --> 00:05:37,990 ‫This is the one I knew will get multiple option, the first option that you need to do is here inside 87 00:05:37,990 --> 00:05:39,550 ‫your edit and Jason. 88 00:05:40,090 --> 00:05:42,610 ‫Click here and convert it into default. 89 00:05:42,940 --> 00:05:44,420 ‫This is your generator map. 90 00:05:44,440 --> 00:05:45,640 ‫Just done it to follow. 91 00:05:45,790 --> 00:05:46,810 ‫Remember this point? 92 00:05:47,290 --> 00:05:50,440 ‫So this is going to be your first setting, which is generate map. 93 00:05:50,890 --> 00:05:51,940 ‫Just done it off. 94 00:05:52,510 --> 00:05:59,200 ‫The second thing is you can also just remove this awkward window that we are going to get every time 95 00:05:59,200 --> 00:05:59,950 ‫we do anything. 96 00:06:00,400 --> 00:06:04,840 ‫Now, if I try to change anything, maybe let me create another background color. 97 00:06:05,720 --> 00:06:07,510 ‫Maybe call this our second regular. 98 00:06:10,580 --> 00:06:16,620 ‫And if I save this one, you can see now we don't have any type of terminal also deceived. 99 00:06:17,210 --> 00:06:21,280 ‫So you can utilize this setting, which is known as show output window. 100 00:06:21,290 --> 00:06:23,810 ‫If you want this output window, you can just check it. 101 00:06:24,050 --> 00:06:30,110 ‫And if I try to remove this one and say we are going to get this done, this domino is helpful if you 102 00:06:30,110 --> 00:06:31,820 ‫want to see any type of error. 103 00:06:32,360 --> 00:06:37,790 ‫Since I'm recording this tutorial, I'm going to keep this tunnel open so we can see different types 104 00:06:37,790 --> 00:06:40,300 ‫of errors if we do any OK? 105 00:06:40,460 --> 00:06:42,860 ‫These two setting remember what we know? 106 00:06:42,890 --> 00:06:44,360 ‫Second thing is generate map. 107 00:06:44,690 --> 00:06:46,690 ‫Make sure you change it to false. 108 00:06:47,210 --> 00:06:51,080 ‫Remember, this should be false and then say, that's it. 109 00:06:51,470 --> 00:06:53,450 ‫These are the two setting and all settings. 110 00:06:54,020 --> 00:06:56,380 ‫OK, so this is the first change that we did. 111 00:06:56,390 --> 00:07:01,640 ‫We created a variable and now I can utilize this variable instead of this color. 112 00:07:02,510 --> 00:07:04,900 ‫And here I can directly save this variable. 113 00:07:04,910 --> 00:07:08,200 ‫And every time we are going to save me, I want to get this out window. 114 00:07:08,630 --> 00:07:09,410 ‫Close this one. 115 00:07:10,250 --> 00:07:14,630 ‫Now here we have added this variable basically in our X-File. 116 00:07:15,230 --> 00:07:23,300 ‫And if I jump on to my style or CFS, you can see instead of variable, we have the exact color. 117 00:07:24,500 --> 00:07:27,050 ‫Right click and splitter down on the right side. 118 00:07:30,180 --> 00:07:35,520 ‫Here you can see, not CSI, we have this variable, and here we have the color directly. 119 00:07:35,700 --> 00:07:39,300 ‫So these are the changes that you will see automatically in your style. 120 00:07:39,310 --> 00:07:45,150 ‫Rodriguez's hair, you can see the variable, and it's also not defined because it will be converted 121 00:07:45,150 --> 00:07:46,470 ‫into values directly. 122 00:07:46,950 --> 00:07:48,060 ‫OK, that's done. 123 00:07:48,840 --> 00:07:49,830 ‫Let me get back here. 124 00:07:51,400 --> 00:07:53,410 ‫So that's the first thing about variable. 125 00:07:53,920 --> 00:07:59,380 ‫Now there are few other things like nesting super important concept, super, super important concept. 126 00:07:59,950 --> 00:08:04,040 ‫So we walk with parent and child relationship and our female. 127 00:08:04,510 --> 00:08:11,120 ‫So what we usually do is we create a testimonial and then inside we target this item or we fuss and 128 00:08:11,170 --> 00:08:17,560 ‫try to target this container and then we target this items whenever we are writing these type of cases. 129 00:08:18,550 --> 00:08:24,670 ‫So hard, if you see the example that we are going to work, we have this items, this whole item thing 130 00:08:24,880 --> 00:08:31,270 ‫and then inside this item, this item glass, we have image, we have paragraph four name title as a 131 00:08:31,270 --> 00:08:32,230 ‫less description. 132 00:08:33,310 --> 00:08:41,260 ‫Now, instead of mentioning like this item, image items, name items, title item description, we 133 00:08:41,260 --> 00:08:43,090 ‫know this belongs to item. 134 00:08:43,510 --> 00:08:46,510 ‫So what I can do is just take this image itself. 135 00:08:48,300 --> 00:08:51,970 ‫And keep this inside, I only here. 136 00:08:52,200 --> 00:08:54,990 ‫I'm going to add this inside item itself. 137 00:08:55,500 --> 00:09:01,800 ‫Now this is inside items, that means all the image inside out items will have these properties. 138 00:09:01,860 --> 00:09:05,550 ‫Remember something similar we can do with name glass? 139 00:09:05,700 --> 00:09:08,580 ‫Let me take this one and head off to my image. 140 00:09:08,610 --> 00:09:10,200 ‫Let me add it now. 141 00:09:10,200 --> 00:09:14,220 ‫Remember, there's all of this is inside out items. 142 00:09:14,970 --> 00:09:16,800 ‫So let me remove this point. 143 00:09:18,040 --> 00:09:20,740 ‫Now, similarly, I can do this with Biden. 144 00:09:20,950 --> 00:09:25,090 ‫I'm going to pick this one and take it inside my items. 145 00:09:25,990 --> 00:09:28,030 ‫The next one is going to be description. 146 00:09:28,210 --> 00:09:33,040 ‫I'm going to take this one and take it inside my items. 147 00:09:33,670 --> 00:09:38,740 ‫And if I save this one, every time we save, you are going to see the success message here includes 148 00:09:38,740 --> 00:09:39,160 ‫this one. 149 00:09:39,280 --> 00:09:40,420 ‫We have few other things. 150 00:09:43,020 --> 00:09:44,880 ‫Let me take this description. 151 00:09:45,530 --> 00:09:48,870 ‫And let me add it to the other description. 152 00:09:50,510 --> 00:09:51,260 ‫Atika. 153 00:09:52,370 --> 00:09:54,670 ‫And then remove all the unnecessary thing. 154 00:09:56,460 --> 00:09:58,940 ‫Save this one success. 155 00:09:59,310 --> 00:09:59,780 ‫Close. 156 00:10:00,210 --> 00:10:06,990 ‫Now how you can see all the child only elements that were in sight are item class. 157 00:10:07,990 --> 00:10:10,480 ‫I didn't say that item selected itself. 158 00:10:11,110 --> 00:10:13,190 ‫So that's the first important thing. 159 00:10:13,220 --> 00:10:17,730 ‫Now when you say this behind the scene in our CSIS. 160 00:10:19,030 --> 00:10:23,590 ‫This will be converted, so this will be converted as items. 161 00:10:24,220 --> 00:10:27,580 ‫I am you can see this is automatically converted. 162 00:10:28,030 --> 00:10:30,550 ‫The second thing is about this name. 163 00:10:30,760 --> 00:10:31,690 ‫This is converted. 164 00:10:31,690 --> 00:10:33,100 ‫What items name? 165 00:10:33,670 --> 00:10:36,280 ‫Then the other thing title, it is converted. 166 00:10:36,820 --> 00:10:38,710 ‫Description this is converted. 167 00:10:39,010 --> 00:10:43,870 ‫So you have this nesting option now at the time of writing this nesting. 168 00:10:44,530 --> 00:10:45,560 ‫This really helps. 169 00:10:45,580 --> 00:10:51,520 ‫Now you don't need to figure out, OK, what type of things I need to target because you have information 170 00:10:51,520 --> 00:10:53,170 ‫these images inside of items. 171 00:10:53,710 --> 00:10:56,350 ‫Similarly, this title is inside out items. 172 00:10:56,590 --> 00:10:57,670 ‫This helps a lot. 173 00:10:58,120 --> 00:11:01,150 ‫So that's where this whole nesting things come into picture. 174 00:11:02,290 --> 00:11:08,680 ‫Now, if you take this example, the example on the website, you will see that they're targeting a 175 00:11:08,680 --> 00:11:09,580 ‫navigation bar. 176 00:11:09,910 --> 00:11:14,680 ‫And they are directly targeting all the U.N. allies as well as attacks. 177 00:11:14,710 --> 00:11:16,600 ‫And this is a good example, actually. 178 00:11:16,840 --> 00:11:23,240 ‫And at the time of conversion, it will be now well, naturally as well as now the attack. 179 00:11:23,890 --> 00:11:28,210 ‫So this is important and I hope you got the idea how this is going to work. 180 00:11:29,340 --> 00:11:34,980 ‫Now, I hope you got the idea about these two points, which is variable, as well as nesting in the 181 00:11:34,980 --> 00:11:40,140 ‫next lecture, let us all to discuss about how Bisons modules and fewer that things are going to work. 182 00:11:40,710 --> 00:11:42,300 ‫I hope this lecture was helpful. 183 00:11:42,570 --> 00:11:43,600 ‫Thank you for calling. 184 00:11:43,620 --> 00:11:45,450 ‫And I see you guys in the next one.