learn Visual Studio code secrets

1. Class Intro: Are you using Visal Studio code editor and you want to enhance your productivity, then this class is foreign. If you want to explore the hidden secrets of this ID, then we can start our journey. We are going to learn about Amit, common palette, keyboard shortcuts, work spaces, and meaning. This class reveals hidden secrets about Visual Studio code editor and it enhance your coding journey. So finally, as you can see, we are in my computer screen. And here you can see, we already search VSCode in Google, we need to visit this website, code.visualstudio.com. Visual Studio code is a code editor redefined and optimized for building and Dvogging modern web and Cloud applications, and it's completely free, and it's supported by most of the operating system, Windows, Linux, Macs, and various operating system. This editor is made by Microsoft. And it come with a lot of features like Dvagging, syntax highlighting, intelligent code completion, Snipts, code refactoring, and embedded kit. It was first introduced 2015, nearly six years ago, and it personally my favorite code editor. Most people call it text editor codeditor otherwise ID. This is the introduction video of Visual Studio code editor. In the next tutorial, we are going to learn how we can download and install it. Thanks for watching this video, stay tuned for our next tutorial 2. Install and Download VS Code : So welcome back, guys. Once again, I'm in my computer screen. So let's click on this website. Hey, remember, Visual Studio code and Visual Studio is different. Do not try to download Visual Studio. You need to download Visual Studio code. As you can see, it's free, built on open source and runs everywhere. And here you can see the download options. If I click on this Dbrown, here you can see, you can download it for Macau's Windows operating system, Linux operating system. I am a Windows user, so I'm going to download it for Windows. I'm going to press the download button. As you can see, our download processes start. It's take one or two minute to download it, so I'm going to pause this video. So as you can see, our download process is complete. But before I try to install it, let's see the documentation. If you click on the setup option, here you can see different method, how you can set up visual studio code on your operating system. If you are Linux user, then you need to follow this method. Similarly, if you are Mac user, then you need to follow this method. And it's not a very difficult process. I am Windows user, so I'm going to follow this method. So now let's open the download folder and try to install it. Here you can see the Xi file of Visual Studio code. Then just press rightly. Now you need to press Open, otherwise, run as administrator. You can choose any option. I press Open. If you have time, you can read the license agreement. Otherwise, you can continue with upset the agreement, and then you need to press next. Then you need to select the destination location. You can install it any folder or any drive, but I would like to go with Deford option. I press next. Then it ask for Start Menu folder, and I would like to go with Deford option. I'm going to click Next. If you want to create Desktop icon, then you need to tim this option. With that, if you want to open your file or folder, just using Ratti option, then also you need to tim this option and then you need to press next again. Here you can see the additional tax selections. What do we already select in our previous stay. Then I'm going to press Install option. As you can see, our installation process already started and it takes a little time. Here you can see our installation process is complete and I'm going to uncheck Lunch Visual Studio code, and I'm going to click Finish. You don't need this x setup anymore, if you want to delete it, yes, you can. We complete our installation and download process. In the next Tutorial, we are going to open our Visual Studio code first time. Thanks for watching this video, stay tuned for our next tutorial. 3. Visual Studio code interface : Hello, guys. Good to see you back. It's time to open Visual Studio C. Here, I'm going to press right click and I'm going to press Open. Here you can see the window. If you open this application for first time, you can see this kind of layout. Here you can choose your own theme. If you'd like to work with light thin, then you can choose light, otherwise dark, otherwise, high contrast. I would like to go with dark, so I select dark theme. You can choose light, high contrast, as you wish, but I would like to go with dark. These are all features of this application, and if you would like to sync with other device, you can choose this option. Here you can sync your application with other devices, and then you need to check for shortcut options. If you would like to work with shortcuts, then you can select this one. Shortcuts are very useful for productivity. It's reduce your coding time and increase efficiency, and then you need to check reach support for all your languages. Here you can see all the supported languages, Javaspeed Python, Java, TypeScript, C plus plus, JSON, Power Shells, et cetera. In this section, you can see how can you manage your code? How can you pick your folders? How can you pick your files, et cetera? And then I'm going to praise next section. This is not the very special section. It's just tell you what can you do with this application? I'm going to check all these options. For productivity, you can open side by side window, you can install Git. Also, you can customize your shortcuts. After check all of this, you need to press Mark Done. Now you can see these options. From this section, you can create new file, you can open a file, you can open folder, and also you can see your recent work in this portion. Also, it's not a very important page. If you don't want to see this portion again, then uncheck this option and close this section. Let's zone this application a little bit. Otherwise, you cannot properly understand navigation bar and our icons. Sound phrase Control plus and Control plus again. I hope now you can see it they. Let's start it. Here you can see the sidebar and here you can see the navigation bar. Otherwise, you can call it activity Val. As you can see, our first option is exploder. If I click on it, you can see no folder op. Here you can manage your folder and files. Our next option is search option. From here, you can search any keyword. Also, we have a replace option. If you want to replace any word or a character, yes, you can. Our next option is it control. Otherwise, you can call it source control. You can do all of it related stuff from this section. Let's talk about our next option, which is Dvag option. If you are Python programmer or JavaScript developer, then it would be a very good option for your niche. You can devug your code from this section. Let's talk about our next option, which is extension. From this section, you can download a lot of extensions. As you can see your install extensions from this section, install. Extensions are very useful. It increases your productivity and save your valuable time. We are going to learn about it in our upcoming tutorials. Our next option is account option. In this option, you can sign your account, and then come the most important option, which is manage. From here, you can get command palette option. Using Common palette, you can do anything what you want to do. You can open any file. If you want to execute any function from command palette, you can. If you want to change themes, yes, you can. From command palette, you can do everything. Let's talk about our next option, which is settings. From settings you can manage autosave font size font family, tap size. You can change a lot of settings according to your needs. Let's talk about another important option, which is keyboard shortcut. Keyboard shortcuts are very important in visas to your coordinator. From this section, you can found all the shortcuts and also you can edit the shortcut keys. If you want to change any shortcut key, then you need to press this pencil icon, and here you need to type your shortcut. I will teach you later how can we change these shortcuts? Let's talk about our next options. Here you can see uses snippets. Our next important option is color theme. If you want to change the theme, you can use this one. Suppose you want to go with lighter theme, then you can use this one. You can choose any theme. It's a pre. I would like to go with dark one. Dud default. Our next option is file icon theme. If you want to change the file icons, for here you can change the file icon themes, and also you can install file icon themes according to your need. These are the most important manage option that you should know as a beginner. This is it for this tutorial. In our upcoming Tutorial, we are going to talk about menusation. Thanks for watching this video. Stay tuned for our next tutorial. 4. Visual Studio code menu : Hello, is good to see you. Once again, I am in my Visual Studio code editor, and in this tutorial, we are going to learn our menu section. First of all, you will see the file menu above the Visual Studio code. If I click on the file section, you can see a dropdown option. Here you can see New File. Using this option, you can create new file in your current dotting directory. If I click on New File option, basically it's going to create a simple text file. Let me show you. Here you can see, it's just create a simple text file. For now, I don't need this text file, so I'm going to remove it. Let's see our next option, which is New file again. If I click on it, you can see the terminal. Now you can create your new file using terminal. You need to press Control N. Here you can see it create a new file title one. I don't need this file, so I want to delete. Let's see our next option, which is new Window. If I click on it, here you can see it create another window. Sometimes we need multiple window for our projects. Let's see our next option, which is open file. If you want to open existing file, you can select this option. I don't have any file. That's why I'm don't going to click it. Similarly, if you want to open a folder, in that case, you can select this option, open folder. Then if you want to open a file from your Wpress, then you need to select this option. Open Wpress from file. Next, it will provide you the recent files. Using this option, you can select your recent work. If you want to clear your recent files, yes, you can using this option. Here recent file open. Let's talk about our next option, which is add folder to your work. But before the question is, what is workplace? Workpas is the collection of one or more folders that are opened in VSCode Wingo. From the next option, you can save your workpice if you want to duplicate your workpice using this option, and then come the normal Save option, Seb Sebas SIBO, auto Seb, and then come the imported option preferences. From this option, you can manage settings, online service settings, telemetry settings, extensions, keyboard shortcuts, migrate keyboard shortcuts, user snipis, color theme, file icon themes, product icon themes, and also you can turn on sync setting. Basically, you can control all of this option from these settings. Here you can see the similar settings in our manage option. Let's talk about our next option, which is close Window. If you want to close this window, then just press this option, and our last option is Z. If you want to it your visual studio code editor, then you need to press Z. This was the introduction of file Min. Let's talk about Edit Min. If you click on Edit Bo, here you can see undo, redo, cut, copy, paste, find replace finding files, replace in files, toweling lines, towel block command, and me. These are all very useful option, but most of the time we use shortcuts for it. Let's talk about our next menu option, which is selection. If I click on it, here you can see, select all. For that, to select your all code, you can press Control A, and you know that. Then come expand selection. If you want to expand your selection, then you need to press shipped all right arrow next one is shrine selection. For that, you need to praise shipped all left arrow. And this come copy line down. And this come Copy line up. Using this option, you can create the line copy above this line. In the opposite way, we have copy line down. This is the most important option. At the opposite way, we have another option which is copy line down. If you want to copy a line below the current line, in that case, you can use this option. Don't worry. We are going to learn all of these in our practical session. This is just a introduction video of manubar. Our next option is Bob line. Using this option, you can move a line upward. Similarly, we have another option which is Bob line down. Using this option, you can move your line down over. If you want to duplicate your selection, then just select this option, duplicate selection. Then come at cursor above, at cars are below, at cars are two lines. Our next option is add to next occurrence, add to previous occurrence, select all occurrence and manure. Let's talk about our next menu, which is view. From view, you can open command pallet. Also you can control appearance. This is the most important part. From this section, you can change your application layout. If you want to make it fully skin, yes, you can also you can turn on Zeno. With that, you can center your layout. And also, if you want to hide your maneuver, yes, you can. Just uncheck this option. If you want to show your sidebar, let me show you if I check this option, you can see the sidebar. This is the most one of the important section that you should remember. If you want to hide status war this untick this option. As you can see, it hide our status bulb. Our status bulb is very important, so I'm going to visival it. Appearance, I want to show my status bulb. Also, if you want to hide your status bulb activity, you can untake this option. Now, if you want to show the terminal, in that case, just go to view section, appearance and turn on Show Panel. Now you can see our terminal. Let's talk about our next option, appearance, show side panel. If I take this option, you can see the side panel. For now, I don't want to show the side panel, so I'm going to turn open. Appearance, untie side panel. Hey, we missed another important option, which is activity word, appearance, show activity b. If I untick this one, you can see there is no activity word on our lip side. I hide our activity bar. I want to show my activity ward. It is very important for me. Show activity word. Let's see our next options. View, appearance move sidebar right. Here you can see the sidebar. If I press this option, let me show you you can see the side bar in our right side, but I one by side bar in our lip side, so I'm going to move it lip side. Let's see what is our next option, view appearance. Panel position. If I make it lab, you can see the difference. Now you can see our terminal panel open, let side of this display. Also you can change the terminal position. Appearance and now I want to form a panel right side. So to press right. Now you can see our right side of our application, but it is good if we place it bottom. I'm going to position it bottom panel position bottom. Let's see our next options. View appearance. Our next option is align panel. From this position, you can align your panel center justify lab right. Next important option is zoom in and Zoom out. If I press zoom in, you can see the font size. It increases the font size. As it increases the layout size. Similarly, you can zoom out this section, appearance Zoom out. Let's see our last appearance option, which is reset Zoom. If I click on it, it's going to reset our Zoom and back to it is default position. Our next view option is ital layout, and we're going to learn all about it in our practical session. Here we have some options. Split up, split down, split let, split right, split in group, single, two column, three column, two row, three rows, grid, two row right, two column bottoms and slip layout. We are going to learn it in our practical session. When we create our first file and type SM code, then we are going to apply all of this. Let's talk about our next option, which is exploder. If you want to turn on the explorer, you can see this is our explorer. This is not so very important one. Once again I'm back to our view, our next option is search Wins this option. Then come another important option, and then come another important option, which is source control management. From here, you can control the version. If you are familiar with it, there is very useful voding. Our next option is run. If I click on it, you can see the run option. It's mean devuging option. From here, you can run and devug your code. Let's talk about our next option, which is extension, and we've already learned about it. We can download extension from this place. Let's see our next options, which is problem. If I click on it, it's going to open my terminal and redirect to problem section, as you can see. And our next option is out. It's also redirect to terminal output section, then Diva Console and terminal. Let's see our last view options, which is show mean Map, show Bet cams, render Whit press, and render Contle characters. We're going to learn about it when we start our core. Let's talk about our next menu option, which is go. Herc switch editor, switch group, go to file, go to symbol Workplace, go to symbol Editor, a lot of stuff. We're going to learn about it when we start our code. Our next option is run. Here we can start out Dvagging run without Dvagging. You can add configurations. You can toggle Bekcoins. You can add new Bitcoins, enable all breakpoints, disable all breakpoints, removable all breakpoints and menu. Our next menu option is terminal, and it's a very important one. If I click on it, our first option, new terminal. If you want to create a new terminal, then you can select this option. As you can see, now we have one terminal. But if you want to create another terminal, then go to terminal section and create new terminal. Now you can see we have to two terminal, this one, and this one. Similarly, if you want to split both of this terminal, then you can select this option. As you can see, side by side, we have to two terminal. Our next option is run tug. If you want to run your tugs in your terminal, then you can select this option. Then come run Btugs, run active files, and also you can run your selected code using this option, run selected text, and then come so running tugs, restart running tugs, terminated tugs. At least we have configured tugs, configured default bead tugs. Let's talk about our last menu option, which is health. If I click on it, first it show Get Start. If I click this option, you can see the Get Start page. Next, we show our commands. Here you can see all the commands in our terminal. And then come documentation, Edited playgrounds, release node, keyword, shortcut preference, and you can see video tutorials and teams. If you want to see the version of your application, just click A section. Here you can see the version 1.65 0.2. Also, if you want to update your application, here is the options. Check for updates. So this is a little introduction of our menu section. We are going to learn more about it when we start our practical cool. So thanks for watching this video, stay tuned for our next tutorio. 5. Project folder in vs code : Hello, guys. Good to see you, B. Once again, I'm back in my visits studio Cody Detro in this tutorial, we are going to learn how we can create Project folder and open Project folder. So let's see how it's work. At first, you need to click on Explorer icon. If you already have a project, then you can praise Open folder. I don't have any project. So inside my downwarad folder, I want to create another folder, new folder. And my folder name is Vs Demo. I'm going to set this one. Now you can see a panel. It asks, do you trust the author of this file in this folder? If you trust this folder, then check this one. And click this button. Yes, I trust the author. That's it. Now you can see in our Exploer section, we are in our current dating directory and our directory is VS demo. This is our project folder. At first, I'm going to show you how can we create folder in our current watting directory? To create a folder in our current Dorting directory, we need to click in this icon in the folder icon, this one, New folder. If I click on this, it asks a folder name. Now we need to pass a folder name and our folder name is CSS. Once again, I want to create another folder, which is Js JavaScript. Otherwise, you can create new folder using Rat Click on your current working directory, Ratli on it, and here you can see the option, new file or new folder. I want to create a new folder. Just click a new folder and type your folder name. I want to create a folder for media, so I'm going to type Media. So as you can see, we create total three folder, CSS, Js, and media. Suppose I want to create another folder inside the media folder. In that case, we need to select the media folder. Just click on media folder, and now you can see the arrow side. It's downward. Then again, click on folder icon and you need to pass folder name. And our folder name is images. Just press Anchor. Now inside the media folder, we have images folder. If I show you my file manager, let me show you. Here you can see, there is a folder named Bs Demo. If I open this one, you can see total three folder, CSS Js media, and inside this media folder, we have images folder. I hope not clear for you how it's work. You need to remember one thing. If you want to create your folder inside your current working directory, then do not select any other folder. Otherwise, it's going to create a folder inside this folder. Before you create the folder, you need to click on outside, and then you can create your folder. Suppose you select CSS folder and try to create another folder, outside the CSS folder. In that case, it's not going to create folded outside the CSS folder. You need to remember you need to click outside of this folder, then you need to try to create another folder. Now let's create some file in our current working directory. For that, we need to click this icon, the file icon, new file. If I click on it, it as a fine name, and we need to provide a file with their extension. I'm going to create a stable file, our file name is index dot HTML. If I set this file, you can see the extension. Here you can see we create our table file successfully. Now I want to create a CSS file inside the CSS folder. For that, we need to select CSS folder, and then we need to praise this icon, and our CSS file name is style dot CSS style dot CSS. And press Enter to set this file. So as you can see, we create our TML file in our current working directory, and also we create our style file inside this CSS folder. And using this icon, we can refresh our files and folders. And if you want to collapse all your files and folder, then just press this one. This icon collapse folder in Explorer. You can see the result. We have another method that we can create folders. Not only that, we can create folder using Path. Let me show you. New folder, I want to create a folder named Dave. Demo slash n insetive demo folder, I want to create another folder, which is SAS. If I click on it, here you can see inside the demo folder, we have CS folder. And if I show you my current working directory, you can see the result. Inside this demo folder, we have a CSS folder. Following this method, you can create files and folders. Now I'm going to type some code in our estimL document. Here I'm going to type shape excluation sign, and then I'm going to press Enter. As you can see, it creates a estim boiler template. This is the power of VS code. We don't need to type multiple line of code for that. I already create our meta tags. So let's type some code inside the body tag. H one is at the H, I'm going to type hello world. I'm going to set this file using Control is, and also you can set this file from here. Go to File Menu and say, Let's see our next option, which is search option. I'm going to click Search icon. From here, you can search anything. If I search word here, Word, it going to search this word in your bold project. And as you can see, it find the word in our estimate document. And if you want to replace it, yes, you can. I want to replace OR with sir hello sir, SIR. Then I'm going to execute the replace. So I want to press this icon. Here you can see alert box. Press one occurrence across one file with sir, and I'm going to press repressive. Now you can see in my index that estimate file, it replace OR with sir. Hello, sir. So from this section, you can search and replace your keyword in your word project. Our next option is Git, and we are done win and we are not going to cover this section in this tutorial. It's a different topic. Later, I'm going to create a separate tutorial for this section. And then come Diva. We are going to learn this section later. Whether we work with JavaScript file or a Python file. So this is it for this tutorial. In the next tutorial, we are going to cover extensions. What is extension and how we can install it and use it. So thanks for watching this video, statue for our next tutorial. 6. Visual Studio code Extensions : Good to see you guys. Once again, I am in my visual studio code editor. And in this tutorial, we are going to learn extensions. Now the is, what is extensions? VSCode extensions let you add languages, divergers, and tools to your installation to support your development workflow. These are all popular extensions. Let's install an extension, and our extension name is VS code icon. I'm going to type icons. This one, I want to download this one. If I click on it, here you can see a lot of options. Here you can see details and feature of these extensions. You can directly install extension to click this button. And here you can find what is the actual function of this extension? Using this extension, we can change our icons, especially file icons and folder icons. Let's install this extension. I want to click Install Button. After clicking Install button, we need to wait for long time. And remember, your computer should be connected to the Internet. As you can see, our extension has been installed, and now it asks for activate this extension. I'm going to select VS code icons, and also I'm going to activate it. So you successfully install and activate our extension. After complete the install process, you cannot see the install button again. You can see disable button, otherwise, unstall button. If you don't like this extension, you can unstall it. Otherwise, you can disable it. So for now, I don't need this space, so I'm going to remove it. And now I'm going to jump into the Exploder option. Here you can see the icons. If you notice you can see, it's change our STL file icon. Also, it's change our folders icon. For CSS folder, it display CS's logo, and for JS folder, it display J's logo. And if I open the media and images, here you can see images logo. It's helped us a lot to organize our file and folders. Let's install another useful extension, and our extension name is Live Server. This one, Live Server by iTibe. If you are web developer or a designer, then this extension is very useful for you. Let's install this extension. So I click Install button. It's tick time to install. So you successfully install our live server extension. After install this extension, you can see a option, go live. Basically, this extension going to create a live server for your web applications. If you work with small web project, then you don't need bulky software like Zam, web and many more. Now let's back to the Explode us section and try to open our DestL document with Live server. Index dot TML, and I want to open it with Live Server. So after select this page, I'm going to click on GoLive as you can see, it creates a live server and also it provide a port. Double five double zero. If I show you my web page, here you can see it print our H one tag, hello sir. If you notice the URL bar, here you can see our file served by a server, not from our file manager directory. Now, let's back to the extension section. At first, I'm going to remove this keyword from the search war and here you can see our installed extensions. Totalu install to extension in our codiorF this section, you can manage your extensions. If you want to unstall it, then select this extension and click on Unstall button. These are very useful extension for me, so I don't going to remove it. I hope now it's clear for you what the extensions are and how we can download and install it. Thanks for watching this video. In the next tutorial, we are going to learn about Command Palette. Stay tuned for our next tutorial. 7. Vs code command palette : Hello, guys. Good to see you back. Once again, I'm in a disaster io coordinator. In this tutorial, we are going to learn what is the use case of Command Palette. From Command Palette, you can search any file. Let me show you how. Just remove the greater than sign and search file name. From here, you can search any file. And here you can see all of this file, which is in our current working directory. Suppose you are working with a big project and you have a lot of files in your current working directory. In that case, you can search the particular file using Command Palette. Just type the file name. Suppose I want to open style Dot CSS file. So here I'm going to type style Dot CSS. Style. As you can see, it already has as the file name. Here you can see it's Openur file. If you use angle bracket hair, then you can execute a lot of functions like show incoming calls, show upcoming calls, and many more. You can add line command function breakpoint. Suppose you want to change the color theme of this application. In that case, you can use command palette. Just type color, and you can see preparenss provide color theme. If I click on it, you can see a lot of options. Dark dark visor studio, MonocyRd If I use Monocy here you can see the theme effect. If you want to open Command Palette using shortcut, yes, you can. Just praise Control shape B. I want my dark colored theme back, so I'm going to change the color theme once again. Dark plus, default dark. For our next example, I'm going to open my estimate file. Here you can see I open my STL file. But in your right side, here you can see the minimap of this file. Here you can see the minimap of this Tamil file. I don't want to show this minimap in my screen, if you want to hide it, you need to go view option and then hide minimap. Now you cannot see the minimap. Let's show the minimap again. I'm going to view option and show minimap. Now I want to hide this minimap using our command palette. At first, I'm going to press Control Sheet P. Then after redundant sign, I'm going to type minimap. Here you can see Toggle Miniman. If I click on it, you can see it a hide our minimap. Similarly, if you want to show this minimap, just go to your command palette and then Toggle Miniman. Now it show your minimap once again. As you can see, I open a TML document. And if you want to search any particular tag, yes, you can use Command palette also. Let me show you how. At first, I'm going to turn on the command palette using Control Ship P and then I'm going to revoke greater than sign. And here I'm going to type sheet at the rate. As you can see upper type at the rate, it suss all the estimate tag one by one. Head tag, meta tag, meta tag again because we have total three meta tag in our page. That's why it suggests three meta tag. Then title tag, body tag, and H one tag. If I sell a title tag, you can see it redirect to title tag. Similarly, if I open my JS folder, here you can see a script dot js file. And if I open this JavaScript file, here you can see we have total two functions. Suppose you have a lot of functions in your script file. And you want to find a particular function, but it is very hard to detect. Then once again, you can use Command Palette. Let me show you. Control Ship P, I'm going to remove the greater than sin, and here I'm going to type at the rate. And here you can see it already sust our function names and our function name and our first function name is 2 Celsius and our second function name is my function. These are called symbols, and it's song tutor two result. If I choose M function, as you can see, it's redirect to my function. From here, you can directly switch any variable, any function. From here, you can directly switch to any variable or any function. Basically, we use it when we have a lot of functions. So this is the basic use case of command palette. You can do a lot of stuff using it. You can open terminal, you can execute functions. You can add line command and manual. So this is it for this tutorial. In the next tutorial, we are going to learn about settings, these options. So thanks for watching this video. Stay tuned for our Next tutorial. 8. Visual Studio code settings : Hello, guys, good to see you back. Once again, we are in resource Studio code editor. And in this tutorial, we are going to learn about user studio settings. As you can see, in settings, we have to two options user and workspace. Here you can set different settings for user and workspace. And here you can see a lot of options related settings, text editor related settings, word badge related settings, window related settings, features related settings, application related settings, security related settings, and extension related settings. Similarly, if you click on Workspace option, you can see nearly same settings and in this tutorial, we are going to change user related settings. Here you can see there are a lot of options related settings. We don't going to cover all of these in this tutorial. Basically, I'm going to cover what we need as a beginner. As you can see, our first commonly used setting is autosave. Default it turn off autosave. If I click on this dropdown, here you can see there are three options up the delay on focus change, on Window change. Suppose you write your code and after writing your code, you forgot to save the file. In that case, if you choose upped option, then after some time, it automatically save your file. And if you choose on focus change option, then it's going to save the file when it lose the focus. If you choose on wind to change, then the editor automatically save when the window lose focus. If you are always forgot to save your code, then you can choose this option. Otherwise, I would like to go with default settings because when I finish my code, I always press Control A to save my file. Let's talk about our next settings, which is font size. But before I'm going to open my index table file. As you can see, by default, our font size is 14 pixel, and here you can see the result. If I increase the font size, 22 pixel and then set this file, and then back to the stable page, you can see the result. Now you can see the font size. Now it's look much larger than previous one. Let's back to the settings, and I'm going to use default font settings, which is 14 pixel. Because I'm going to show you the best method, how you can increase your font size. If I back to the estimate page, here you can see now our font size is 14 Bixel. If I press Control plus, as you can see, it increase our font size. As you can see with font size, it increases our application layout size. I want to say it overall Zoom our application, but I don't want it. I'm going to praise Control minus. I want to scale my font size using scroll. For that, we need to go back settings so you can search the particular settings from this search word our setting them is mouse wheel, mouse wheel, Zoom this one. If I check this option and then go back to the tv file and press Control, if I rotate my mouse wheel, you can see the result. With my mouse wheel it increase our font size. If I press Control and rotate my mouse downward, you can see it decrease the font size. Using this method, you can control your font size. Definitely, it's a very good method to control your font size. Let's back to the settings option again and I'm going to remove the Qard from our search and back to commonly used settings. Our next setting is font famine. From here, you can change the font. You can choose any font here, but I would like to go with default one. Our next option is tap size. By default, our tap size came with four. Let me show you what is tap size. If I show you my index dot StiverFle, here you can see the tap size gap. Here you can see the tap size gap. As you can see, if you count the characters, one, two, three, four, it's cap total four character. If you want to increase the default tap size, yes, you can. Back to the settings. From here, you can increase or decrease the tap size. Again, it's not a very important settings. Let me show you another important settings which you need as a beginner. For that, you need to lick on texted or option. And here you can see a option name formatting. Just click it. Here you can see some important options. Format on paste, format on Save, format on Sab mode, format on type, and menu. If you check this option, then when you paste your code in your file, then automatically format your code. Personally, I don't like this option. Our next option is format on sale. If you check this option, then when you save your file, it automatically format your code. Let me show you the example how it works. So I'm going back to my index dot HTML page, and here I'm going to create a deep tag. Dev and inside this dip tag, I'm going to create span tag, span, and inside the span tag, I'm going to create paragraph tag. P. As you can see, it's not properly formatted. When I set this file, as you can see, it automatically format our code. So this is the use case of the settings. There is another format settings which is format on type. If you check this option, then while you type your code, it automatically format your code. Let me show you another important settings. I'm going to click on commonly used settings. Here you can see a option named WordAp. Using these settings, you can control how line should wrap. What does that mean? Let me show you an example. For that, once again, we need to back to the TML file here I'm going to type Blurin. Gm 100. If I press Enter, it create a dummy sentence using 100 word. If I set this file, as you can see, it's completely blank. But the question is why. If you want to see your code for that, you need to move the horizontal scoleword. Now you can see your code. As you can see, our content are overflown from this text area. If you want to visible your content inside this area, in that case, you need to turn on WADAp. Let me show you. Go to view section and then check WADAp. As you can see, now your content is completely visible and there is no horizontal bar. Similarly, if I uncheck this option, as you can see, again, our content overflown from this typing area. Let's back to the settings and if I turn on this option, Watrap on and back to the index dot estimate file, here you can see our content are perfectly wrap. If you increase the font size or decrease the font size, no matter what, it's always wrap your content. Let's talk about our next settings, which is terminal font size. Now the question is what is terminal? Here you can see an option terminal. If I click a new terminal and here, if you type some text, you can see the font size. As you can see it looks pretty small. For that, we need to search a setting, which is terminal integrated font. I'm going to type here. Here I'm going to type terminal integrate it dot font. Here you can see the terminal font size. If you increase the font size 18 pixel, you can see the result. Now our terminal font size is 18 pixel, but I would like to go with 14 pixel. If you want to change settings manually, then Wizard Studio would provide JSON file. Let me show. The changes we have made here, we can do the same changes in JCNFle. If you scroll a little bit, you can find options this one. Edit in setting JCNFle. If you click on it, you can see this JCNPage. From here, we can change all of these settings. If you remember, we turn on our Watrap That's why edited WATRp is on. Also our format on save option is on. That's why it's written true. If you remember our mouse wheel Zoom settings, we check our mouse weel Zoom settings. That's why it's written true. If you remember, we use an extension for our explorer icons. That's why you can see Warwnsdt icon theme, Vase code icons. Whatever changes you made, you can see all of these changes in the setting dot Jason file. Remember, in setting dot Json file, you cannot see the default settings. You can only see the settings that you have changed. Basically, you can change any setting from this JSON file. If you want to turn off, mouse will zoom. Yes, you can. Just repress through with fv. That's it. In future, if you search something in stack overflow, then you might get a JSN data like this. You need to use the JSNode here, and we may need to use the JSN code for some extensions in the future. It's a very important file. You can find this file on your C drive user, your PC, then app data, then Roaming folder, code, user. Inside this user folder, you can find the setting GSN file. So this is our settings, and you can change the same settings in your workplace also. But basically, I would like to change settings in my user, not the work. And these settings are enough as a beginner. So thanks for watching this video, stay tuned for our next studio. 9. Visual Studio code keyboard shortcut : Hello, guys, good to see you back. Once again, I am in my Visual Studio coordinator. In this tutorial, we are going to learn the most important part of this tutorial, which is keyboard shortcuts. To find keyboard shortcuts, you need to click on manage, then you can find keyboard shortcuts and just click on. Here you can see all the keyboard shortcums. I know you have already knowledge about keyboard shortcums. These are most basic shortcuts, copy Control C. For card, control, as you know, for sad we use Control A. But did you know what is the shortcut to save all the file at once? For that, we need to find save all. Save all. Here you can see a option, save all files. And as you can see, there is no shortcut created for this option. I'm going to create a shortcut for that, which is control is A. I mean control, save all and then I'm going to press Enter. Let's see how we can use this shortcut. I'm going to make some changes in my TML file. I'm going to provide a space. Also, I'm going to make some changes in my CSS file, red to gray. And also I'm going to make some changes in my script file, 07. Here you can see in my explorer icon, totally we made three changes in three file. That's why it flash three. Let's use our shortcut and try to save all the file at once. Our shortcut is control is A. As you can see, after pressing Controls A, it save all the file at once. That's why you cannot see the number in our explorer. If I show you my stylus Sass file, it's gray. If I show you my index root estate file, it's also save our file. Using Control A, we can save only our activate file. But using shortcut, we can save all the file at once. Let me show you another useful shortcut, which is copy line down. This is one of the most useful shortcut ship down arrow. Let's see what can we do with this shortcut? I'm going back to my styler CSS file, as you can see, I select this line. Here I'm going to praise Shep all down arrow. As you can see, it creates a same copy below this line, but I want to change Cpline down shortcut key. For that, we need to go back the keyboard shortcuts and here we need to praise this on, this edit icon. Now we need to make our new shortcut for copyine down, which is Control D. But the problem is this command is already exist, and here you can see the command, Control D, at section to the next find match. It can make some trouble when you use the shortcut key. We need to change the shortcut key, and I'm going to change it. I'm going to create a new shortcut key for next find, which is ship down arrow. Thus, here we have interchange the shortcut keys with each other. Basically, I don't try to remember all the shortcut keys. I remember those shortcut keys that I use most. Let me show you another most important shortcut key, which is add line command. It's a very useful shortcut key. Using this shortcut key, you can add line command. By default, the shortcut key is Control K, Control C. Let me show you how we can use it. If I back to my style or SASS file and use this shortcut Control K, Control C, you can see the line command. It add a command in this line. But for this particular job, I want to create my own shortcut key. I'm going to edit this one, which is Control Z. I'm going to press Enter. So if I back to my CSS file and apply Control Z, you can see it's also at a command in this line. According to your niche, you can find out your shortcut key and also you can change your shortcut key. This is the beauty of Visual Studio code editor. This is it for this tutorial. In the next tutorial, we are going to learn about terminals. Thanks for watching this video, stay tuned for our next tutorial. 10. Vs code terminal : Hello, guys. Good to see you back. Once again, we are in my Visa studio codeditor in this tutorial, we are going to learn about terminals. From here, you can open a new terminal. If I click on new terminal, as you can see, it creates a new terminal. With that, if you want to create multiple instant, yes, you can. Just click on the last slide and create another terminal. You can create multiple terminal as you want. As you can see, we are in second instance here I'm going to type some random text. In our first instance, I'm going to type some number one, two, three, four, five. I just type the number and it takes because when I jump into another terminal, you can understand the difference. Sometimes we need both the terminals, one for font end server, another one for backend server. By default, this terminal use PowerShell, Windows PowerShell. Not only that, you can change terminal color also, right click on it, and here you can see the option, change color. For our second terminal, I'm going to use green color. Here you can see the difference. Here you can see now our terminal, I can fill you with green color. Not only that, also you can rename the terminal lab, right click on it, and here you can see the rename option. Now I'm going to rename this terminal lab and I'm going to type back in. Using color is very convenient to switch. You can identify your shell very easily. Now, if you want to split your terminal, I want to say at the time you want to open both the terminals, then click on this option, split terminal. There you can see side by side, it open to terminal. For now, I don't want to split, so I'm going to delete this one. If you want to move your terminal in your editor area, then you can use this option, move terminal into Editor area. If you click on this option or terminal, move into the editor area. If you want to kill your terminal, then you can use this option. Kill terminal. Otherwise, you can use delete button. This one. If I click on this drop down, here you can see Power Shell, command prompt, JavaScript terminal, split terminal, and many more options. Sometime you need to open Command prom. Then in that case, you need to press this option. Let's open a command prom. I'm going to click on it. Here you can see is open a command prom, here you can see the difference between command prompt icon and Powershell icon. Let me show you one thing. When I try to create a new terminal, by default is use Windows PowerShell, but I don't want to make Windows Powershell default option. In that case, you need to go this drop down option and here you need to select your default profile. From here, you can see it command from power shell, Java St de terminal, Windows powershell. I'm going to see it common from. Now if I create a new terminal, as you can see, by default, it's open Windows command from, not power shell. For now, I would like to go with default one, so I'm going to change the setting. Which is Windows Power Shell. Once again, if I create a new terminal, as you can see, it's create Windows Powershell from this icon, you can maximize your terminal. If I click on it, you can see it take whole space. Also if you want to kill your terminal, then over on your terminal limb and press delete icon. Remember, if you close your terminal, it's not mean you delete all the terminals. I do not kill your terminals. Let me show you. If you go back to the terminal section and click on new terminal, as you can see, with old terminal, it creates another new terminal. Because we do not kill our terminal, we just close our terminal panel. If you want to kill your terminals, then you need to press this Digital icon. If you have problem in your code, you can check out through this problem section for output, you need to click on this section output section. If you want to dug your code, in that case, you need to press Diva Conso. This is the basic introduction of VSCode terminal section. Io, now it's ser for you. Thanks for watching this video, stay tuned for our next studio. 11. Vs code additional feature : Hello, guys. Good to see you. Once again, we are in my Visa studio code editor. And in this tutor years, we are going to learn some good features that's going to help you law. As you can see, we already open our index table file, and as you can see, we use classes in our tags, container plus one plus two class three, but I want to replace all the class with ID. In that case, we have accordance. I want to change all the class at once. For that, we need to select one of this class, and then we need to press righting here you can see a option, change all accordance. Otherwise, you can press Control. If I select this option, as you can see, it select all the classes. Now I'm going to replace all the classes with ID. B ID. As you can see, it replaces all the classes with ID. This method is very helpful when you want to change your function name, otherwise, any tag or wrong keyword. So when you have to change any keyword at once, in that case, you can use all occurrence option. Just select the keyword and then praise right N, and here you can see the option, change all occurrence. Let's talk about our next feature, which is go to line. As you can see, we have total 26 line and most of the time we work with very big projects like thousand 2000 line projects. In that case, it's very hard to find the exact line number. But in Visual Studio cod editor, it's very easy. Just click Control and Z. It is the short card as you can see, it open our command palette. Then after Colon, you need to tap the line number. I want to jump into the line number nine. I want to press nine. As you can see, it already select our line number nine. If you click on it, also you point our Karza in that position. Let me show you our next useful features, which is function definition. For that, we need to open our JS file. As you can see, in our JS file, we have to two function, 2 Celsius and my function. And here you can see, we call our functions. Also we open our function in our conso. Assume that you have hundreds of function in your code, and then it's very hard to detect how you create your function. In that case, you can use function definition option. Just select the function name and then right click on it, and here you can see, go to definition. If I click on it, as you can see, is redirect to our function, 2 Celsius. But if you want to open the function definition panel without moving, in that case, you need to select the function, then click on it, and here you can see a option named Peak. Then click on this option and select Peak Definition. As you can see, it flash a new Window and is redirect to definition of this function two cells, yes. From here, also you can change your functions. After changing your function, you can save, and then you can delete this window. This is the power of Visual Studio code editor. Now, let me show you our next feature. For this, I'm going to open another file or styled CSS file. As you can see, we open total three file, but I don't need this style CSS file, so I'm going to close it. But accidentally, I close JavaScript file. It was a very important file for me, and I also forgot the file name which I closed. I need my file back, but in my current ordering directory, there are a lot of files. In that case, we can use a short. For that, we need to praise Control Shift T. As you can see, it reopened our closed file. And you already learn about this option, which is split window. If I click this option, as you can see, as you can see, we split our window, and now we are able to see two file advance in our screen. You can create a multiple split according to your screen size. It's up to you how many split you want. This option is very useful when you have wide screen. Now I'm going to show you how you can open your project folders. For these, I'm going to create a new Window, and I'm going to close this one. Say, you already know a basic method that how we can open Project folder. For that, we need to go File Menu and then we need to select this option open folder. From here, we can open our folder. This is our project folder. Just select the folder and then press Select folder. As you can see, it open our folder. But I'm going to show you to other method that how we can open our project folder. So I'm going to it this visual studio code. For that, we need to go inside to our project folder, and then we need to press right. Here you can see an option open with CO, and then you need to press this option. As you can see, it open our project folder. And if you do not show this option when you right on your folder, it means you do not check this option when you install sult Studio code. Let me show you another method that you can open your isalstuio code application. First, you need to go inside in your project folder, and then you need to type CMD in your folder plot, CMD. And then press Enter. As you can see, it open your command palette. And here you need to tie Codespace dot. Code space dot, and then press Enter. As you can see, it open our application, and also it open our project folder. This is it for this tutorial. In our upcoming Tutorial, we are going to learn more shortcut keys. So thanks for watching this video. Stay tuned for our next tutor. 12. Visual Studio code additional shortcut key : Hello, guys. Good to see you back. Once again, we are in my Visual Studio code it. In this tutorial, we are going to learn more shortcut keys. Basically, use pull one. Here you can see inside the paren container, we have total three deep items, one, two, three, but we decide to move our third deep item above the second Dev item. Then usually we need to cut this one and we need to paste above the second Dev item, but we do not want to do that. So I'm back to the previous position using Control Z. And now I'm going to show you the shortcut key how we can move this line. If you want to move it upside, then select the line and then press Alt up arrow. As you can see, this shortcut key move our code upward. Similarly, if you want to move it downward, then select the line and press Alt down arrow. This shortcut key move our line downward. Suppose I want to move this continent D inside this third dB item or that we need to move it downward. We need to select this line, and then we need to press lt and down arrow. You can see the result. If you want to move it upward, press and then pace up arrow. Now let's talk about another useful shortcut key. Suppose I want to copy this H one tag, but I want to copy this upward using shortcut key. In that case, we need to select this line and we need to press ship Alt, up arrow. As you can see, it made a copy of H one tag. By default, Visual Studio came with this shortcut key, and you already know that, you can change your shortcut keys. Similarly, if I want to copy this line downward, in that case, we need to press ship Alt down arrow. Not only that, you can copy multiple line at once. Just select those lines, how much line you want to copy and then praise ship hauled, otherwise up arrow, otherwise down arrow according to your niche. As you can see, I copied three of this line downward, if you want to comment out any line, in that case, you need to praise control forward slash. As you can see it comment out this line. And if you want to remove this comment, in that case, you need to follow the same shortcut key, Control forward slash. You can use the same shortcut key to comment out multiple lines. Now I want to select all the hello word one by one. In that case, we need to select the word, and then we need to press Control, and then we need to press Control D to select the next hello. If you want to select the other hello word, in that case, you need to press continuously Control D. It's going to select all the hello word one by one, but we have a better solution for that to select all the word at once. For that, we need to select this word hello and then we need to press and we need to select change all occurrence. As you can see, it select all the hello word at once. At the same time, we can change the word and we can type new word. But if you want to select the word one by one, then you need to press Control D. Also, you can select multiple selection with another method. Select the word and press all and then select this section where you want to select. As you can see, at the same time, we select total four lines. This is another shortcut method. If you want to cut any line, in that case, you need to press Control X. And if you want to press this line anywhere, you know the shortcut Control V. And if you want to highlight any line, suppose I want to highlight this title line, then we need to press Control L. As you can see, it highlight the line. So these are all basic shortcut keys, and these are very important one. Definitely, shortcut keys are very impactful for our productivity. So this is it for this tutorial, thanks for watching this video. 13. Emmet vscode part 1 : Hello guys. Good to see you back. Once again, we are in my Visual Studio code edito. In this tutorial, we are going to talk about A. It's a invi feature of Visual Studio code editor. So let's open our index dot HTML five, and I'm going to remove all the code from this document. So to select all the code, and I'm going to remove. And now I'm going to show you our first emit example. For that, I'm going to praise sheet Snovon sign. Here you can see emit abbreviation, and if I press Enter, otherwise, press tab, as you can see, it creates DML boiler template. So we don't need to type multiple lineup code to create this boiler template. Now inside this body tag, I'm going to create H one tag H one. As you can see, if I press Enter, it complete our tag. It's happened because of Amit. Now inside this H one tag, I'm going to type hello world. And now you decide to create five I tag. For that, also you can use AMI. Just you need to type I, star, five. If I press tab, otherwise Enter, as you can see, it creates five Litag if you try to create a Diptag with class, yes, you can. Let me show you how. Deep dot, now you need to put your class name. Our class name is myClass. If I press Enter, otherwise tab, as you can see, it creates a deep tag with class name, and our class name is MyClass. You can save a lot of time using Amit. It's a built in feature of Vs code editor. You don't need to install any plug in for that. Also this code editor come with autosazation. Let me show you. I'm going to open a js file, scrip dot js. Now I'm going to call it function. Here I'm going to call To Celsius function. If I type PO, as you can see, it such as the function name too Celsius. This is the introduction video of Amit. From the next tutorial, we are going to learn about Amit in depth. So thanks for watching this video, stay tuned for our next tutorials. 14. Emmet vscode part 2 : Hello, guys. Good to see you back. Once again, we are in my Visual Studio code editor, and this is another tutorial related Emet. And in this tutorial, we are going to learn more advanced features about Emet. At first, I'm going to remove this SMS structure. And now I'm going to create the same estimus structure with different method. In our previous method, as you know, we type exclamation sign, and then we press Enter otherwise tab. But in this tutorial, we are going to create the estimate structure typing TM HTML. As you can see it recommend table five. If I select this one, as you can see, it creates the same TML boiler template. If you want to create a deep tag with class, in that case, you need to type Dev dot className, my class. This is our previous method, but in this tutorial, I'm going to show you another method. You don't need to type the tag name, you need to type dot my class. Then you need to press tag. As you can see, it creates the same deep tag. In our previous method, we need to specify the tag name. But in this method, we don't need to specify our tag name, but it's only work with deep tag, not the other tag. If you want multiple class in your tag, yes, you can. Suppose I want to create a headed tag, or class name is class one. With that, I want to add another class. For that, you need to use dot once again, and then you need to type class two. If I press Enter, as you can see, it creates H one tag with two class, class one and class two. Similarly, if you want to create a tag with ID, in that case, you need to type Dev hashtag and your ID name. ID one. If I press tab, as you can see, it creates a deep tag with ID one. If you want to create class and ID at once, in that case, the, if you want to provide IDF then type has your ID one. With that, if you want to provide class, then you need to press dot class name. Class one. If I press Enter, as you can see, it creates a deep tag with ID one and class one. As you know, TML five came with big tags like footer. In normal way, you need to type Footer. But if you use AMT in that case, just you need to type TR. If I press Enter, as you can see, it creates Puta tag. So you can use Short fromm of this tag. Similarly, for header, we need to type HDR. If I press Tab, as you can see, it creates header tag. Am came with a lot of shorthand of hot tag, and I'm going to tell you about it later from where we can get it. Now let's create a paragraph, P. Inside this paragraph, I'm going to type a sentence. This is Para. This is the normal way to type content in our tag. But if you use Amit, in that case, you can type like this, your tag name, P and inside the ala prass we need to provide our content. I'm going to type hello world. If I press Enter, as you can see, it put our content inside this paragraph tag. This is the benefit of using AMI. If you want to create this tag with class, yes, you can. Just you need to type p dot your class name. Class one. Then inside the Calirass you need to type your text. Hello world. At the same time, you can create class ID, and also you can put your content. Everything become easy after using AMT. You can put your content easily. You don't need to remember your tags, and also you don't need to worry about your closing tags. This is it for this tutorial. In the next tutorial, we are going to learn about more. So thanks for watching this video. Stay tuned for our next tutorial. 15. Emmet vscode part 3 : Hello, guys. Good to see you back. Once again, we are in my Visual Studio code editor. In this tutorial, we are going to working with child elements. How can we easily create child elements with the help of emit? At first, I'm going to select all the code inside this body section and I'm going to remove it. Suppose inside the dip tag, I want to create paragraph tag. In that case, you need to type D, greater than sign and your tag name, which is P. If I press, as you can see, inside this dip tag, it creates paragraph tag. Let me show you this example once again. So after Dip tag, inside this deep tag, I want to create UL Child tag. Then inside the L child tag, I want to create another child tag, which is Eli. If I press Enter, as you can see, inside this dip tag, we have child, which is UL and inside this EL tag, we have another child tag, which is Eli. Now DB is our grandparent. UL is our parent and Eli is our child. Now with that tag, I want to put content at the same time. For that, we need to follow this path. B, then greater than Sine after greater than sine child tag. O child tag is P, and I want to put content inside this P tag. After P tag, we need to use calibss inside this calivss I'm going to type hello world. If I press tart, as you can see, inside this deep parent tag, we have child tag, which is P, and inside this P tag, we successfully put our content, hello world. Now, let me show you another example. I'm going to revoke this one, and here I'm going to type B greater than Sine UL, greater than Sine Inside this UL tag, I want to put AI, AI and inside the sculyss I'm going to type item. But I want four LI tag inside this UL tag. In that case, we need to use multiplication sign, multiply by four. If I press Enter, as you can see, inside this deep tag, we have UL tag inside this UL tag, we have total four LI tag. This method was good, but this is not the dynamic solution. I want to say it repeat the item fourth time. It doesn't frant item one item two item three, because it's a static process. But with the help of emit you can make it dynamic. Let me show you. So inside this L tag, I want to create LI tag. Then inside the Cress, I want to type IM once again. IM, but this time, I'm going to use dollar sign, and I want to multiply four, if I press Enter, as you can see, upturn item, it print item one, item two, item three, and item four. It dynamically put numeric value for these items. In our programming language for this job, we need to use loops. But in AIT in a single step, we can get this result. Remember, you can multiply your tag, just use multiplication sign. Suppose you want H one tag three time. In that case, H one, multiply with three. If I press Enter, you can see the result. Let me show you another demonstration. But before, I'm going to revoke this one. You already learn how we can create multiple child element in a single line using Amit. But this time, I want to put content in every tag. For that, we need to type our parent tag, Dev then inside the alirass we need to put the content. This is v. Then greater than sine P tag. Inside the alirass I'm going to type this is Pera. If I press Enter, as you can see, we successfully put content in our parent tag, also the child tag. Not only that at the same time, you can assign ID and class to these tags. Let me show you. I'm going to type DH tag for ID, our ID is my ID. Then data then sign our child tag, which is P. Inside this child tag, I want to put some content and our content is, this is para. Also, I want to assign a class to this P tag. So I want to use dot, and our class name is my class. If I press Enter, as you can see, first, it creates our parent tag, and it also assign a ID, my ID also you can see it assign a class to our paragraph tag. So this is it for this tutorial. In our upcoming tutorial, we are going to talk about siblings, how we can create siblings structure using AMI. So thanks for watching this video, stay tuned for our next tutorial. 16. Emmet vscode part 4 : Good to see you guys. Once again, we are in my Vis studio code editor. In our previous tutorial, we'll learn about how we can create child elements using Amit. But in this tutorial, we are going to learn how we can create siblings structure in HTML with the help of Amit. Let me show you the example what I am trying to talking about. I want to structure like this, Dev then after Deep tag, I want to create paragraph tag. Then after paragraph tag, I want to create H one tag. Basically, we call it Sibling structure. Now the question is how we can create this structure using the help of ame. For that, you need to use last sign. Let me show you. Deep las P plus H one. If I press Enter, as you can see, after Dep tag, it creates paragraph tag, and after paragraph tag, it creates H one tag. If you want to put content and ID at the same time, you can follow our previous method. Let me show you. Be, I want to say, has tag, my IT. Then we need to use plus sign. Our next tag is paragraph tag. Then inside this paragraph tag, I want to put some content. This is Para. With that, I want to create another tag, which is H one. So I'm going to use plus sign again. And after H one, I want to assign a classmate and our class name is my class. If I press Enter, as you can see, it set a ID for D. Also, we put our content in our Padnp tag. With that, we set a class in our H one tag. Using this combination process, you can create multiple lineup code in a single line. So this is the power of emit. It definitely increase your efficiency. Let's talk about froms, how we can create froms using Amit. If I type from, as you can see, by default, it come with action attribute. But with action attribute, also, I want to define method. In that case, we need to type from Cool, you can choose your method. Get otherwise post. I'm going to choose post method. As you can see, it come with method post. Now I want to create input tag in this form. I'm going to type input. Just input. By default, it come with text type. Not only that, you can use shortcut for that. Just you need to type InP. If I press Enter, as you can see, it already provide type name and ID, but I don't want text input type all time. I want checkbox input t. For that, you need to type input, then you need to use Colon and you need to select checkbox, and you can see the result. Input type checkbox. As you can see, it suzsis all the input type. Input button, input checkbox, color, date, hidden, image, month, number, et cetera. And if you use input a, it provides input type submit. Now let me show you another most invertent feature of emit. Which is dummy text. Suppose I create a Ptag and inside this Ptag, I want some dammi text. For practice and development purpose, most of the time we need dummy text, but we do not understand what we will write in it. Most of the time we copy some line from Internet. But with the help of Amit, you can use Lam dammi text. Let me show you. Inside this P tag, I'm going to type Loren. And I'm going to press Enter. As you can see, it provides multiple lineup dummy text. Not only that, also you can control the word. Let me show you. I'm going to review this one. Once again, I'm going to type loading. And this time, I want total 25 word, so I'm going to type 25. If I press Enter, as you can see, as you can see, totally provide 25 word. If you want 300 word, in that case, you need to type Lorin 300 and it's going to provide 300 word Opera. Let me show you another example how we can use this Davi text with a Li tag. For that, I'm going to type D rather than UL. Inside this UL tag, I'm going to type Lim. And I want to six word. I want to press six. After six word, I want to repeat it total four tide. I'm going to set a class named Mt ITM. Multiply by four. If I press Enter, as you can see, inside this dip tag, we have UL tag, and inside this UL tag, we have total for I tag and it also put different damit all of this LI tag. This is it for this tutorial. I hope now you understand how we can use AMI. Thanks for watching this video, stay tuned for our next tutorial. 17. Vs code additional info : Hello, guys. Good to see you back. This is the last tutorial related so studio. Can you see the blinking cursor clearly? Our blinking cursor is barely visible in our line. We can make it more visible. Let's see how. For that, we need to go to the setting option. I'm going to click on this menace section, and here you can see the settings. Now we need to search a keyword, which is Carsel. As you can see in our first option, Carselbnking. From here, you can control the Carsal animation style. Here you can see a lot of animation style, win smooth, pause, expand solid. I'm going to select expand. With that, I'm going to change Kurzel style also from line to block. If I back to ICS's file, you can see the cars style, how it slow. Now our cursor is much more visible from our previous mode. So from this setting option, you can change the cars style. But I would like to go with default one. I'm going to select line and I want to select blink. Now, let me show you other important options. Suppose you want to directly jump into the media folder and you want to open this media folder with File Explorer. If you want to open this folder in your File Explorer, just press click, and then you need to select Reveal in File Explorer. As you can see, it open the folder. This is a good option to open your file. If you want to open your terminal in a particular folder, in that case, you need to select open in integrated terminal. If I select this option, as you can see, it open our media folder. Inside this terminal. We don't need to type CD command for that. We can directly open our folder inside our terminal. There are a lot of options that you can learn in VS Cody Deo. Over the time, you will become an expert. Now, let's jump into the documentation section. As you can see, once again, we open the official website. Now I'm going to jump into the doc section. From here, you can learn how you can set up this application on your Linux operating system, Macos operating system, Windows operating system, Raspberry Pi operating system. If you jump into the get start section, here you can see some intro videos. How you can start this application. From this section, you can learn how to get started, how to code, some productivity tips, personalize how we can use extensions. We already learn about it in our course. If you click on Tip and Teks, here you can see some basic tips and tricks. How can we use Command Palette How can we use keyboard shortcuts and many more. We already learn about it in our tutorial. From this thin section, you can learn how you can change your themes from setting section, you can learn how to change settings. So basically, I learn all the shortcuts and tricks from this documentation section. So I will always tell you to follow the documentation section. Thanks for watching this video.