Learn Visual Studio Code - VS Code from Beginner to Advance | Norbert Menyhart | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn Visual Studio Code - VS Code from Beginner to Advance

teacher avatar Norbert Menyhart

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

39 Lessons (3h 33m)
    • 1. Intro

      2:35
    • 2. 01-Course Overview

      5:21
    • 3. 02-What is Visual Studio Code & Why us it

      4:08
    • 4. 03-Download and Install VS Code on Mac & PC

      4:04
    • 5. 04-Basic UI Orientation

      5:46
    • 6. 05-Creating Opening Editing Deleting Project Folders and Files

      4:40
    • 7. 06-Changing the Display Language

      1:26
    • 8. 07-Save and Auto Save

      4:21
    • 9. 08-Grid System Splitting up the Editor

      4:39
    • 10. 09-Mini Map, Word Wrap, Zoom and Font Size

      6:25
    • 11. 10-Updates

      2:24
    • 12. 11-IntelliSense

      4:23
    • 13. 12-Emmet HTML & CSS Shortcuts

      17:47
    • 14. 13-Find and Replace

      5:02
    • 15. 14-Navigate the Code

      8:47
    • 16. 15-Intro to Extensions

      4:36
    • 17. 16-Essential Extensions

      14:12
    • 18. 17-Optional Extensions

      15:35
    • 19. 18-Environmental Specific Extensions

      13:45
    • 20. 19-Snippets

      20:04
    • 21. 20-Essential Keyboard Shortcuts

      5:17
    • 22. 21-Create you own Keyboard Shortcuts & New File Extension

      1:28
    • 23. 22-Import other Keymap extensions

      1:12
    • 24. 23-VS Code own Color Themes

      4:45
    • 25. 24-Extensions for Custom Themes and Icons

      3:52
    • 26. 25-Customizing your own Theme

      1:07
    • 27. 26-The Terminal

      6:17
    • 28. 27-Setting up Sync

      6:44
    • 29. 28-What is Node JS

      3:49
    • 30. 29-Getting started with Node JS

      4:59
    • 31. 30-Setting up Node JS

      5:08
    • 32. 31-What is React

      1:24
    • 33. 32-Installing React

      2:21
    • 34. 33-What is Angular

      0:38
    • 35. 34-Installing Angular

      3:36
    • 36. 35-What is Vue

      1:00
    • 37. 36-Installing Vue

      2:15
    • 38. 37-Setting up Python

      6:13
    • 39. 38-What is Python

      1:02
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

250

Students

--

Projects

About This Class

Why learn Visual Studio Code aka VS Code?

VS code is at the moment the most popular code / text editor on the market and it is FREEEE!

The fact that it is so popular means that it also has a insane amount of updates and Extensions which will speed up your coding!

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

----------------------------------------------------

What will you learn in this course?

  • Become a faster Developer

  • Gain fundamental skills of coding

  • Establish solid abilities with the command line

  • Increase Productivity

  • Understand why VS Code is the best choice today

  • Learn how to install VS Code

  • Become orientated to VS Code's environment

  • Learn VS Code short-cut keys

  • Gain the ability to adjust VS Code's interface

  • Learn how to Create files, folders, and workspaces

  • Essential VS Code Extensions

  • Connect git version control repositories with VS Code

  • Use VS Code for your git workflow process

  • Gain insight into writing code with VS Code

  • Learn to duplicate and move lines of code

  • Gain the ability to access VS Code documentation

  • Understand the command palette

  • Learn to use the mini-map and breadcrumbs

  • Gain insight into adjusting preferences

  • Learn how to Create Code Snippets

  • Learn error in VS Code

  • Learn debugging within VS Code for React Angular and Vue

  • Learn to create markdown documents in VS Code

  • Acquire the ability to find and install VS Code extensions

Requirements

  • PC or Mac

  • Internet connection

  • Basic web development knowledge is useful but not required.

  • Optional but recommended a Second Screen (old monitor, large Smart Phone, Tablet)

Who this course is for:

  • Web programmers and designers who want to use the best editor

  • New web developers looking for the best tools.

  • Experienced programmers who want to switch to VSCode

Meet Your Teacher

Hello, I'm Norbert.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hello friends for those of you who don't already know, my name is Norbert and I'll be your instructor for this course. In this course we will learn about Visual Studio code, the most powerful Coase slash tags that are out there. Now why use Visual Studio code? If you're interested in web development or crunching data with Python than Visual Studio Code is the perfect code slash text editor out there for you. And it's really because it's the most popular code editor out their views to the code has tons and tons of extension that makes our lives as code editors. It's more easier. Views to the cold would not make you a better coder, but it will definitely make your faster coda by using the most powerful extensions on the market. So together, we will learn about the following, how to download and install Visual Studio code will also make a full rundown of the UI, learning about what is where and what does it do, then I will try to increase your productivity by learning about things like IntelliSense, Emmett for HTML5 and CSS, and how to navigate the code quicker than we will install Visual Studio Codes, most powerful extensions. And I categorized them into three categories. Essential extensions, cosmetic extensions, them, but they're excellent. Then the third one, environmental extensions. So this is depending on if you're working in a premium and which framework you working in f that I would try to turn that knob and increased the productivity one level higher by learning about snippets and also creating our own snippets which just increase his productivity, the 100%. And of course, what is a code editor with shortcuts? And now I will show you real silicones more do shortcuts, how you can create your own shortcuts. And of course, if a common core analytics that is like anime or brackets or for example, sublime text, then you can bring your own shortcuts and install them in there. And of course, if you're getting tired of looking at same code all over again, then we will install a few themes which were just fresh enough that code for us. We will also learn about the integrated terminals and how to sync up different instances of visual pseudocode. For example, your one workplace than in another words, they are at home, they invocation and you'll still coding. You will have the same field all over the place. And we will also set up environments like says NodeJS with MPM, package manager, React, Angular, viewed, and of course, data crunching Python's. So let's get started with the most powerful code, either of their Visual Studio code C in the course, the bite. 2. 01-Course Overview: Hello and welcome to the course. In the next couple of minutes, we'll just take a short course overview in order for you to know what you're getting yourself into. We will get started with, well, talking about visual silicone, what it is, what it can do, what is good for, what is not good for. It's actually good for everything almost, well, you know. And then we will go ahead and download it, install it mag MPC, and get to know each other, or get the node, the UI actually in the UI will, will have a bit of basic overview. What is, where does what, but actually would also go deeper into the UI. And then we'll start creating, opening, editing, deleting PTEN project folders and files. Then we'll go ahead and save setup Alto, say set-up time says, then we'll change the display and also create a bit of a grid system. And of course, what is a program without updates? When should you do them? How often should you do them? Should do them automatically. How to avoid them and don't avoid them to excellent, believe me. After that, we will finally get into what is important visual pseudocode, IntelliSense, amazing. Emmett. Amazing. If you never used Amazon, never heard about him at Google avid Emmett a bit. You'll see it's a thing on its own and it makes you, well, not available extremely here, efficient coder makes your life much easier. Let us say about that. Also, we will learn how to navigate floor code and finding and replacing code instances. One of the most important features of Visual Studio Code are the extensions. You will see that readers could recall where we downloaded the bare bone that Visual Studio Code. Well, it's good for everything and nothing because you need to customize Visual Studio code for your environment or vegetable, REO, Python developer Iowa, front-end developer, backend developer. And we'll go through all of the extensions which I categorized into fee, which are essential extensions, optional extensions or cosmetic extensions, and environmental specific extensions for React for view, for Python and so far for node value omega. Well you need note, you need note, you just need note. There's no way around mode f that we got our extension setup. We need to get him into a pure snippets. Are you using only vanilla JavaScript or frameworks? You will snippets, snippets that are built in and will also customize our own snippets. And of course, what is a code editor widow shortcuts. You need to become a neon. The keepers of 2.2.2, NLP works. Never touched the Moussa. You will touch the last dollar apart it. Also, if you're coming from a different code editor, lie for example, Adam, I'll show you how we can import your atom settings and use them in visual pseudocode. And of course, if you get bored with how Visual Studio code looks or how your code looks, then we can customize it by customizing colors with existing colours, which are already built in into Visual Studio code. And then down a few pretty amazing custom themes and icons. Also, you can customize your own theme. Then we will get our integrated terminal, which is an essential tool in Visual Studio code. Now you can install also depending on PC or Mac user, you will have different terminals or command prompt as it's called in Windows. But no matter what you use, it's pretty much the same. Its only use of preference, but you need to know your terminal. If you didn't know this already, visuals through code can be syncs up. This means, no matter where you are, how many workplaces you are, you can have exactly the same experience of digital pseudocode in each instance or in each place that you're working on. If you wish to up your CSS gain, then we will also install Sass if you never heard about says, says stands for syntactically Awesome Stylesheets says is like CSS big product or CSS on sterols as we like to call it. Notice the auction just the preprocessor. You will not learn actual says here, but I will show you how we can install and PREMIS set up your environment for using SAS. F that will go to NodeJS. Talk a bit about NodeJS, what it is, what it can do and setting up our Node.js and NPM in our visual pseudocode. Then we'll go ahead and install React on Visual Studio Code. Also talk a bit about React. Again, you will not learn react here. You would just learn how to set up react if you want to use React later on. To seeing also angular. We'll talk a bit about Angular and then set up our environment in Angular. And last but not least, the view framework also what is you and how to set it up in Visual Studio code. After that, we will go into Python, set of Python, write a short helloworld Python. And then you're good to go. You're a Visual Studio code and not expert, but I pretty much know Visual Studio code at this point. So let's get started with the course. 3. 02-What is Visual Studio Code & Why us it: So what is Visual Studio Code and why should you use it, or should you use brackets or atom or Sublime Text? My opinion, right now wishes to recode is the best code editor out there. But I'm not married to my thoughts and my decisions. If this changes, then something else is the bad. And this was just my opinion. And with this being said, what is Visual Studio Code? Well, this artefacts Visual Studio Code is a lightweight but Paul for source code editor, which runs on your desktop. And it's available for Windows, Mac OS, and Linux. And it is also referred as VS code. So if you hear me in the future saying VS Code, I am referring to Visual Studio Code, of course. Now, please do not confuse this with Visual Studio tells something else. And as I said, this is available now. I'm on a Mac for now. And also each time I would give examples, I will also give examples for Mac and for PC. So because right now I'm on a Mac. This shows me that I should download it for a Mac. Now, if you click down here, you'll see you can choose any other download for Windows 65, for that, for the Windows 64 addition, M for Linux 64 addition. Now so if you click on other platforms, you will see here the download links. Now Visual Studio Code was created by Microsoft and big surprise, it's free. It's actually something created by Microsoft and it's free. And the cool thing about visuals clear code, because I use it mostly for web development. But it was built with something called electron. And let me show you Electron really quick. Electron is used to build cross-platform desktop application with JavaScript, HTML and CSS, or isn't this cool? But now back to Visual Studio Code, a quick thing about it. And also electron was used to build things like WhatsApp, the desktop applications. If you didn't know you couldn't have WhatsApp on your desktop. Which, which is a great streaming app. Macrosoft themes and sigma, which is also awesome. If want to create a web design. Now, let's move back to Visual Studio code. Now, it is not a full IDE, which means integrated development environment. Like for example, Visual Studio, which is specific for slip-ups plus or C sharp, but which can also be written in Visual Studio code. But it's like I said, a lightweight code slash text editor, which becomes more powerful, which with each add-on or extension that we will take a look at a bit later on. Now, when you downloaded, it takes up on the 200 megabytes. So on your drive, I almost said a hard disk drive, like in the good old days. Not like a couple of gigabytes which Visual Studio would take up. Now as I said, Visual Studio Code is at the moment the most popular code editor out there. That is why it also has clones of really useful extensions, like for languages C plus plus C sharp Go Java, Python. It has tools like JSHint, PowerShell. It has great debuggers for Chrome, PHP, debug, and key MatLab van, like foam, Vim, sublime tax. Intel js must add on Visual Studio, Eclipse, love them. It also has IntelliSense in it. It, as I said, you can debug. It can be integrated with GitHub. And it has a lot of amazing extensions. And it also comes with built-in support for JavaScript type script and no JS. And it has a rich ecosystem of extensions for languages and run times such as.net and unity, Yip, unity, that being that we build games with. So is there not a reason to use Visual Studio Code as a code editor? I don't think there is. 4. 03-Download and Install VS Code on Mac & PC: Getting up and running with Visual Studio Code is quick and easy. Is this small download. So you can install it in a matter of minutes and you are ready to run Visual Studio code. Now VS Code is lightweight and it should run, are most available hardware platforms out there. Now, let's go to Visual Studio code. So either you just typing code dot Visual Studio.com and I should get Visual Studio code. Now, as I said down here, depending on if you're a Mac or if you are on a PC. As like here, you can choose on Watch platform, there's a download it. And one quick note, there are two different downloads. As you can see here. It says here stable build. Now, what does this mean? The stable build is the build that is more stable, first of all, but it's the build where each and every add-on that is released is already debunked and it works smoothly. On the other hand, there's the insider edition. Now, I rarely, rarely used the insider addition, although it looks perfectly, but you do get each and every update it before others. So if using this table edition, you will get the updates a bit later on. And if you're using the Insight edition, it's OK, it's out there. Now, I will download and install the insider addition just to show you how this works, The Inside Edition and we will also go through this entire course. But there's literally no difference between the insert edition and a stable edition. I, for my part, use the stable addition. And it has only one reason. You will get in a insane amount of updates each and every month with the insider edition. I don't like that. So let's get started by installing it on Windows. Now, on Windows is pretty straight forward. You can just click here to download. And it was such a download wherever you choose on Tuesday, stop, save it, and as soon as the dollar that's done, click on it. Now let's go back to the Donald's and let's also download the insider edition so you can have both on your machine and you can see it runs on Windows 7810. So let's click on Download. And I'm going to choose the same path. You can choose whatever path you want. Obviously, you can see it's only 60 megabytes, is really small download. Now let's open it, install it, and accept and agree. Create or not create an icon doesn't really matter at open code inside of it. Yes, yes, yes, no, I don't want to register at path install. And after we're finished, we're going to launch it. And it's exactly the same thing as a stable build. So when you start out, you will see you will get credit with a starter celebrating page. And well, yeah, that's pretty much to it. Now. Let's also download it on Mac. Now, on my Mac, it's a bit different. Well, another download part, but the installation part, if your Mac, you already know that applications need to, need to be in an application. So let's, so let's download the inside there addition. Let's just save it somewhere. Download it. Now this has a bit more. You can see it has 90 megabits, but that's just nothing. Now if you download it, you need to install it. So let's open it. But as I said, there is a difference. The installation didn't happen where I want it. So you need to grab onto a Visual Studio code app and drag and drop it into your applications to just open up your applications. And drag-and-drop Fisher pseudocode in there. Now let's open it up. And as I said, it looks pretty much the same on both devices. Okay, so that's it for the download and installation part. 5. 04-Basic UI Orientation: Is this some basic UI orientation? So after we have our Visual Studio Code opened up, this is what you get. You get this welcome page, which you could also deactivate from down here if you want. So show welcome page on startup. If you uncheck this check box, you will no longer see it as just a basic information here. Start with New File, New Folder. We will talk about this later on when we're creating files and folders. But just now, you basically cannot create only files. You need to have them in a folder. So you also have your recent open up some project and just open up the project. We can have an example. So yeah, let's get started with our basic orientation. Now. This right here is the editor. And let me create a few new files. Folder, your new files. Let's go back in here and just create a few one. I just use a shortcut command on Mac and Control N on a PC. And we'll also talk about shortcuts a bit later on. Now, I've opened up a few files. I can type something in here or tie something in here. Go on the next line, hitting, Enter, typing something. If you ever use the Code Editor, you know the basics. But you could also split this up. So I could drag and drop this down here. And I can drag it, for example, down here, come on. Oh, there it goes. And I could type something in here and see what is happening here. So yeah. Now, we could also call them up and it would ask me, know, dawn to save you. Also don't want to see view and you now let me very quickly open up in another project, the existing project. So I can show you a couple of things. The sidebar down here contains different views, like the explorer to assist you while working on your project. Okay, so down here we have an error. If I'll do something like this, delete, no GUI, delete this one and say we have two errors. Ok. So let's undo this then. So from this the sidebar, but not the entire thing, because this one here is the Status Bar. The status bar it informs you about the open project and files that you edit. For example, here within our BW file, which is for black and white, 25th line. You can see here 25th line, and I'm on the first column. Now, if I were to this space, then this should change to two and so forth and so on. And it also tells me that I am a CSS, a SCSS language like click here because see auto detected. And yeah, you could also change it. Wouldn't suggested because the coordinator right now the texts that hey, this is CSS and it also SESS and it also validates it. Be cause if I would now go into JavaScript file seen here, well, now it tells me that we are in a JavaScript file. And also, if I never get alone, you will see the lines changing and the column changing. If I select something that it would tell me that I selected form line 21 to 30 face I'm ending on line 43 I selected will have 13 selections. Now down here, we should also have a panel, but we'll talk about the panel a bit later on when we are also going to install R, Well R command or terminal depending on Mac or PC. And next up we're going to talk about this part right here. So let me close it up. And this entire thing on the left side is called the active bar. As I said, it is located on the left, on the left hand side. And this lets you switch between given instances. And this lets you switch between views and kids you additional context specification indicators like the number of outgoing changes. For example, if we had kept installed here. Now let's go over what it contains. So the active bar contains the Explorer, which are just clicked on. So if you click it explorer, it opens up. Now also a shortcut for opening and closing. This would be Command or Control B on the PC, Command B on the Mac. And will, as I said, we'll go over shortcuts. We're a bit later on. Now next up is the search. Then comes the source control, then comes a debugger. And down here we have our extensions, which will have a separate, a few separate paths talking only about extensions. Down here we have something new account which you can log in with your Microsoft account. And then here we have our managed. Well, the management is not the Settings panel because if I click on manage, you will see Settings and keyboard shortcuts so far sounds. So this is not the settings Spanish, just the managed Pandora. And from here we can well go into separate things. Also, we can open up one of the most important parts of realistic recode, the command palette. Now within here we can search for almost everything and when our fight typing settings. So for settings I, this one, So command palette and this will open up everything that has settings in it, okay? Searches in our tire, Visual Studio Code, also in our projects. Okay, so I think that's pretty much it for the basic UI overview. 6. 05-Creating Opening Editing Deleting Project Folders and Files: So now that we know where and what is, let's take a look at how can we create open, edit and delete files and folders from my project? Now, everything in Visual Studio code is actually, it needs to be stored in a folder. So let's go up here. And I know we have our welcome bar and create a new folder. And if we click on it, it will be asked to create the folders to the desktop and say New Folder and just call it first project. Now we need to click on open, and now we are in a project. And when we want to open our project, this was the closest welcome bar. And want to open a project, we go to the left side and we'll click on the Explorer. And this is where our files and folders can be created. Now, we created a folder called first project scan. Remember, I can create a new folder within it as call it HTML folder and another folder, and we'll call it now tick here. If I'm in this folder and click on new folder, it will create a new folder within this folder. If I want to be outside of older than I click outside of this folder and I'll kick create here a CSS folder. Now if I want to create something within this CSS folder, I just click on it and let's say images, quarter CSS. And so far and so on, we can go through the folders. And if we want to create a file that's going into our HTML file, and let's say we create a index dot HTML. And these extensions here are important because they will create exactly the file with the exact extension as you wish to be created. For example, I could simply create a text. The TXT file now would have a text file. Or I could create an Excel file, aggregate a whatever file I wish, as long as it is created within here, it will also be created within your computer, Mac or PC. Now, we can also modify or change files. For example, on a Mac, you go to file and just hit enter. And now you could change this to, let's say, some text. Hit Enter and it's changed. But on the PC, you need to click on the F2. So if you hit F2, you can change the project, the file's name or folder's name. Now we want to open a file. We just click on it. And actually let me go in here in our CSS folder and create a new file. In this time we're going to use command and to create a new file. Now as you can see, this is just the undefined dash one file. And well, if I want to type CSS in it, say body and background color, just color, color, and it has no IntelliSense and it doesn't do anything. It doesn't know what it is. Down here you can see it's plain text. So we need to save this riff. I would it saved now it asks me where I wish to create this new file. So within my first project, I could go within it and created within our CSS folder. And let's call it style dot CSS. Okay, so now in a CSS file, and if I, when I type embody and say color and red. And in particular look down here, you can see it recognizes that this is a CSS file now case now how can we delete a file? Well, the most easiest way is right-click and delete. There's also shortcut. Let's delete this text file. On, on a PC, it's just delete button on your keyboard. But as you saw on a Mac, it's the command and backspace. So our command backspace and I will ask me if I wish to move this to the trash can and yes, Irish and it's gone. Will also delete folders. That's deleted HTML folder completely. This is gone. And yeah, that's pretty much it for creating, opening, editing, and deleting files. 7. 06-Changing the Display Language: Now, although my native language is not English, and I think you can tell it by now. It never occurred to me that I could change. We just did this code language. So if you want to change the language that we just call wheels to, the code is displayed in. And then you can go to manage. Thank the command palette and a SNP here, configure display language. Now, if I click on it, we have by default only one language installed, but we can install additional languages. So let's click on additional languages. And let's see what we got here. So we're Chinese, Japanese. And just go through them. You got Spanish, real russia. And he stood the Korean, Chinese again, French. We got german. Hey, they have awful German. I didn't even know that. Does Duchess Prof. bucket metadata locally zeta but not sober flesh or for Visual Studio code. Oh yeah, I can also speak German, so Portuguese than Italian, then Turkish. And hey, that's it. They didn't, don't have Romanian. That's odd. Well nevertheless, these other languages that you can change or unity install it, and it will change your Visual Studio Code completely to change it to the designated language. But hey, just a quick tip. 8. 07-Save and Auto Save: So now that we know how we can create, delete and modify files, how can we actually save them? Well, first step is going up the files. File, say a file, and the file is saved. Changes will be now saved. Or you can change the type of the file by sanely get S, something else. And you just come in here and changing this CSS to dot js. Stupid. Because while this is not the JS format or JavaScript format, but hey, they still remained excellent because now I want to do something. Let's make another change here. Let's write something const, body. And I've been Miletus because we know JavaScript and it's equal to document. And so far and getElementByID, I told you to get it by ID. Now, when we close this up and we would actually select something in here, we could also hit control or Command on the Mac. So command on Mac, control on the PC because we'll save and it will be saved. And now there's another feature is called all are safe. If you go up to File and click on File and click on odyssey, well it will disappear. And first of all, let me change something and go down one line. You see the file is not changed. Actually also have an LSE does some kind of tag, div tag. And there will be something in our div tag. Now if you make any changes here, color blue, have auto save on it. It was saved, saw it was checked. But I will now make another change without author saving, without having all the same. And as soon as I enter, you'll see up here in number one. And this means that there is an unsaved file. Well, we could also do something else. We can go to your settings. You go down to the manage tab, click on Settings, open up settings, and typing here, all are safe. Because artists HIV also has a few settings. You can see now, honestly it is turned off. Now if we set all the safe turned on, it's actually, it has free separate settings after a certain delay, which we can set here. This are milliseconds against and this means each, every second the file will be saved. If I turn this up to five than it would take five seconds. So the program will wait five seconds and it will automatically save those changes back to change it back to one. And there are a couple of different settings also hint in here. We could also change it to on focus. And this only save a file when focus moves out of the editor. Tougher part the file. Now the last feature on window change, which save a file when the focus moves out of the windows of the Visual Studio Code window. Now, there's a couple of recommendations. I would suggest to leave it on after the delay. And 1 second, if you're working with HTML and CSS, if you're working with JavaScript, I would recommend to only save when you actually save. So leave on focus change or on Windows change, or just manually saved by clicking control command S. Because the problem is as soon as you have an error, it'll automatically save and refresh. You will see this when we install our server and to constantly update the page. And you don't want that, believe me. But that's pretty much it for saving. 9. 08-Grid System Splitting up the Editor: When you're working in larger projects, real pseudo-code, as I said, is I was just excellent for everything. But it is pretty good in creating an environment where you can go for your files. Let me expand it. For example, basic fundamentals have been totally Vanilla. Html, CSS, and JavaScript web page. Usually you are started with HTML. Now when you have your HTML open and also ready or your, we're working on a specific location. You would do something like open up HTML file. And then you would grab on, let's say to the idea of Maine had the idea of header tags from year, and so far, so on and start styling it. Well, here's where veers to the code comes in handy because you can split it up into windows. For example, up here, I can split it up into two windows. And if I click on it again, Dirac is split up into multiple windows, free Windows, for Windows, Pi windows and not get nots with it, but you get the idea. And well, what is this good for? If I click and remain on the side of the window, I can now go into my CSS and I could open up my CSS file. Now this is a different kind of project. This project is created using says. And this is just an example, but I would not use my CSS file. I would use, let's see, my main style CSS, and here's where I imported my main header. Commented out main header, footer, responsive, black and white images and dark mode for the webpage. Now of course, this file only contains my imports. And if I want to navigate between this impulse little me also close up this HTML file. I can now do it is to the left side. And on the right side. You can also drag and drop them. So let's say onto remain with an HTML UP there. I want to have my main CSS file. And let's split horizontally. So we should go down here. And on the right side, I want to have to true my JS soulless, move this to the right completely. So this would be here. And let me split up here and here. Because the spirit up into three parts, I wish to move you down here. Come on. There we go. So we have this split up into euro all obviously the much larger screen that I have here. Let's close this one out. So you would have your HTML here, you would have your style here, and then you would have your JavaScript on the right side. So let's say I want to do a quick style to the header. I would just grab on the header tag to my stallion here, color red. And within here, I will wish to have a small functionality. So let us say, Let's create the cost. Actually just grab on to document query selector. And I would grab onto the header tag. And I would just dial it using a background color. And I will set it equal to something. I could do this. So I have all three of them opened and I could jump through each of my files and see everything. Now this is extremely helpful when working on frameworks. Obviously go nuts with it and open up a 1000 files, but that's not pretty practical. And unless I want to show you, is that you could actually open up multiple instances of videos through the code. So if you go up to file and you have a new file, but we don't want to do new file, we want to do a new window. And if I click on new window, then it will open up a completely blank page or a completely blank Visual Studio code. So here we can start from scratch. Haven't completely new project open? Ok, so I think that's basically it for splitting up and working with multiple instances. 10. 09-Mini Map, Word Wrap, Zoom and Font Size: Not that they're already here. Let me show you a couple of other cool features of Visual Studio code. One of the most coolest features is the minimap. On the right side, you will see this compressed code. You can navigate through it by just holding the IO click and scrolling up and down. Now, why is this useful? Let me actually close this up. All of this files. Close up the style. If I have an error, for example, let me just delete some kind of a tag. So H_3 should have an opening and closing tag and a closing tag is gone. Okay? Now theoretically I have an error here. But actually let me open up a CSS file. Can see it is much better than this, a lot more CSS. So let's say we delete this curly bracket. Bach is deleted. And you will see that the next idea of contact is present, red squiggly line under it. And if you take a look in our minimap, you'll see, hey, we haven't entered there. And also if I scroll up and down here on the right side, we also see an error. If I click on this one, it will fall me down to this error. Now let's also take a look at a few settings that have been put, bagged. Curly braces, does go into settings and less typing mini, map, the minimap. And actually let me drag this for onto the right side and let's take a look at the minimum. So meaning map again. So what can we do in our settings? Well, there's not a lot we can do. But one of the most important features is we could specify the maximum column. So if I will just reduce this from 122 or 20, you can see it shrinks down that. And now this is not that useful. So let us go back to 120 and there are a couple of settings within here, but I will and change them if I Would. You can increase the size a bit, but I will just leave it as it is. But what I would change this back to one is the word rep. So what is this word wrap? Let me first of all, yeah, let me put the settings down here. So we have a settings down here and we can see something cool, eternal word wrap. And especially in HTML, because HTML can long, No, so JavaScript can get a bit longer. So let's say we have here somewhere, create a paragraph tag and it Loren ipsum. Okay? But when I'm creating this line is how we'll say it should have free a 100 words and check this up. See how long this line got free 100 words on one line. Now, I could just control z, two, for example, 20 words. Now let's do ten words. Let's see how long business volume 10110 words. So let's do lawn ten. And there we'll have ten words. If I would do long 15, while the space is no longer sufficient enough. So we can do something in our settings. Yes, drag up our settings bar here. Let's type in here where drab. Okay, and it is turned off by default. Now, let me just turn it on. Okay, let's save it and let's go down to my alarm. Let's hit Lauren 150 now. So this is what the word wrap that does. It will wrap the words until it reaches this line right here. Another that you can't see it, but there is a line between the minimap and where the editor ends. And even if I would do something like this, so let's drag the settings to the right side. You see the word wrap changes now, but this will not change how your code looks. Or for example, if I've had texts within here, actually this is tax, how this will look in your webpage. This only changes how this looks in your editor because you want to actually show you this right here. If I stretch this to the side, so let me go to me, this is why the minimap is so cool. So now we get to remember back to my epsilon unless stretch this. So the right side. Okay, now you can also limited by were Rep column. Let's change this to, let's say fairly, and it would only rap to color for the words, but let me change it to five. So this would be more and more obvious. Now, a couple of things I wanted to also show you is the zoom. Now I can zoom in and out by holding down Command or Control and use the plus and minus. So minus it will zoom everything out. But also take a look at the icons. They also zooming out, so they also shrink it down. Not as another way we could do that. We want to change the font size. And now for this we will go back to our settings and typing font size. And right now for the font size is set to 12 pixels. So let's increase it to 16 pixels. It save as, and you can see on the left side everything remained as it was, but the font size changed. Now. Now if I would change this to say 20, this will be an enormous, well, check it out. I don't know if you would like to code this way, but I wouldn't. So less changes back to, let's say 14. See how this looks. Now, you could also decrease your line height. So if I want to have more space between malaria to save one to 2040 and so forth and so on. So let's leave it at 0, which is the default. And I will suggest that you just customize this as you like. 11. 10-Updates: Well-performing program also needs to be updated. There is why Visual Studio Code has constant new updates. But now depending on the version you have, they can be more or less often. When you get a new update, usually it is a small sign like here on your Manage button. Down in the bottom left corner. After you click on it, you'll see that we start to update. It is now active. You have one update that already has done its job. The normally vicious through code needs to be restarted in order for the updates to be installed because the updates are downloaded automatically. Now you could also go into settings. And so for update. And by default you will see updates are downloaded. And it will also check for updates automatically. You can change this to non-manual e start and so far in song, but our suggests living it at the default settings. Now as I said, if you want an update to be executed, you just press onRestart updates and this will restart all of your Visual Studio instances. So if I would open up in your Visual Studio instance. So now we have to open it up and let's click on restart an update. You will see that all of the instances will be now restarted and believed this was the second one. But if, for example, you want to check if you're in the current version of Visual Studio Code, they can go to Visual Studio Code website and they're always display up here the current version than there are. Momentarily there will be version 1.49 now. So if you want to check if there's a new update available, they would go down here to the manage tab, click on the Manage tab and click on check for updates. And if you get there are currently no updates available. It means that you are on the correct version. But you could also check the version of your Visual Studio code. So you can check your Visual Studio code version by going to code insider about about visual pseudocode inside. And then you will get your version. This will be on a Mac. On a PC. You just go to help Dan within here you'll have your about and then click on it. And you will also see your version. 12. 11-IntelliSense: Now I'll do IntelliSense is generally the integrated in Visual Studio code. It is a really general term. Intelligence is. It is a term for a variety of code editing features, including code compilation parameter in for quickie him for n member lists. Intelligence features are sometimes called by other names such as code compilation, contact assist, and code hinting. And let me give you an example. So let's just create a simple app.js file, simple Javascript part. And if I will target the document and I would hit dot. Now this is IntelliSense and those ones will now ask me, So what do we want to do due on to get an animation? Get an element by ID, get an element by class name or get elements. Or maybe you want to grab a query selector. We now want to see, we will add a event listener to the document. As you can see here, this sign is for a function. And also if I would go here and click on it, then it will tell me, Hey, this is a method. If you use this, then you would add a document, a event listener, and F, let's add one. And now open, close parenthesis. And now it will tell me that, well, first of all, you need a type. So what do you want to listen to? Do you want to list or do you want to listen to a full screen error, or they're actually 86 event listeners. So that's less than four a click. Let's go in here. And typing click. And again, intelligence knows, hey, he's looking for a click. Now let's select this click. Now it says, okay, you select the type of click and it, and listen to this from the document. And the event will be triggered by a mouse event. Now it also has a second step. We go down here and actually let me type in a comma. The second step will be that you should ease and now I call the function. So if I were to type in here now function open and close parenthesis. And now I could ask something, for example, if I were now typing console. And now dot is now ASTM again. So what do you want to do with the council D1 to clear it? Do you want to debug it? I just want to log it. Okay. So this is also a method. It will tell me console.log data, any type in I followed, go in here and type in a this type, this takes in a string or anything. Actually. Now what I've been here, hello world. And then close it up. And how I will go over console for example, you show me wearable console, console. Now let's go through the document and actually prevent listener. If the homo event listener intelligence will tell us this is a method. It targets the document. It hasn't click event. So type click. And then it has a callback function. And you can see this entire fame they start document event mouth is actually in a error function, any option Boolean. So if it's true or false, hey, stay here. And then we will have all the explanation. And actually if I would go on this and hold down command or control, you will see it on the line. They felt would click on this. Now, it will send me to the definition. It will send me in a file which is called lib dot DOM dot d dot ts is a tight script file. Let us now send me to the exact definition event listener, that key document event map so far and so on. And this is a really, really, really, so we use our minimap here because I believe to 20 thousand lines of code will emits a case. So I hope we get IntelliSense and also the real power of it and how useful it can be. 13. 12-Emmet HTML & CSS Shortcuts: Now let's talk about one of the most powerful features that come to the videos to the code, Emmett and m, it is actually a thing on its own. If you do a Google search for Emmett, you could lend on emits page as I said, I mean it's a thing on its own. And m, it is just a set of plug-ins for text editors that allow for high-speed coding and editing. Html, XML X, S, l and other structure code formats via contexts assist. It also can edit. It also has a bit for CSS bird is actually HTML where it's where it really shines. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the team and others implemented independently. However, Emmett is primarily independent from any text editor as the engine works directly with texts rather than with any particular software. So let's just go a bit into this cheat sheet. And actually it's only open up here. And as you can see, it can do a lot of things when Emmett and I'll also show you a couple of them. So let's jump into a text editor again. And let me create a new file, a index dot html. Okay, the first really important feature is just holding down Shift. And the bottom one, which is cleavers, this exclamation mark. And you can see here Emmett abbreviation. And this abbreviation would generate all the HTML5 Boilerplate. Or it is actually the DOCTYPE declaration ML five. And this is the entire bola 11 lines of code already typed out, ready for us to use. You just need to type into the file. The title of the webpage may say my webpage. And you get to know you create your webpage. You can link up your style sheets. So if I type in link, it starts already recognizing all of the tags that start with LI. So if I go down to link, those shows me, Hey, you will get, if you use this, a link tag with a with an HRF and irrelevant starships. So if I press on this, then he, I can already type in here my style dot dot CSS, and it'll link up my style.css. Now let's see what we can do with it. So let's start with an H1. So if I type in H1, but usually you usually do open and close H1 tag, then a closing tag, backslash H1, and there is a tag. Okay? Now Emmett health suffers with this. It has all the abbreviation for all of the tags. If I just type in here and each one, it will automatically given H1, either press now tab. It will give me the H1 or I place just enter and there we go. I could type in title. Now, I could also create an H6. So this goes until H6. We could do a paragraph tag or we could do a div tag. Or we could do a span tag. Or we get to something more complicated like an input tag. Or we could just to say a parallel thing. Everything here, I would just type in alarm and this would give me a learn epsilon dummy text. Now, I could also do ten words from lower Solara and ten, and this will give me only ten words. What I could do, learn 100 and this will give me along a 100 words. Now you could also do a free a 100. It doesn't matter to really MS. Shines, you could also do H1 with the ID of my ID. So if I hit Enter, you see he will. What will happen? H one with the ID of my ID and then something between it. And there we go, title. Now we could also do, actually let me leave this one in. Not We can also do classes. Let us do an H2 dot container and is how we do a class. You could also div dot container or when we just use a hash, my ID, this automatically gave me a div tag. So if I only use an ID or if only use a dot container, you can name it whatever we want. I could use my class here. This will give me a div tag. So if you just start without using any tag, it will automatically give you a default division, content division tag. Now, I could also do a second class would say we have a container and dot again sub container and hit enter. And this will give me two classes. Now we could also combine this with less say, AID of my ID, then a dot of container and another dot of sub container. And there we go. We'll have AID and took classes within it. We could also do attributes. For example, I could have a anchor tag, and within here I will use now brackets. And this should be Target blank. And if I hit Enter there, you'd get an anchor tag with an HRF and a target blank. Now we can also use inputs. So if I would just use, just type in input. And then it will ask, hey, do you want an input with a button, a checkbox, a color because if I only use input, the normal input, it will give me the type of texts. But if I would now say input and two dots, and I would now like to have a checkbox and hit. So checkbox. And hit Enter, then I would get a type of checkbox. Obviously, you could also do a radio button, input type radio. But you could also do multiple tags. So let's say we want to have two tags. We want to have a title. Let me use a subclass or H2 plus a paragraph tags, H2 plus a p. And this will give me an H2 and underneath a paragraph tag. Now, I could also do a H2 with the id, our subtitle. Then plus a paragraph tag with a class of text. And if I hit enter, and this will give me an H2 with an idea of subtitle and a paragraph tag with the class text. Now, I could also include one tag into another tag. This is extremely helpful when we using ordered or unordered list because I could do, hey, within an unordered list. I want to have included so greater than at least item. If I hit Enter, we didn't have between our two UL tags, LI tag. And of course we could also do UL with an ID of my list. And it should have a list item with an ID of my list item. And if I hit Enter, I will get the unordered list with an ID and a list item with an ID. Now, you would obviously want to have more than one list item so you could go in here, control C under enough. I don't know if I showed you this, but if you're at the end of the line and you hit Control C or copy, and go to the next line and paste. Let me go to the next line. It will actually copy the entire line. So if you are at the end of the line, I could also do it with this input tags or control C recommends he come down when B. Now we don't want to do this. We could use Emmett to do UL, let's say with an ID of nav container. And then within this, we would like to have an eye with a class of nav items. And this rule times by four. Let's see what happens. We get a list with the idea of nav container M4 list items. Now, if you want to get really radical with this, let's say we want to have a section, a section tag, which will include the whole section, which will have the idea of aside. And within this section we will have an unordered list. With the idea of NAB aside. And then this should contain within parenthesis anchor tags, which contain allies with a class of nav aside items. Then we will go out of the parenthesis, multiply this with five. Plus. At the end we will add the input tag with a type of checkbox. And the checkbox will have an attribute of checked. Now check this off. If I hit Enter, boom, blown away. A section opening and closing tag with an idea of a side, a unordered lists within it with idea of nav side. It has five items, each of them in an anchor tag with an list item. And at the end of this we have a input tag with a checkbox and the attribute of checked within it. So amazing, just amazing. And we could also include tax within it. So let me go down here and let's say H1, H2, we already have our H2, the subtitle again. And we're now within camel case. We type in a title, actually two T's. And after that, we want to have say plus a h3 with a subtitle class this time. And then here all say text of subtitle. And after that we want to have a paragraph tags. Let's go outside of this. Well, not there. Once I have a paragraph tag and this should have a lorem 100. And this we will multiply times three. Now let's see what happens. Only problem with this is that you're not carrying our free 100 absence, but we can fix this, will select the first one, then command the command D. And actually need to select form here. So Lauren and 300, let's say, and if I hit Enter, it will give me 300 words, three paragraph tags with 300 K. So let's go down here. But this would obviously come more in US where we have, for example, a list item with my list. And within this will include our list items with a class of my list items. And then we'll have a tax within a list. I term and we will multiply this, let's say times five. Well, let's hit Enter. Now, we got for each of them a list item attacks within it. But now let's say we want to also have some numbers within. So how can we achieve this? We would do the same thing again. So URL with idea of my list. Then it would include all list items with a class of my list items. Then we will have our list items tags. So list item space and then a dollar sign, and this will mean a variable. Now when I multiply this with, let's say five and I hit Enter, it will add a number to each of these is kind of a loop and adding one to each of them. Now you could obviously also do this with the IDs and classes. So let me do URL again with my list. And then it will have our list items. And now I'll start with my list ID and dash and a dollar sign. Then I will have a class of my list item ID that you don't have to do the dash, but also as you actually do this way so you can see the difference. Then we could have the text of list, item and dollar sign within it. So I'll multiply this. Let us see now times seven. And if I hit Enter, I will get R IDs 1234567. Here also for the class as 1234 vice examined, and also for the text 1-2-3-4-5 system. Okay, so I think that's pretty much it for emit. Less than I wanted to show you is actually within CSS. So let's say we take our body, you will, for example, we want to do a margin of two pixels, doesn't matter. Ok? Now you could do something like m, m and two. And now for the 22 pixels, hit enter, we get two pesos. I could do a padding for p and to ram. Let's say. Now I could also do a height of just the age. And then 20%. This also give me height. Then I could do a width. So w And let's say we want a 100100 viewport width, or could also do this width height. So height 100 and viewport height. Then you could also uses for displaying. So i would hit De Dan displayed as they say a grid. So g, this will display a fingers grid, then the display again as f as flux. So the flux that we could do, the in non dy n, the block dB, and so forth and so on. You could use it also for colors, let's say C and I will use a hashtag of fff. Now would get a white color, and I could use BG for background and a hash of 350 Losee, dark color. Okay, well, that's pretty much it for emit, as I said, is extremely powerful. You could also check out this entire chichi that we have here. It has a lot of things is amazing. Okay, so I think that's pretty much it for a minute. 14. 13-Find and Replace: If you're ever lost in Visual Studio code N1 to be found, then don't worry, there are options for it. Let's see. We have this aside. Id may want to check if this aside is anywhere else in Visual Studio code. But especially we are now in our HTML file. So especially in this HTML file, we'll hold down command or control F on PC, and defined option will appear. Now this will find the A-side word in each and every line of our code. For example, even if in our minimap, it'll show us where that is. And now we can jump rate if he hold on our arrow keys. Let's say the next word and the next word and the next word, and so far and so on. Now, we just searched for match case, but we could also search for match whole word. And I will deselect metal inward. It will only find it here. Now, if I would use to, I want to find nav aside and match, match only in that case it will find it in NAV aside items also. But if I would unclick this and click match whole word, only finite within here. Now, ok, we found it. And let's also find the word. And let's see, we want to change this. It will no longer be aside word, it would be the main navigation. So you only want to change this aside from the nav. I'm as find it. So it finds it here and replace it with something. So if we click on this arrow and we could also replace, now we could replace either one items. Let's see, we will replace this with something else, body and Hawaii. Now, I could replace this in one instance. Or I could replace this in all the instances that it, that it was found in. So if I click on this, so if you click on this and then it will replace it all over the place. Now, let's go back. Let's type of Control Z, which is undone. And let's see, can we find something in our entire dock in all of our documents? Now this is a preview reoccurring real-life scenario. Let's say we have an ID and this ID will change for some reason whatsoever or disk class nav item class. Now, let's see, we have this Nair, I think less also in our CSS and we said nav, the class of nav item have a list-style none, and it should also have a color, red. Just making up some things here. And okay, so we have it here. And also in our JavaScript, we created a const for list items and we assign it to the document. Get elements by specialists use query selector, query selector. And we select that unique query selector, all actually selecting all of the classes. We just selected all of our nav aside items. Ok, so, and some, somebody in the room talked with our developers and with our colleagues and they say, Hey, we just changed this nav item never cite item is now nav is now named Rainbow item, something, something. And I say, well, I have it in like a million lines of code. So what can I do? Well, we will take this never aside item. We will go in here, we will search now, paste it in, and this will find it in the app.js. So in a JS file and find it one time, it will find it in a HTML file 12345 times, and it will find it in a CSS file. Now we could replace it because say this is a nav, main F, call it main nav. So you can see it also shows you that let me actually make this a bit larger, that the nav aside item will be now replaced with main aside. Now, I could choose to replace it here. Now JS, If I click on this one, this was replaced. I could also say, I don't want it to be replaced in the CSS file. So if I click on dismiss, it would not be replaced. Or I could just click up here and replace all. And if I click on this, it will be replaced in all of my files. So if I search now for main nav in HTML, in our CSS and in our JavaScript, it was replaced. Okay, so I think that's pretty much it for Find and Replace. You cannot get lost, you cannot get lost. 15. 14-Navigate the Code: Now if you say that a coordinator is great, we should also be able to navigate through it. Now, Visual Studio Code has a high productivity code editor, which when combined with a programming language service, gives you the power of an IDE and the speed of a text editor. In the next couple of minutes, I'm going to show you how we can navigate through the code. Now, first of all, bracket matching, if he go and click on this one, you will see it will highlight the next H1. So the closing tag. Also, if I go on the input tag, it only highlight me, well, this greater than sign. But if you go into a JavaScript file, and I would do it in here, let's see another function and this will have something within it. And then this, and I should also close it up. Skewed this any of my function. Okay, now if I would click on the first bracket, it would match up with this bracket. If I would click on a second bracket there to match up with this one. And so far, so on if I will do here in if statement and the brackets within it, and then the L statement. And then do another brackets within it should also have something, say boolean or true. If something is true, unless both this one down and this one down is something true and some different happen is something say console log suggests an abbreviation. No, not that one. So console log something and if it's not true that it should console log something else. And let's hit Save. And we will see that this bracket will match up with this one. If I go out here, this one and for sure with the closing bracket, now we have a leader on a really neat extension for this. So we don't need this, but yes, we do need this. We do need to see how they match up. But also it is exceptionally good in code selecting. Now, let's see. Yeah, this is also working here. So I have this to console logs. This free console logs. Now f the console, we have the log on a firewood. Change this to console dot error that I will change the first one, but let's see, I want to change all three of them. Now you can see they're all highlighted with the first one selected with a double-click. I can now press Control D and select all three of them. In the market changed this to error. But let's go back into our HTML now how can we select things? Well, you saw if a click somewhere within here, then I'll have my m if I drag over it and this is selected. But now right-click copy going here, paste cart. But what if I want to move without my mouse or if I want to be really quick, Also, if I double-click something, it was like the whole world, the entire world. Now within here container, container, container I could jump through them, isn't Control D. But what if I want to be here? Well, if I'm here and jump foodies words, they filed whole dunk command and error, right? This will jump to the end. Okay, so let's try this again. For example, I'm going into this div tag. Right at the beginning. I hold down command or on the PC, the control button or the control key hit the right arrow key. It would jump to the end of this line. Knife I'm in here and hold down the Control key. It'll also jumped at the end of the line. Now if I would be in here and hold down shift, then it will select one letter at a time, and also arrow keys. Now if I would hold down command shift and the arrow key, it'll select the entire line. If I would hold down current control on the Mac, control shift and arrow keys, it will select the entire word and the next word exactly where it breaks up. So let me show you this at this class. So control, shift, select door class, then it jumps to the entire next selection. And also if I keep on selecting, it will select the entire line. Now if I would hold down now command and use the up and down keys, I or bringing it to the start or the end of my entire code, the hold down shift, that this would start selecting line by line evolve. If I press down on the down arrows, then this will deselect it. Now if I'm in this LI list and hold on, option an arrow up, take a look at this number rotational up heat right here. So we have the idea of seven. I could move it around okay, with the up and down keys, if I would. Now, if I hold down option and go right, this will jump through each and every word. Kay, so acellular, heavy, the whitespace or if something ends, it will jump through it. Now if I hold down Option and shift and use arrows left and it'll select one word than the word, then the next one, the next one, the next one. I could select words within this. So let's say I'm here. And Let's see, we want to hold that option shift, right. One time is a select. All of my, my ideas, my list IDs. Now I would hold Command D, select the second one, the third one. And let's change this to texts. It will change all three of them. And I can also navigate within this. Let's change. All want to freeze to a nine. Let's see. Now, up here we could also navigate through this by holding down Control tab. And this will bring me to the file that I wish to. As soon as I let go, this will bring you to the CSS file. Now hold on command and let's release on the JavaScript file the command key, and we will go to the next file. Now another cool thing within our navigator, or breadcrumbs. Breadcrumbs are up here. So if I'm in the CO. Let's say I'm in the code here, then. Well, I'm at the start of the code, but if I would go now form the document in the event listener in the clinic, in the function. So in the callback function, then it will tell me that I am in the call back function. You can see I'm actually here is the caller function. Now if I would go deeper in this, the C I'm in my function, and I could actually navigate from this back to the callback function. Let's go even more deeply. Plus, let me put this if statement and this console log. Let me cut this out and put it in my function. Do have an error here. So I'm in my function now and I could go all the way up to the document. Okay, and this was send me up to where the callback function actually start. And also in CSS, well, it's not that useful, but if I'm in my body now it would tell me that the body, this is more useful in Sass when we're nesting things because it says you could do something like body. Within the body that all of the H 2s do something color, something, something free. And he, we also have it in our body UL and want in this UL or the LI tags to have then in other color. And so far, so on and with breadcrumbs, you could go then you can see this, this level, okay, so body, the body, you could go actually up. Ok, let me actually delete this because this is nonsense code in CSS. And yeah, that's pretty much it for navigating the code. 16. 15-Intro to Extensions: I would say that one of the most powerful features of Visual Studio Code is extensions. And the best part about it is that they are free. The absolutely free. And I cannot imagine myself living without the substantial. Now, there are a lot of extensions out there. I'm just going to summarize what I think in my opinion are the best of them. And also, this will not make you a better developer, but it would make a much quicker developer. So this being said, I would categorize extensions into three categories. Once again, this is just my personal opinion. Now they're essential extinctions, those extensions that I use in my daily life as a developer, and I really cannot live without them. Now there are also optional expansion extensions or cosmetic extensions. I could live without them, but I don't need them. And then they are the environmental extensions, this R programming environment and framework specific. Now you don't need them if you are not using specific environments like for example, if you only working in a reactor environmental angular or view, or using specific frameworks like Bootstrap and so forth and so on. Now, if we take a look at essential extents or in my opinion, the extensions that actually each front end developer really needs in Visual Studio code. Then this will be live server. Because I cannot imagine yourself constantly clicking on a Google or Firefox icon in order to open up my web page. Then the debugger for Chrome or Firefox. And let's be honest, nobody uses edge, so let's just forget about it. Also, HTML and CSS support. Then the JavaScript ES6 code snippets. We will have a separate video on code snippets. Then the terminal, although you do have the integrator terminal, I'm going to show you this. Now. Bracket by colorizes also exceptional, the extension to colorize oligo parenthesis, square parenthesis and brackets called spellcheck, especially for me. And making a lot of spellcheck. So, Ooh, yep, I definitely need that. And I'm pretty sure, well, it just makes your code pretty. Then we will also have the optional extensions. And as you can see, there are a lot of them which in my opinion, you could or could not use n, especially if you're a beginner developer, you may need some of them. Now. And then new file is, well, we'll take a look at this. It's a pretty it's a pretty good extension, but you don't really need it. Other name tags is also a great extension, but we'll kind of write the tag and then you leave it as it is, doesn't really matter. And then label is also exceptionally good extension, better comments. Well, the problem with better comments, and I'll also show you this, is if someone soon as get's your code and he doesn't does not have the extension installed, then you will not see this comment. Says as peak also greatest Sasha per code, a social media than comes up also. I am so yeah, it's pretty useful. Markdown PDF, if you're writing a book editor config for visitors to the code, this will just make a Visual Studio code have the same configuration on each device you have N, a farmer dB if using databases, but I wanted to have it in there. Now, environmental specific extensions. Well, let's set it depends. We'll take a look and we also have a separate video on each of them or some of them. Intelligence for CSS class name. This is specific. If you're working with something like Bootstrap, you need to see those classes for the HTML tags. Live share. Also great when you work in groups. Live Sass compiler only infusing says. We also have a separate video on life says compiler. But once again, only if you using says if you're writing only in regular CSS, which I could not imagine. The one year of writing CSS, you're still writing regular surface, but it could happen. Now rest client is exceptionally good for APIs, will also have a separate video on that one and no snippets. Well, if you were doing node import costs, this will show you how much space your JavaScript imports are taking up. React native tools if you're working in React native environment. And also S7 react redox graph QA React Native snippets. So these are exceptionally good when you're working in React here. So this pins said, let's take a look at some of them. 17. 16-Essential Extensions: Okay, so let's take a look at what I considered to be essential extensions in Visual Studio Code. Nurse extension step is right here on the left side and click on it. And the first extension we're gonna take a look at is live server. As I said, this is one of the most used extensions out there. If we take a look at it, it has over 7,000,600 thousand downloads. Amazing, just amazing. So let's click on install. And after you have it installed, let's create a, let's open a file folder. And let's go to my desktop and just create a folder, New Folder, something, something that's open, it doesn't matter, but I also want to create a new index.html. Now, how do we use visual pseudocode for? So let's create something in here. Exclude Ebola prayed HTML5 Boilerplate and create here a header with a class on, let's see, title. And in here I'm going to give it the style of display. Font-size. See 5-gram. Okay, and for the title again, just create typing here. Hello world, hello world. Kay, let's hit Save Control S. And a live server should be installed. Now that server, there we have it. So let's go into our HTML. Let's right click and open with live server is one option. Command. L is also a option command o. Left server will start professionally. Drag and drop this, opened up on another window and put it in here. And then we go up webpages opened and it's opened up on a local host. Port. 3,500. Net can also change this on which port you want to open it up. I'll suggest leaving it as it is. Now. We can also stop live server. So another way, opening this up, let me create a new tablet. It also going to open up in a new tab. You could also open it up by holding down Command Shift or control shift, and then open up the command pilot, so control P and then type in live server. So we have now a couple of options. Change lies server workspace, open life server. So we're going to open this one. Again, I'll put glass so we can stop life. So nana, let's just open it up again. And it can open up another tag. And if I would change here something, let's say hello world one, because it automatically changes after I hit save and set for stopping live server, you could either go down here. You also see here you will have your port and says click to stop life. So if I click stop and change this to, let's say T2 and and hit save. Well, nothing happens because I stopped that server. If I want to go live again, just click. Go live, but it would open up in another tab. Just close this tool. And there's the old one, and here's a new one. And later on you are going to use DeBow if you're working in JavaScript. So let's type in debugger. And I said there are 22 debuggers. They would recommend. One of them being developed for Google Chrome and Ottawa and for Mozilla Firefox, if you're working for and where they are. If it working Mozilla Firefox, both of them are great. You can also see here $747 thousand, 6,000,500 thousand downloads. Because Google Chrome is just the preferred browser for web developers. That's just, just the way it is. Now, Another great extension will be. And we could also install this. Let me just install it, have it in there. And now let's search for HTML and CSS support. Now if you scroll down here you see a futures classes actually was compilation. Idea two is compilations suggests a zen coding compilation classes and IDs scans workspace folder for CSS and says SCSS files supports remote CSS files, uses used to record CSS language services, supported languages, Java, PHP, most diet. You need this, you just need this. So let's install this also. Now, I cannot imagine you only working in HTML and CSS. You sometimes sooner or later you will use JavaScript. So let's search for Java Script law. Java, JavaScript ES6 code snippets. Now, this is really important because without this, as suppose languages, JavaScript Type Script, JavaScript React that script react. You will also get hit down here a few examples. For example, counsel out yet, for example, this one goes, I'll also have a different video on snippets. But just remember, snippets are abbreviations of codes. And also let me give you an example of this. So let's go back into the files. Let's create a app.js. And we didn't install it. Do they know within decided. So I don't have it installed, but I'm going to go into my body and above the body into my HTML file. Go into now link up my JavaScript files, app.js, it's safe. Now let's go back into our JavaScript file and in our browser will inspect. So click on Inspect or F 12. You'll open up your inspected through, right, and we're going to go into the console. Now. I can type in here console dot log. And let's lock here a string of high. So if I hit enter, okay, hi is locked. And we can also log it for console dot log. And we can look here, hello, okay, so if I close this up, it save. And also we have our live server running is very important. So if you don't have it running, please started. Now, JavaScript communicates with the DOM that way with the console. That hey, you should lock Hello World. We don't need to type out console log. We could use Cl G. We don't have it right now. But after we install our snippets, science going in here and install this one k. So this should be installed now. Now if I click CAG, so typing COG displays a message in console log two-dimensional encountered our JavaScript snippets. So instead of typing in Console.log, I can now just typing Cl G, hit enter, and there you have a console log Anakin. Now that we're here, Norbert bird it save. And a norbert is now logged. Ok, so this snippet works, although we already have it in Visual Studio code, a nice tension was the terminal full-time in your terminal. Now without installing it, I'll show you that if you control him back ticks on Mac, it will open up the terminal. Now I'm using bash, but normally you would use a CNG. I'll show this a bit later on, but you could also install the terminal and well, yeah, if you don't have it, you can install it. It could happen that you don't have it now. But one of my favorite extensions is more a visual extension, but it helps me out a lot. Is bracket pear colorized. So let's search for bracket colorized stator. Now what this does and that notion install it, it is colorizes your parenthesis, your square brackets, your, your camera cases. And it's extremely helpful as go into another JavaScript file. And let's see, we create a function just says any k We have here parenthesis as less go in here. And let's say if we create another parenthesis, I always see that this two parenthesis or different uninstalled backpackers. Let's go in here on install. Go back into our thing, and let's hit Save again. And I finished this. Notice still works. Reload this right. We're just second. Okay. Now, oh, we don't have any colors in our brackets. Now, after installing it with Oregon, and I search for it again. So bracket, pear colorized. Let's hit install as go back into our app and then we'll have our packets or if something, then do something and console log, CRP. And else, if do something else and else, again do something else. Now within here, I could have now another parenthesis. Say something like gibberish, but you see the, the rockets are colorized differently. Also if I would have an error R3. So let's create the lat array is equal to c. Actually, I don't want to create an array, but I'm just going to type in more and more brackets. Because the rainbow Yep, yep, this is extremely useful. So I cannot imagine myself working without this and speaking out, working without this cold spell check. And I think as all resigned, the videos are extremely Bad speller. So yep, need this. Now what this does is, for example, I should have typed in, you're gone. You could type in something like, for example, else. If this just means it is not a valid code, but it also has a read on the lines. Let's be clear the console, and let's call it Apple. This is the way we spell Apple. Okay, let me create a let, let Apple just initiated, this was way we spell apple. If I would delete a p, Now, it's, it has this blue squarely. If I go and hover over it, then quick fix will appear. If you click on Quick fix, it will give you also a apple. Okay, so this coast spellcheck works. And one of the lasts for at least for me, extensions out there is prettier because I'm pretty no, not because I'm pretty but it makes your code prettier. And what this does. So there we go, procure the want to install it right now let's go into HTML file. As do you see this all the really good example of H2, not UL. And I want to have here LI unless they actually create free allies. So i times three, hit enter. And let's do something else. Let's create a ally with a text within it of item. And let's multiply this times three is we are free at those knife Click on Save. Syntax error will not rounds. Let me comment, spot out, but actually delete this. Oh, we're not like, okay, let's click on Live, go live again. And hey, load. No, you don't work. And go live. Here. Also always need to go live from your HTML file. They will desert HTML file and we have our free items sit in it. And I also need to zoom in a bit, I whatever doesn't matter. But you can see how this is indented. And like you normally would do something like space. And you should go here and you should go down here, and you should go with a tab here. Now this is a simpler way. So let me hit Control Z. Actually need you. Let's do five of this. Now. If we installed prettier now and also go into our settings. So let's click here, produce settings. There's also an option on and formatting on safe. So you need to click this if you click the Format on say file. And let's go back into our HTML. If I now hit save, so Control S ranch working file. Okay, so now FDA insolvent and you hit save. It will automatically organize it for you. So it'll ultimately indented. Also, let's open up a JavaScript file and close this. It also closes your texts. So for example, if I do something like actually that we create this, let, again here, I will delete this. So this would be an error if I executed this lead an arrow because it's, it's open-ended enclose argument. But if I hit just save this, we'll close it for me and also push it one up so I can live something like open space. Fair hit save. You will see everything's deleted. Ok, so this pretty much it for the essential tags. 18. 17-Optional Extensions: Now next up we're going to take a look at optional extensions that as I said, there are some preferred extension that in my opinion, I cannot live without, I cannot work without. But there are also a few extension which are pretty good, but I can't live without them. But before we do that, I would just like to mention that our upon this, up until this point, I used the Visual Studio code inside there addition, but my preferred veers to recode edition is the stable bill. So if you haven't already, please tell all of your extension that we already extent installed for essential extensions and they can move on. Okay, so with this green set, let's take a look at optional extensions. Now the first one would be advanced file save, where there's new file. And let's type in here, advance new file. Now what this does and let me actually install it. First of all, I'm going to go into my keyboard settings. So let's hold down control should be. Let's open up our command palette and let's say keyboard shortcut reference. Let's go down to our manage and has gone on keyboard shortcuts. And let's search for new. There we go. Events file. There's new file. Now, I would recommend. So if you want to create a new file, you would hold down Alt command and n, and we want to create a new file then command. And then I would recommend changing this to just double-click on it command. And now check this out. There is on the right side, source, user and default. The user will always override the default. So if I would go now and create a new fossil and close all of this up. Let's hold down command and create new file. You can see it now creates a file on user desktop on on data folder because this is the folder that we created. And now I can type in. So instead of having this just new file, I can now type in, let's say our CSS style dot CSS file. Now enter or create a new style.css file for me. Okay, so that's it for this extension. Now next time we're going to take a look at auto remain tags. And this is a pretty cool one. Let's go to an HTML file, index.html. And let's go into our extension and assert for Aalto rename tags. Notice extension does after we install it. And this is pretty good for, for beginners. If you, for example, say, hey, I don't want this list to be ordered list, a unordered list, but I wanted to be a ordered list before installing a narrator honest dot Achilles, uninstall it, go back into our HTML. Now if I want to change this opening and closing tag, I would need to do some nut or required. So let's click on Reload and Let's try this. So if I double-click on it, it will, it will highlight the next one doesn't change both of them. Now if I want to change is the first one or L, And then I would need to go down to the second one. Oh, and I would have a ordered list. You could also do something like select bowl for them. Because if I select this and select the next one using control D, then I would have both of them selected and change them into u, l. But if you have the advanced, you, if we have our auto rename renamed tags installed, then it would do something like, let's select, I'm only going to select the first one. It's only the beginning tag and typing o l. And this would also edit my closing texts are pretty awesome, isn't it? If I want to change the second LI here into a paragraph tag, I would just select the first one, it P, and it'll change it all. Also, if I would only click in it and say div, it's change, is changing, the oil is not changing it. This just typing something in it, but it's editing both beginning and ending tax. Okay, so this is done. Well, it can change the div. Okay, so that's it for this tag nano. So we're going to take a look at indent. Rainbow has a pretty cool one. So let's search for indent. And then the rainbow. Let's search for indent at switcher in then treble. There we go. It's a pretty cool on, let me show you what this does without it. Because if I select something here and city starts, and if I will need to search, well, where does this, which line this is, could install indent rainbow. What this does is coloring your indentation. Here. See we have this orange and green then ping. And if I create, would create here another UL and some times seven within it. And save and prettier would help me, should help me actually to go dive a previous active. And I felt it save, go down. Then all of them would be on the next column. We go here, you go here. And there we go. Next one will be better comments to her comments. There we go. Normally if it would create a comment and let me actually go into a JavaScript file. So let's see function name. And this would do something. Ok. And the next function, this is not our function looks. And let me copy this a couple of thumb. So this one, this one, this, and this one. Okay, So we have a couple of functions. And we will say, Hey, this function is actually secreted common control post slash and is automatically to comment, say, this. Function is for something, okay, and the next functions under his control, C control V for something else. And this would be then alert or caution will be attention. Needs, modification or something like that. Now with better comments, we can create different types of commas. So let me install this and it will sit down here. You have important then dissipated should this method be executed to do parameter. So let us try to solve. So I'm going to move this one over here. And let's say this is equal, So this is a normal comment. Then we could also have a multi-line comment. This is without installing this extension. So forward slash star, star. There we go does a comment and the first one be comments. Now let's go out of this. So you have this multi-line comment that you could do. Comments and first comment, second comment, and so on, so on. So okay, so this would be a multi-line comment. Then, now you would have this forward slash. And then if you type in a just a star, then this would change the color to a more lighter green. Let's say important that you're going to use them before everything for anything you want. But just so you know, you can use this as a important common knowledge. You could also do comment and exclamation mark, And this would turn it into a red comment. And let's see, danger needs mod. Then we could do something like question mark and is this working? Then we could also do it to do this. So too, do we actually need to type in now to do capitalize letters and we don't need the star. And the real something then something else. And I would just second, I could do a slash star, star slash multi-line comment. And now we could do, we can now tap out our to-do list. Okay, now that's pretty much it for this extension on. Let's also take a look at a set. You can use this, but someone else, someone else reads your code. Do not sit aside, belief doesn't have but, uh, comments installed. Hey, you could then do a comment up here, installed better comments extension to see my comments. Now next up is also pretty useful on is CSS peaks. Css. Now what this does is it will let you pick classes for CSS as an example, down here shows for in-class comments, okay, he hovers over it and it will see the CSS that was applied to it and you can also jump to it. So let's go into our HTML. And let's first of all, now we do have a stylus or do we have one up? I have here a star SSS. Okay, so let's link this up in our HTML. So let's go above the title, say link, to link up our style sheet. Ok, so let's hit save. Now let's go to our close app.js. Now, whatever, save it. This one is go into our CSS. Now do I have any classes? Class a class that telescoped or class died. Let's target and css dot class title and say color, red, heading, left on whatever to ram, monochrome rights to ram. This is just cherish. The font weight of 600. Okay, so now if I hit save and now go back into my HTML and I hover over this. We didn't install it. Okay, so let's install it. So after we have it installed and let's installed and let's go back to our HTML Nivea holder or my title class. Let me also take O L. So this is just a tag. Let's target it and say display in line. And let's also list-style none. Okay, let's hit Save As go back into our HTML. And never Hubble title, hold down command and click on it. It will. Now brings me to our title in SSS. Okay, so for all of you social media users out there, there's another one. There's another great extensional polar code. Now let us show this polar code, which will take photos of a coastal as say this, install it first of all. Ok, now let's go and open up. You can use it in HTML, CSS, objects, whatever. So you need to open the command pillars. So control shift P. And let's type in here polar code to initiate it. Then you will take your code, copy it, go into the right-hand side where Paul code is opened and paste it in. So control v and the code is not pasted in. And if you click on this snapshot down here, it will create a PNG file, or you can choose the JPEG and it will save it, let's say code, save it. And it makes you open it up. And there we go. We have a small, little small picture of our code. And we can, hey, this doesn't look that good. And you would have a picture of your code and you can post dental, social media, Instagram, Facebook, Twitter, whatever. Now for those of you who like to create markdowns or write books, okay, courses like I do and tutorials. There's a grid extension called markdown pdf. And this will let you create markdowns from your code. So you can see this extension coerce markdown files to PDF, HTML, PNG, and JPEG files. And if you scroll down, there's also okay, So you need to create a markdown files and.md file and then start typing in there. And there are also a couple of great examples here how this works. And I'm just going to mention a couple of extension that I think there are also awesome. So for those of you who have immense codes, you can use a Bookmarks extension, the sum, create bookmarks, Bookmarks. Let me actually close all of this up. Just create bookmarks in your code. So if ever really long code, as an example down here, caseworkers, small bookmarks, and you can also type something in there a few comments. Now, another way it extension would be cloak. And this is especially good to hide your credentials. For example, a cloak. They would go to how your credentials when you're streaming on Twitch, YouTube, or if you're doing a presentation, this will create an EMV file and this will hide all of your credentials. Ok, so if you have this installed, we also see an example down here. It will hide all of your sensitive data. Now the last one that I want to talk about, and as I said, the retinal stare out there is a phone or DB database. And if you take a look in the code right here, if you take a look at examples down here, doesn't have that many downloads, but it's a pretty good one. You can work with databases. So if you into databases and there's a great extension for you. Okay, so that's pretty much it for the optional extensions. 19. 18-Environmental Specific Extensions: This next category of extensions is only useful if you're working in specific environments. So for example, if you're working in a reactive environment, angular view, a backend node will also useful un, reactant angular node. But yeah, also if you're working with says there are few, couple of extension and if you're using CSS frameworks, so let's start with those. Actually this one great extension for them. It's called Intelligence for CSS or listens for CSS and extra for CSS, for HTML. For CSS class names in HTML. So this one right here. Now this is great when you're working with frameworks like Bootstrap or materialize CSS, because it will give you all of the classes they are integrated there. So as soon as you have them linked up, you have your booster lync dot. All you have is completely installed within your project. Then you can just search for classes. And if you also have CSS peak installed and hey, that's a great combination. C is supposed languages, HTML, PHP, JavaScript, yada, yada, yada. Yeah. This is really a great one if you're working with frameworks. Now, next, if you working in groups, which you will work sooner or later than we have live, share. Okay, this is a pretty good one and we also have a separate video on this later on. But I just wanted to have it right for now. Inhibit also register code now has this button right here, which is your account. And I will show you how this works a bit later on. And I will show you how this works in another video. But just know you can now work in teams and is also incorporated into Visual Studio code. But if you don't want to use this, then US live share and you can log in this with are your with your GitHub account. Ok, so this kind of fizzle here done, I guess down here is your entire documentation for it. Not what I use extremely often is live Sass compiler. Now if you're using says and after time you will need to use says because it's just writing radio CSS is a horror. This is how life says compiler works. First of all, says, if you know, do not know is also known as SCSS. And a stands for sassy CSS, CSS cascading style sheet. And what this does is lets you write, so all of the rules that are valid in CSS also buried in SAS or let me just install this and give you a short example. Now after you have it installed, now go into a folder and let's create a new folder called says. Within our sass folder, create a file which you recall. Let me call main dot CSS and you can use the extension SAS. And this uses when you're writing it. No curly braces or SCSS is preferred. Using for me. Css and well, says is a bit different than CSS because SAS has functions as makes sense is variable. Css has also has variables. A couple of years back. They included variables into CSS, but says has, had variables for a long time ago. Now, you know, you could see CSS as kind of a lightweight programming language is really, really lightweight. You can use if statements, if else. So far, so on logical operators, that's pretty basic but amazing programming language. So let me show you how this works. Normally. A webpage reads your CSS or cascading style sheet in order to apply a style to your webpage. Ok, now it cannot read SAS or SCSS files. And this is why there is this says compiler. So if i would hit on watch says, which I won't do right now and please don't do it. It will compile my written CSS SCSS from here into regular CSS. Now let me show you how this works. First of all, a couple of settings. So let's go to manage settings. And let's search for says. Now let's go on. Law says compiler right here and edit JSON. Now let's click on what says, and let's see what happens. First of all, the terminal will open and then a couple of files, we'll create it. And then a couple of files will be created. And you can see here a Main says, I mean, as a main CSS file was created and there's no SAS within it, and also a map was created. Now, if I would type in here, let's see, let's do a general reset. So let's say star onto margin 0, padding 0 and hit Save. And now let's take a look in Maine, satisfied may CSS file, hey, we got some CSS in it, although we didn't write anything. Now let's also do something that is called nesting. And next thing works like this, a c in our body. There is a inch want H1 tag. And now actually there's something else. In our UL. We want to know because we had all ordered lists. Ordered lists, we have a unordered list and you want to style this unordered list, allies with list-style none. Okay, so what this will do if you take a look in our main CSS file. It tells us that in the OL, that UL and only the list items you can see it has a selector specificity of free. This means that the only styled our list styles, they are in the unordered list in our ordered list. So this is called nesting. Now another thing which says it has partial. So I create a new file and I call this config dot SCSS. And the way we create partial, we type in on the line before the name, okay, if I hit Enter. Now, if I do something within, within this Let's say, let's measure carpet disorder. So let's cut this out. Let's hit Save mistake looking on main CSS so there's no, nothing more, nothing in there that's copied into a config. Let's hit Save. And now let's take a look in our main CSS or anything would happen? Well, nothing because partials do not create any CSS, only regular SIR SCSS files. Now in order to use this partial, we'll need to do something like this. At import. And now between quotations, you can use single or double quotes. Will now input our config. Now you could also use underline here or just typing config and close it up, hit Save. And now if we take a look in our main, there you go. Our CSS was again generated. Now a couple of things. If you, first of all, let's take a look down here, watching the says compilers now watching or, or a CSS. If I would go now in our config, take a look down here, hit Save. You'll see success. It was successfully compiled. This means there are no errors. If I do something like body opening brackets, did it this one, hit save. You see we have an error. And now if we go up here, you will see compile error, invalid CSF the body bumper or was online six. Okay. Now, if I would go to this path. Okay. Folder salesmen says, Just tell me that form the 96 from this file, the config and then is pushed up into line one within here because it's imported here. Something went wrong and it tells you body and operating doesn't tell you that how you, how you should fix it, but you just know, hey, there's my error. If I go in here, close this up. Hit save, and you will see successfully compiling fool now would go down here you will see user mane says compiled and map was compiled. Okay, so that's basically it for this says Now the next one that I want to show you is a Rest Client extension D. So let's open this up to rest. Step in rest client they will now address client does is especially good for Phonegap developers or full-stack developers if you are working with a backend API. And basically what this allows you to do is to get the APIs response into Visual Studio code. Now let's install this, close up this files. So let's go to our folder is already installed, and now let's create out here somewhere a new file. Let's just call it request. And we're going to save it as a HTTP py file. So that HTTP. Now let's type in here a GET command. Okay, so getMethod HTTP method. And now we can't a HTTPS URL calls false that forward slash form a JSON placeholder, solid G, so on. Place holder dot typing code and.com. So that's actually a API for slabs post. Okay? So you now close this up and now you can see up here, and let me close up our terminal. Up here we have now a send request. Now if I click and let me also close up our files here. If I click send request. Age, TTP though, illustrates again send request. And hey, there we go. We've got our header spans not found. So the paper's not no longer there. On date when it was across a Saturday than connection close, x-bar, continental enthroned dry up. You will get all of your information in here. Okay, so this is pretty useful for, for those out there who want to use API. So you just click on save there. Now, what else I wanted to show you how yep. No snippets if you using node and you would use no later on. Sooner or later we all use node. Then we will have this no snippets extension, which is extremely, extremely useful for Node. So you can see you just type in node. Then the event which will create a request. What you close a event. And yeah, this is the snippets are exceptionally good. It just uses up so much time to type everything out at. As I said, it will not make you a better developer, but it will make you much quicker developer if you know snippets, if you notion shortcuts, if you know which extensions uses installed, this is just the most. Now there's another pretty great extension. If you're using JavaScript being in putting a lot of files, it's called import costs. And basically what this extension does is you can see image. The image is now showing. Well what the image should show. There it is. It is. That is not the images are just a settings. Is how much space do the files that you're importing take up. Now if you're using React Native than you would need your React native tools extensions and is great for debugging and just go for it. This is pretty great. You, you need to use this. And also if you're using React and react. So this is one of the most downloaded sensors out there. Reactor II, thus graph QR React Native snippets about this are exceptionally useful. You can see down here, well, the snippets, okay, they like him for importing model from module. Then even for import module. And to deal with the lot of snippets specific for react. React, react hooks. If it didn't hurt about hooks until now, prefixes, redox, snippets. Prototype snippets is still a lot of snippets in here. So it should make your code. At the end. It will not make you better, but a quicker developer. So that's basically it for extensions. 20. 19-Snippets: Snippets, R1 of visuals through codes, most powerful features. And also snippets are to really makes you a speedy developer, especially when you develop in JavaScript or reactor angular. Snippets can save your life and queen 10 thousand times increase your productivity. Now, first of all, where are our snippets? Let's go to manage settings and type in snippets. Now here in just a few basic settings for us snippets, you can control whether the snippets are shown with other suggestions. Inline, top-bottom, non human control if want to show snippets. And when this is enabled, as it says here, into essential snippets, suggestions. But you can find those snippets by going to Edit Settings JSON. But also let me show you something real quick. Now if you open up your command prompt, so control shift B and terrapins snippets. You can do two things. Configured, uses snippets or general code snippets. That these are two separate things. Also if you have react environment. So if you have a React or Angular or some kind of environment with, for example, NodeJS setup, then you will have depends snippets to edit. So let's go to user convicts, snippets and four here now we can choose what kind of snippets want to edit, new goal snippets on things. So here's also basic JavaScript snippets. Okay? Now we're going to also the JSON snippets and believe PHP. React. You type scripts snippets, JSON, JavaScript, HTML. Just type in React. There we go. Javascript reacts snippets now, but I'm going to just show you really quickly what the java script snippets too. So let's go into JavaScript. Now here's an example. A snippet is composed out of a name. For example, print to the console, prefix LOG body, and they would type in something in here and then a description log output to the console. And let's go in here. And so let's create a new file control and enter into, let's call this next example ab.js. We don't need to chase and just shares. Okay, now within our JS, you know, if I do console log, then this is a snippet. So see LG is for console log, and this will display a message in the console from JavaScript ES6 code snippets. Okay, then here's the example. If you type in see LG, You will get console log and within their objects. So, so let's create our own custom console. Ok, let's try this. Let's go into our JavaScript. And first of all, we need to give it a name. Let's call this one, nor should we call it x, C LG. Okay? Now, we will create within here, if you key-value pairs. Now, remember this is a G somewhat to everything JSON's must always have within quotations, the keys and the values, and do a more precise between double-quotes. Wanted to know more about JSON and also JavaScript. I have an excellent JavaScript course out there, so check it out. Ok, so within here, and we'll just type in the prefix. So we said it should have prefix, so on name, which would be here, example, console log. And I'm going to copy this. And I didn't tell you about keyboard shortcuts meant to use Shift Control or Command. And this will step through the end, but I want to go a bit Paxos shift here, arrows and then control x, go down here and type in here prefix is actually as it stands, Hindu example, prefix. Outside. Now type we are prefix within quotations which will be x, c, LG, OK, comma. And now for our body, we think quotations body and this will do the following. It will create a console.log and open and close parenthesis. Now another comma. And now for description and type in description, you can see the snippet description. Intellisense already knows what we're trying to do. So this for this, create a custom console lock. Okay, let's say this. And now let's go in here. Now we have our console dot log. Then we have all CAG, and we also have our E X C, G. And as soon as I type this in, you will see this will create a custom console. Log uses snippet and it'll give us a costume console out. Now the difference between this and this one up here, let me show you again. The close up. If I typing console log and hit Enter, it gives me an object and the crystal remains within the parenthesis. And if I type in here, example x CFG, it jumps out of it. And also it doesn't end it with a quotation mark. Now let's go back in here and say, you should end here and jump down to the next, to the next line. So that's hit save. Let's go back in here. I saw this again. X. See LG. That's it. Enter and there we go. Now it has all closing quotations. But you also pay console. Let me spell something. Console that we go. Now, if you want to remain within the parenthesis, we need to use a variable. So the way we can do that is by going in here and typing in a dollar sign and the number one. And this just means actually, I think it also works without the number one slit just to this hit save. And let's see what happens when we do our example. Lg hit enter, and it doesn't work. It actually needs to have the one within it. So let's hit Save again. Try this again. Example console log, and it remains within there. And now, what if we want to have two variables? For example, you know, JavaScript has a, a short snippet for a for loop. So if I type in here for each, and I go down here, you'll see I get this internet snippet JavaScript language basics. So array dot foreach element and this actually within a, within an arrow function as it is within an error function, but it's only one function, so you don't need the parenthesis. So let's try it. So if I just type in for each hit Enter, I'll get this snippet. Now you know that we actually need here a, say, const of some sort of array. Array, let's say on a course, cars and assign this to a array of Ford, BMW. Justice who cost and let's say Adi. Ok, so it save, and this course should go in here. So for each car, we want a car, and then we will call this car, and we're gonna assign style to it. And each color should have a color of something, something like that. Now how can we do this? How can we create our own snip it with different variables? And this is a perfect example. Let's go into snippets and we see we need to do this, so we will have 12 and here's a third one, but it's the same. So two variables. Now let's do this. And I actually going to hold this in a copy that control C, go within JavaScript. And, and lets say this will be a array costume, array snippet. Snippet. Okay, so let's do this. Actually need here a, I'm going to paste this one in. And I'm going to also paste, copy and paste this way. So 44 array, let's just see cross. Or exemplary. Doesn't matter. Cos r x r x r. Ok, and this will create Malkin competencies. Cut this up Command or Control X. X for all the Mac uses MPC users. And we need here quotation, double-quotes. And we also need here double quotes. Now, here's offers variables. So this would be dollar sign one. Then for the call will be dollar sign two. And here we'll have also done assigned to and connection part because I don't need it. Okay, now for the description, now need to go back with this one's go back here, and so go back here. And for the description we'll call this will create a custom array. Okay, so let's try discretely out. Go back in here and less typing X, x R. And you will see here the first one is blink, and then we have two more variables. Let's type in your cars and then tab, and it will jump to this too. And we'll type in here, we will type in car. Okay? Now, if we hit Save, This is our custom array and we can do now, and I can do now style dot color again. Okay, now let's see where our slip 16. Now let's give another example. If we are snippets are extremely useful. For example, if I would do add events less than a normally a add event listener, which is commonly used is for ID. And you will do something like cons. And unless just say for name, who use document dot getElementByID. And within here we will have the same name within a strings of name. Okay, we use our name ID. Now, if we do this, we can create a quick snippet exactly as we did for the, for each loop. So let me just come copied this, going to go down here. Create a new costume. Next, let me paste it in here. Paste it down here. I'm going to put in here comma copied the above on basic down here, and I'm going to cut this out and replace it within here. Kay, this is not good and we don't need you. So this will be a cost. Get element by ID, okay? And we will use.get id as the snippet. And this will get the cons with a dollar sign here, variable and here the same variable. Okay? And this create a costume. Get element by ID. Now, okay, let's try this quickly up. So let's go back into JavaScript and let's see. I did type in him. Can, I gotta get, okay, so that's C, get ID. And didn't I save this? And say, okay, now it's a solace that get ID. If I hit enter our get here my ID and let's say name, and we'll have our name. Alright. Now another thing we can create this for example. I could also use this for addEventListener. Let me, I should do a event listener. So you also have this example. Now you, normally you would have something like Const and then a name. And actually, let's say columns, they button. Let's do this. So using Quigley snippets, I would just say get ID. And I'll use the button. Ok, let's save this. And now I would do something like button dot, addEventListener. Listen for the common full colon thing for adding an event listener to a button is a click. And when this click happens, you'll use a error function. And this function will do something. Now only by having this, only by having this little part. We already could create a snippet form, this one. Okay, so let me copy this. Go back into the syntax, basically any here. Also copy this one. And let's see here, costume, event, click, click, click, click event, events, clickbait, face less typing here, a Eve click. And we know that this is going to know this add, add event. Listener. Okay, now let's change this. Let's cut this out and paste it in here. And let's go back with this one, a few lines of code. And there we go. Now this should work. Let's save it. So it click and go back into JavaScript. And now we would just do So button dot. If I actually can do this. So what I can do a 100 and civet, I'll need the variable here is, let's replace here the button with a variable. Let's save it. Let's go back into our JavaScript and let's see at or IV click. Let's hit Enter. And for this we will use our button. And we basically, and we basically did the same thing. Quick Edit Event is. Another thing you can do is for example, for a for loop. Now if I type in here for Go down here of our snippet, you would see for lead index equals 0, then index small as the length of the array in increment index plus one. So you can do it by itself and const elements. Let me hit enter and let me explain. Let me explain to you how this is done. Now, instead of using numbers, we could use indexes. Now I'm going to copy this. Go back and dust snippets, pace it in down here, copy this one. And I'm going to rename this cost term for loop and x four for the prefix and take this out of here and replace it within here. Now, the way we do this is before the index would add Ave, we'll sign. And also here. For the array, the array would be the second one, and the index will be the first one again. Now array index k. To go back with this one, The only to be on one line. Okay? And this is towards the control Z. There will this add a and this will create, create a costume for loop. Okay, let's hit save, and let's try this out. So X4 is our example for loop x four. Let's hit Enter. As you can see for the first one, you can now just type in, I hit Tab. And the second one will be costs. It save. And there's already, actually don't need this one down here. There's some dots here, okay, so I hope you understand snippets. As I said, this is extremely powerful. Stems are some of the most powerful features of Visual Studio Code. 21. 20-Essential Keyboard Shortcuts: Now what would be a developer with our shortcut case? The idea, the ideal developer never touches the mouse. At least they say they don't, believe me, a touchstone mouse. A lot of times. Sometimes it's also good to touch mouse. Don't worry about it. But if you want to use shortcuts, then there are a lot of sugars you can use. Just goes in and actually going to just go over my preferred ones. And I think first of all, show you where are the shortcut. So if you go down in your Managed tab and you will see here keyboard shortcuts. Boom, here are all the keyboard shortcuts. And if you're on a PC, then you will see differential curves, but they are pretty much the same. Now let's go over a couple of them, which in my opinion are Maslow's. Now Command Shift P is essential for knowing this. It shows the command palette. In the command palette, you can search for absolutely everything. In social profiles. You can search for settings, you can search for absolutely everything. You can close a member by typing, escape, by hitting IX tape or clicking somewhere else. P or Command P on a MAC is a quick open. It can open up each and every files with the year folder. Okay, so if I want to jump to this HTML file, or if I want to jump to this CSS file. Now, we know that we can create new files Control N, but we can also create a new window by holding down Control Shift. And, and this will open up a completely new Visual Studio Code window where you could open up a new project, for example. And if we wish to close up that window, window instance, then we would hold down Control Shift and W. As we close our instance. No control plus recommend plus will increase or, or zoom in the entire window and control minus or command minus, we'll zoom out. Command S is safe, but Command S. But Command K and S will open up our keyboard shortcuts. And you may already know this simple commands like command c for copy, command v for paste, Command X, or Control X for cut. And of course Command Z or Control Z for redo or undo. Now if we are on a start of the line. So if a here actually demonstrated here, if I'm here with the cursor and click on Command C, then go online down. I can Command V or control the copy and paste that entire line. If I hold down Alt and use the up and down arrows, I can change a specific line. So for example, if I want this car, this clans of cars to be on the NIF, the var name to our hold down Alt and then press down and it was switched places. Of course, if I want to go up again, I just need to click on arrow, an arrow up. And if I double-click on something and to select the entire world. If that, if that word is more often used in the text, then the first one would be highlighted and the rest of them will be lightly highlighted. Then we can use Command D, and it will select the next line, the next one. But they care. As soon as you reach the last one, you hit command D Again. It's a start form the top again. Now we already saw this in fine, but if I had a hit Command F, then I would find something. And I say, I want to find cars. And if I hit Command each Now in our compressor, replace and replace this with with fruits. And that's a pretty useful function, is holding down Alt and clicking. Now let's say I want to change. And the best example is normally an HTML where the UI with the plus a, actually I want to integrate in LI within it times with it texts of this term. And I want to have this free times. Now if I want to type in here 123, I cannot do select the item and go and select all three of them and I could jump through it and type pain 123. This doesn't work because I'm typing in the same thing all over the place. What I could do, I could now just hold click, typing, hold Alt again, then click, then hold Alt, then hold Alt again. And as say one through to type in here then something like item two. And if I want to open my sidebar on the left, I would just hit Command B. So opening up then Command B again, and this will close it up. Now let's pretty much it for basic shortcuts. Now let's also take a look at how can we well edited a few shortcuts. 22. 21-Create you own Keyboard Shortcuts & New File Extension: They could also create your custom keyboard shortcuts. You just need to go to settings to manage than keyboard shortcuts. And if you just double-click on one of them, there, it'll open up an editor. Now I can type in here for example, hey, this should be a combination, so command and all, and right, and something like that. But if you don't want to use a very fussy, I don't wanna use this. They can just hit escape and go back. Now, you can customize and edit each and every shortcut. And I think it always showed you that that new file sharing you advance file was it. If you create a shortcut that is the same as the default shortcut, then your shortcut, the user shortcut up here where it says source receded the user shortcut. It will override the default shortcut. For example, if our take copy and I'll create a different one. So let us say command CC and hit Enter. Then this will be now the user's command. But, but honestly, there's extremely stupid. So let's go back to command C. So yeah, as I said, you can change and modify each and every shortcut Jewish. And you could also import shortcuts. 23. 22-Import other Keymap extensions: If you come from something different like Adam or sublime tax, or you were Visual Studio, then you have your own set ofs shortcut keys. Now would it, wouldn't it be nice if you could just import them and use Visual Studio Code as, as you use Atom or Sublime Text. Now this way we can achieve this, we would go into extensions, NS search for Sublime Text, keyboard shortcuts. Actually sublimetext Ki Map and settings importer. Now if you, if I would install this, this will install the exact keyboard shortcuts the Sublime Text head. Another one would be Adam, so does LM chemo map. And I think that's all. I don't know if bracket has one misstep in brackets, doesn't seem to have undoes the bracket pear colorize a. But I know Visual Studio has one and teleco studio mapping to this SKY MAP Visual Studio. Yep, there's all. There would be additional cost for Visual Studio. Now, as I said, if you come from something else, they could just import your shortcuts and use Visual Studio Code as you have used your code editor. Okay, so that's pretty much it for shortcuts. 24. 23-VS Code own Color Themes: Now after a while you can get bored with higher code looks or how Visual Studio code looks. And there's themes come into play. Now Visual Studio code has some integrated themes on its own and also some icons. So if we take a look and we could actually go to our manage code down here, color themes. But first of all, let's look at icon files. Goes right here. On the left side, you can create. And let's just say we create a new file and call this index index. But let's create the style dot CSS file and also script file, new file. This'll be a type script dot ts. Then we also create a JSON file, css file. If we take a look at the icons, JS, HTML Ts for Type Script and resource style or CSS file. Create another one. So let's get the news style dot CSS file. And let's delete this HTML. Okay, so there's a JavaScript HTML, CSS and Ts for type script. And let's, let's create a JSON file. Let's delete this data.dat JSON. And there we go. Okay, so let's say we have this typically for type file type styles. Now if you go down in this section and edge icons and click on the File icons theme. Then we can, well, we can select None. We can select Minimal. And those that are installed images to do code. So this will be lecture non standard and the north-south, the normal icons. Now, we also have themes. And to demonstrate this, let me actually go here in the JavaScript. Now my preferred theme, also for creating tutorials and educational content, is the basic theme. If we go here on color themes, then you will see, will get actually close this one up. So you can see this. Now let's try this again called manage, and then click on Color Themes. And also the shortcut for this will be command t. So let us start from above. We have Visual Studio theme and also love him. Plus the difference between these two is, so let me have open command palette here. Let's open up our themes again. And I scroll down. Now, quite light. I don't know. If you like this, then be my guest, but are more darker theme guy. Also, if you want this one, or this one is cool, the theme. And then we have our standard dark Visual Studio code. Not my preferred bond is dark plus dot plus default dark. And this is because if I have here const, and let me also create a let, let us call this name. I'm just going to initiate this one. And I can see that the LED and the const, so two variables. And also if I would declare a var name to see the basically the same, but the cons has a darker blue and this one has a lighter blue or a keel almost. And also the wave functions are colored. And so far, this isn't my perfect theme for all, for all around theme. And also because most of you, when you get started, you'll get this basic theme. Now there are also a couple of other themes. Like there can be dark down on K and MongoD island, disapproved nice themes or this red one. Solarized Dark tomorrow night, blue. High-contrast UI, if you like this one. Windows 99 and yeah, initial feet. So I would stick with this one. They also PUFA means that we can download them. Pretty awesome. So let's take a look at a few of them. 25. 24-Extensions for Custom Themes and Icons: Now if you're not satisfied with the themes that Visual Studio Code provides you and also the icons you cut down a couple of pretty awesome themes. Now recommend two types of them and we'll go through them. But there are literally thousands of there. Let's take a look at what kind of things you could download. Plus what is the material theme. And this, not only that it has the material theme, but it also has a material icons theme. And I'll recommend installing them both. I'm going to install them both. And it's automatically changing. Thus for store go food icons. So let's take a look at what kind of icons they, they provide us. Let's go in here and now let's go to File icons. So managed fire, icons, themes, and who. Now we have a few of them. So let's start with none. There Material, Icon, Theme, verse. It is a typical HTML5 and CSS3 thing, or icon for Vegas. Now as you can see this a typical HTML5 and CSS3 icon. So let's go down. Ooh, I just change them. They want to do this. Take the next one is a, this will be Material Theme, icons. This is more like cartoonists and also this one is called Tony. Actually need to select them. Dan would have this one pretty much the same. Then we will have the minimal, which is the default. And I would just suggest to stick with whatever is comfortable for you. So on and to leave it at material themes. And now let's check out the themes, so called Themes. And now so it gets interestingness go completely off. So after this starts our community material theme. Now it's also open up a JavaScript file. So here, JavaScript. And let's remain here. Now I could close up this extension menu. So let's go into themes. Now, as I said, themes are merely cosmetic and whatever fits you the best, then choose that one. So let's see community material, 30mm panel, panel night high contrast and also this high-contrast out pretty popular. Hume pale ocean night, ocean high contrast. Also simple that theme material contrast. Material, dark. Community theme. I think they also had their ego. Material, simple thin material, dark material, dark high-contrast, ocean or Sean palette. Well, as I said, you can choose whatever theme you want. But typically, people stick to more darker themes because sitting in front of a monitor will hurt your eyes and you don't want to get I damaged sitting, long pans empower monitor. So just choose the thing you like, the most secluded and well, when you get bored of it, change it again. Okay, now there's another package for the themes. And this is not a package, but it's a pretty awesome theme. So stamping cobalt two, and it's actually the official theme from West bars. So let's just install it. And there we go. It's already in there. Let's go to JavaScript file. This is a pretty awesome team actually. But well, it's a matter of paste. Ok, so this pretty much it for themes. As I said, themes, it doesn't matter, that doesn't help you. Code better. Be called fair asserts mainly something visual. And if you get tired of your theme and you can change it, who wants to stare at the same cold all day long? 26. 25-Customizing your own Theme: Let's end this with customizing your own theme. Sooner or later you will get fed up with all the themes and this way to customize them. So you can customize a 50mm pi going in. I actually open up your command pellets. So control, control shift or Command Shift P. And typing here, themes can go into Preferences, color themes. Now within you, you will choose the developer generate color themes from current settings. Now you go in here. Here is where you can change your themes. This can see you could cheat active, br active are the color here. You can change the background color, you can change the border color. You can change colors for each and every small little item of a theme. You can see here in the minimap, there's a lot of things you can change. Now, if you wish to do this, have fun, will take you a long time, but maybe your board and you can change a couple of things and just to get it perfect. So it's looks and feels like you wish. Ok, so that's pretty much it for themes, I believe. Yeah. 27. 26-The Terminal: An integrated terminal and Visual Studio Code is one of those things you cannot live without. Now, depending on what system you're using, you will have different terminals. For example, to open up the terminal on your Mac. So not the integrated terminal, but the basic terminal which is in your operating system. You need to go to spotlight. We need to open up spotlight and search for terminal. Now this will open up your terminal in your Mac. On a PC. On the other hand, you could either go to start, open up, start anti-obesity, MD, or joyous. Hit the Windows button and type in cmd. Hit enter. And this will open up the terminal that is in the windows operating system. And the command prompt is default on Windows operating systems. And the terminal is default on Mac operating systems. Now to open up your integrated terminal on Windows machines, you will need to hit command and back ticks. That will be the key left for your number one key on the keyboard. And this will open up your integrator terminal. And on a Mac, you would need to hold down command, options and o. And this will open up the integrator terminal. Now by default, in Mac, the default shell will be z h, but on a PC it will be PowerShell. You can obviously change both of them as you wish. You could have Bash or there was a lot of terminals out there, just choose one and use one. Now something that the integrated terminal is not as good as using an external terminal. But I'm pretty much happy with the integrated terminals. So whatever you choose to use, as long as it's fulfills, you need another set. Don't get married to ideas. Just use it until it works. Now for example, if I want to open up on a Mac, in other instance of the terminal, you see here we have this plus. For this I need to do control shift until now. And now you see I will have two terminals open on a PC. On the other hand, it's Control Shift, tilda. And this will open up in other PowerShell. Now in order to close the terminal on a PC, I would do control till the, again is a closing up. But on a Mac, I cannot close it up with recommend options o because this would just open up another terminal. In order to close the terminal, we can close it from a close panel using the X sine right here on the right. Now you also check out all of the shortcuts that the terminal has by going manage tab and then keyboard shortcuts and typing in terminal. There will see here all of the shortcuts that you need for a terminal. But what you could also do, open up the command palette. So, you know, I'll go manage and command palette or Command or Control Shift P, N type in terminal. And this will automatically give you some functionalities for the terminal. For example, stop command open in integrated Terminal, clear terminal, Debug Run Turner clear. And if we scroll down, you will see all of the shortcut case and all of the actions. Now it's opened up. No, again, in order to kill a instance will go on this trash can, can see it's going down. And the same thing on a PC. It's open up a terminal again. We have two shells opened. Now want to kill one quantity trashcan, this would kill them if I want to maximize a terminal. And this is the same sign for Mac, MPC will push it up. If I wanted to push it down again, push it down. If I want to open another instance again from the plus sign, I could do this and I could also split them up. And you will see on the left side and on the right side now eternal, if I kill one instance, did this actually didn't kill all the instances? You just killed one of them. So it would open it up again. Now these are two separate terminals now, not two separate instances. Iran to open here up another instance and then trow, choose the first one, you see it's again split up. So let's kill them all and have only one open up. Now we could also change a couple of things for our terminal, for example, the settings. And for this, let's just go to settings. And let's go that's actually closed the terminal down. Let's search for terminal buffer here we can change what kind of terminal one to use integrated external. And we could also install a few other terminals. And you can also do separate set settings for Linux, OSX, and Windows. Now, if your cursor for the terminal, for example, at interests open up the terminal. If a crystal is too small or too big, you can change it from here. Say five, you could change the scroll sensitivity if you wish. You can change the font size. So let's try 15. You can see the font size is now larger. You can change the font weight. You can change the font and the font boldness. You can change the letter spacing. So if I would change this to two, we tend to consider spacing now, increase the line-height. Now I will just leave everything as it was. Also go here, hurt him back, scroll speed. Scroll back. And yeah, just scroll through it and make a terminal look as you wish. Ok, so now that we are acquainted with the terminal, we can now move on. 28. 27-Setting up Sync: So I believe that you are using multiple workspaces to work on your code. Now what would happen if you want to have the same work place experiences and one place NSA workspace experienced in the other place. And then means you should. And that's, and this means you should have exactly the same Visual Studio Code in both places, all in three places. If you're traveling, for example, you can have one at work, one at home, and one when you're traveling or you haven't vacation, you just code. Okay. And so that's what I'm trying to say. No, don't do that. But what you can do is have synchronization setup. Now, there was an extinction or there still is an extension. Let's go to Extensions and a tree. Let me show you this. So this typing here, sink and desolate, DES was it setting sync? Now what will this do? Proves known as visuals through Coase setting sing. Suppose y being free and open-source. So what can it do? Well, its key features will be to use your GitHub account token and gets easy to upload and download on one-click shows summary pages on blower law to upload later settings and stock about to upload settings on pilot changes, share the gets with other users and let them download your settings. Support GitHub, enterprise Sue ports, programs with at sink keywords, Hot, host and so forth and so on. And what does it sink all extensions and complete user folder. Folder that contains setting files, keyboard, key binding files, launch files, snippet files is very important as you all of these are important. So visuals to record extensions, extensions, configurations, and work praise folders, shortcuts, upload key Shift Alt plus u and obligation at r plus d. Now, we don't need this anymore because Visual Studio code now has this little icon down here. Me close up the extensions, which does the same thing. If we click on it and tell me when I'm actually logged in to git hub right now. But what if this is my work? Well, my workspace. And we have here our home Visual Studio code. I have here opened up my Visual Studio Code stabilization. And this is the insider additions. So in order to set this up to be succinct with this one. As you can see also the zoom in is different. We have different font styles. Within an HTML file. Should have the font styles here, and we have here the regular farm size. So as we go down here, and let's turn on sync. Okay, and this S we now, Hey, do we want to serve on singing? Yes, I do want to turn off saying, no, what do you wish to sing settings, keyboard shortcuts uses snippets, extensions, and UI state. Yes, everything. So you don't want something then uncheck it. Now sign in and turn on. Now, consigning with actually asked me first of all what I wish to sign in. I want to sign in the inside the addition because in the stable Alicia, I M already signed in. So let's click on insider and asked me, what do you wish to sign in with? The wish to sign with a Microsoft account or with a GitHub account. Now I will go into signing with a GitHub account. Let's click on this and this will send you to GitHub and you just click on continue some authentications. And there we go. Now this will take just a couple of seconds and setting seemed detail is turned on. Okay. So this was synchronized. Now let us see we going here. Trusted extension's. Now we'll click on sync now. Go back to visual pseudocode. And within here or here, and extensions go on to things sink is on k. Now let's make this one larger. Is the current. Now going to go back to the other one. So let's go here and now, let's click on sync. Now. Going again, settings and show Settings, Show sing, date. What do we have here? And we also make this one larger case. So let's click on this. We can edit it here. Now is go back to the other one. And he does should be, there shouldn't be this one. So things are France on. To, first of all, if we click through all of these files, you will see your your UI states, your settings is all JSON parsing. It also opened them up and see what has changed. Now let's close all of them up. Let's go back to our Visual Studio code. So we need to sign out. And it's assigning again or turns sync. And we're going to turn on sing. But this time we're going to take the stable edition. And what this will do, some sanding with GitHub again will now merge. Now inconvenience that emerge mentally. And we wait just a second here and drag this down. Okay, so these are all our settings that we did in the other machine. Let's check this out. Set remote. If we click on Accept remote and turn on sync. Now, now it's going to sink. This addition is, you can see already did themes out changing the settings are changing. Everything is changing up here. And now I have both machines in here, so inside their Mac and my other Mac. Okay, and now if I would go back, let's say this one. It's actually, both of them know OPA and this turn out, exchanged a terminalis. Drag this back here. And let's say I'm going to, so this is the insider addition. Let's say you're going to go here and say I'm going to change a theme. So let's go to color themes and change this to She just to cobalt two. Ok, so now let's go back to the other theme is wait a bit. And boom, this all changed. So this period. And yeah, that's all about sinking. So hope your sync up now. 29. 28-What is Node JS: Hello friends, and welcome to NodeJS. Now I'm going to try to keep this presentation short and simple because no JS is so deep and we can learn so, so much about it. So if you ask yourself, what is NodeJS? Let's actually JavaScript that runs on your machine, PC, or Mac. Up until now, we could only run JavaScript in the browser, because the browser was the only one which had a JavaScript engine like the V8. But now it no JS, which is also created with a V8 engine. We are able to run our own JavaScript without using, without using a browser. Instead, we will use NodeJS internal engine. Up until the state, NodeJS is the most popular for building servers. It is really for has ended community is huge, which in terms means that the support is also massive, which is really important when you want to decide on a technology. Solar is no JS in simple terms. It is not a language. First of all, it is a runtime of JavaScript. It is a synchronous event driven. As I said, it is built with a V8 engine, exactly the same engine which was used to build JavaScript in a browser. And as I said, we do not need any browser to run a JavaScript, but as you'll see, we'll just need a terminal and we will run JavaScript on our own servers. And the best thing about NodeJS, it runs on all platforms, Windows, Linux, Unix, Mac OS. So should you learn no JS uncertainties, Yes, but why should you learn it? Because first of all, it's fast, it's efficient, and it's highly scalable. And because of this free, huge companies use NodeJS. No, JS is an event-driven non-blocking IO model. And as I said, is extremely popular, which is essential for having massive amounts of information. You can search the web for NodeJS and you will find for each of your problems almost instantly the solution. It uses the same language for the prompt and end the backend. And the best thing about it is if you know JavaScript, then no JS. So what can we do with no chairs? We can generate dynamic page content. We can also create open read, write, delete, and close files on the server. This means we will have access to all of our files in our server, recreate a server Xs the files within it and then manipulate them. We can then collect form data. For example, if I create a user type in my information, it will be stored on a server. Then we can add, delete, and modify data in our own databases. Let's say the user updates his data. All the data will be stored in a database. You can access it and push it back to the user. The most common projects that are built with no JS, arrest APIs, a microservices, but also real time services like chat applications. And of course, most commonly, crew labs create, read, update, delete, for example, blogs, shopping carts, and social networks. So what is in no JS file? First of all, they contain tests that will be executed on certain events. It typical event is someone trying to access a port on the server, but this event must be initiated on the server before having any effect and not before. And of course, no JS files have the same extension JS at the end. Okay guys, so I hope you're excited. Let's get into NodeJS. See you soon. 30. 29-Getting started with Node JS: Let's get started using Node. Hostels. Go to Google, search for NodeJS, coda homepage. And you will see there's a LTS version and a current version. The difference between these two is that this is highly supported. It has all the updates, it has needs, and this is a bit unstable. Ok, so let's get the recommended version. So let's go ahead and download it. And then let's install it. Now the installation is pretty simple, straightforward. We have it installed. So asking me to change yes. Nodejs fall, Yes. And next and change. And we finished. So where do we run no JS? Well, first of all, we could open up a command when your windows, I will also do a Mac version for this. So if you go downloads, first of all, is the installed version for Windows than for the Mac. Okay, but this automatically recognizes on what you are, Windows 64 bits. So let's find no JS Oakman, our command above your window tab. Type in here. Cmd command prompt. This is your command prompt and I finished zooming. Ok, hope you can all see this. There we go. So let's type in here. Node. Welcome to know gs version 12183, exactly as we downloaded it. So what is No, just what can we do in it? And we can write JavaScript. We could also write simple test like a. A is equal to epsilon, a is equal to one. Then b is equal to two. C is equal to a plus b. It enter, we get free because also define variables. And actually put this up here and this a bit larger. So let's say let name is equal to the string of Norbert executed and we need to call name. And there we go, dog. But now we can, for example, also do let. Firstname is equal to Norbert. And then let lastname D is equal to. And thought. I know that there's a syntax error, but now we can do name, which is Norbert. It already tells me there's an orbit is equal to firstname plus the empty string plus lastname. And a close up the last name. Lastname, equal to okay, and now name, please equal to firstname plus a empty string. Lastname. Close it up and we get Norbert my heart. So as you can see, we can execute JavaScript within our console. But this not where we're going to work, will actually work in Visual Studio code. Now just created a empty folder called NodeJS. And up here you'll see the terminal, click on it. New terminal, and this will open up your terminal. Now, if we go in here and make sure she zoom in a bit. So let's type in node. And the same thing. Welcome to know JS. You can do again, a equals one, B equals two. C. B equals two. C equals B plus a, doesn't matter, and it's free. Okay, i, So next video, I'm going to show you how to update no JS because it could be that you're on a different version when you're looking at this course. No problem, no JS will work as long as it download the current version. So seeing that axon TBI. 31. 30-Setting up Node JS: Now let's install NodeJS R max. So let's search for NodeJS in Google or just NodeJS and your browser hat. And this will lead you to no JS. Now, depending on the system you're installing it said you will get are the Mac or the Windows version or Linux version. So let's get the recommended version. That's down on this, save it somewhere and install it. Okay, so the installation is pretty straight forward as it is for the Windows version. The difference is that Mac uses a whole lot of identifications. So we got no JS installed. Now let's try it with where is no JS? Well, it's in the terminal, so let's open up our terminal and type in node. And after we type in node, you will see it will spit up the current version, which is version 12190. For now, if you're watching this video later on, then you will have a different version, not know Jay NodeJS cams installed with MPM with order no packet managers. Let's just create a quick application in notice, oh, let's open up here. Nas to see main.js. Let's create a new file called main.js. Let's split here we quick causeway HTTP, so Const. And this we will set to request HTTP request and it should not be capital R. Then another cons for host name, which will be just in general IP 00127, 1.0.0, 0.1. Close this map. And then another cons for the port. Port. We're going to set it to 300 thousand. Close this on up. And now let's go talk cons server and set this to HTTP dot create server. Going to sit in here a callback function or requests resolve and error function. And we'll set this to a rest dot result will be raised. Status code equals to 200. So it has been resolved. And unless the set header of contact type content not contact. And then a string of test slash plane. You can always close this one up. And the last thing we need to do within here is res dot end of helloworld. Okay, now let's close this one up n. Now we can type server dot. Listen because we want to listen for the port and the host name. And also need here a function which will just console.log. This string of server running mode typing here just that serving is running at HTTP. And we're going to setting the variable here of named. And also the port, this port right here of 3 thousand. And they would go and we need the port in here. Okay, so now we can go down to run this. We'll type in here. Node main dot js hit enter. So let's open up another terminal. Made a small mistake there. And now let's run node main. Ab.js hit enter. And I can see server is running at HTTP, blah, blah, blah. And if we click on this and click on Follow link, then this will open up our Hello World application. So they will kick. I saw this pretty much it for downloading and installing and running the application on load. 32. 31-What is React: So if you never heard about three-act, React is a popular JavaScript library developed by Facebook for building web application user interfaces. The Visual Studio Code editor supports React JS, IntelliSense, and code navigation out of the box. React is component-based, which means that we can build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of template, you can easily pass rich data through your app and keep states out of the DOM. We'll be using the Create React app generator to create our first react. To use the generator as well as Rhonda React application server, you need to have no JS JavaScript runtime and npm as the NodeJS package manager install. As you may or may not know, MPM is included in no JS, which can download and install from no jazz Donald's to test that you have no JS and mpm correctly installed on your machine. You can open up your terminal and type node dash dash version. And also type npm dash version. To check the version of npm. 33. 32-Installing React: Now we can create a new React application by typing in n px Create React app. And it didn't here, we also have to give it a name. And by that I just created a folder called react app on our desktop and opened it in Visual Studio code. Now what you see up here, this isn't react. This is just an extension and we will install it. If we can install it right now. This is just for the snippets. Now, the last thing we need to do here, and Px creates React app and give the app and named. So let's just call it my dash. Now if he hit install, this would take a couple of minutes. So you can just kick back and relax and come back when the installation is done. Not as React is installed, you will see your application right here. Now also have installed your Node modules, which are a lot of them. Right here you have your application. So dependencies, your index, HTML, and so far, so on. So after finishing up the installation, you need to see the Indian application. And then do npm start in order to run your application. So let's hit Enter and we just sick. Now we just pseudocode wants to run my application, it okay? And we're waiting for service and completed successfully. And we'll see a browser will open up your first React application. And let me just grab it and pull it up here. There's our React application. If you wish to uninstall react, then you will need to type in npm install dash g for global V8. Dash React app, hit enter, and this will uninstall react formula computer. 34. 33-What is Angular: Angular is a popular JavaScript library developed by Google for building web applications user interfaces. The Visual Studio Code editor supports angular IntelliSense and co navigation out of the box. Will be using Angular CLI for this tutorial to install and use the command line interface as well as run Angular application server, you will need to have no JS JavaScript runtime and mb m, The NodeJS Packet Manager installed. Mpm is included with no JS, which you can install from NodeJS downloads. 35. 34-Installing Angular: Now on the PC, the installation is pretty straightforward. You open up the terminal. You would just type in npm install dash g If you want to install it globally. Space at angular, forward slash CLI. Now when you hit Enter on EPC, it will run on a Mac. Well, you see this wait a few seconds. No angular installed here in our Node modules. And then you'll see ally, a protocol. And normally, in order to do this, you will need to do something else. Also, leave a article on this, which I found on GitHub. But you should do, you should run the following code before running your installation. So before running npm install g, Angular, you need to run this code. Pseudo crown minus our dollar sign, whammy dollars on champagne, config, get prefix, and so forth and so on. And if we run this, it will ask you a password. Now the password that you will need to insert is your Mac password. So inserted password and only after that you will have the access to install angular. Now I'm not going to run this. But why? What I am going to do? Because we are now at the sudo delete this. We are now in our angular application, and this created a simple folder below before starting this and this installed my Angular app can see all of the dependencies. Everything is now installed within here. Now all we need to do is go into our folder here. So I'm going to cd into my app. And now we are in our application. And from here we can now run our application. And for this we're just going to type in and G and serve. Hit enter. And this will take a couple of minutes. But after this is over, we should see a is on localhost, hotels and something, something. And here is our application. Now, if I click here and click on the link, a command click OK. And this will open up our angular application. And there we go, our very first Angular application. Okay, so that's pretty much it for installing angular. Also, if you want to uninstall Angular, you can do this by typing npm install minus g minus angular. So use exactly the same thing that you use for the installation. And focus less CLI. Hit enter and this will uninstall angular form your machine. 36. 35-What is Vue: Uts is a popular JavaScript library for building web application user interfaces and Visual Studio Code has a built in support for the VGS building blocks or HTML, CSS and JavaScript. For richer view JS development environment. You're gonna solve view TR extension which suppose you JS intelligence code, snippets and formatting and more will be using the view client for the installation. If you're new to view JS framework, you can find great documentation and tutorials on VGS.org website to install and use the VGS CLI, as well as run the VGS application server. You will need to have no JS JavaScript runtime engine and npm, the NodeJS package manager install npm is included with no JS, which you can install and download from NodeJS. Downloads. 37. 36-Installing Vue: Now to install view, we need to open up our terminal and typing npm install. And I'm going to install it globally. Add view. They're CLI, hit Enter. And well, this will take a couple of minutes, but this will install UTS on your computer. Now to greet the app will now type in view. Create my app. You can choose whatever we want. This is just a example. I will go with view free preview table. And this will install all the dependencies view needs for creating your application. Now that all dependencies are installed, you can see here, in order to go into a folder are my app folder. We type in cd, my app, and this will bring us to our folder. Now we are in our application. To run it, we need to npm run serve and we hit enter. You'll see work into your view. And there's an IP address where our application is running. So let's open it and let's take a look at our application. And voila, there's our view JS application. To uninstall USGS, we need to open up another terminal or exit this one and type in npm. Install dash g. If you installed globally, view CLI it enter, and this will uninstall your application. Okay, so that's pretty much it for view. 38. 37-Setting up Python: Now go to python.org and you will land on this page from here. If you go to downloads, depending on the operating system you are on, you will either see Windows, Mac, Linux, and so forth and so on. If you want to choose a different thing, operating system, they just have to click on it. Now, I just chose windows, but I want to go back and go on Mac OS. So we're currently at Python 3.9. If there's a newer version, then by all means download deadline. So let's click on all Python less true Job 2's are prep, save it. Nfl download is finished. Let's install it. Okay, this will open up our package manager and let's just go ahead and continue, continue. Yes, I agree. User authentication. And there we go. Python is now installed. Ok, so now we can close this. So next up we need to go to a terminal. So let's open up a terminal. Okay, and let me actually zoom in here. So Control or Command Plus. And let's type in. So first of all, if a typing python and dash, dash version, you will get the Python two versions of Python two is already installed, but what we want to do is get Python three. So python three, just showing you this. If you have a, let's say python for something much newer version. So python three and version. Okay, so there we go. We have our Python PHP version of 390. Now in order to run Python, we just type in Python and enter. And there we go. Python is running on our machine, but this will run python two. So as we did up here, we also need to tell it explicitly to run Python three. So let's type in Python three, Enter and there we go. Now we, I'm Piper. Now let's go to Visual Studio Code. Lets also install here a extension which is called Python. Because we could actually do this. Let's just create a folder and some kind of folder. Say we created Python folder. My Python opened this up, open up the folder within Visual Studio code, and let's create a file. Let's call it my app, the app dot pi. This is the way we create a pipeline pile. Let's click enter. And as soon as it duties visuals to recall we recognize, hey, you're trying to write Python. Would you like to install Python because I could write here, print. You can see there is no intelligence, there's no nothing. There, no snippets I can do, for example, four or if statements or nothing. It doesn't recognize my partner on snippets or my Python intellisense. So let's go ahead and install now Python. Now this automatically sends students to this extension not installed enter. Well, we actually do not need later. For now at least. Kay, but Python is now installed and now I could do some luck for, and hey, there we go. You know, the, the boxes in our Snippets section, we explain this. So this boxes means that this is a snippet. So if I click on this for, so give me a Python snippet for target list in Express, and then pass and so forth and so on. So this will be a for in loop. Also we could do if, if I go down here and I will get, if I pass a simple if statement or a if else statement is I click on this, then it will print out a else if statements, if else. Ok, so let me delete this because we still need something. We need to set up our Python path. And we get this by going back into our console. So let's go back, hey, my console open somewhere. Come on console. There we go. And let's type in here. Import sys, import from the cyst. We can now import from the system o path and we get our executable paths by typing imprint. And I see a t here and within parenthesis, and now type in syst dot executable. And when we hit Enter, we'll get our path. If you need to copy this entire thing, click, right-click, Copy or Command C. And let's go into our Visual Studio code editor. Let's go to settings. Is open up our settings. Now in our settings file, we will just go up here. And this will open up our system settings.js, JSON or settings.js ON. And it doesn't matter where, just somewhere down here, we can now type in a new setting. So let's type in a comma, go down here. And now we could type in Python. The Python path, not Python ENV, Python path. Within here, we can now paste in our pair for a bifan executable. Now let's hit Save. Well, I still don't want splinter. Relax. Let's go back into a Python file and just test it out. If this works, we're going to create a simple Hello World application. So stepping here, print and within quotations we'll type in hello world. Okay, let's hit Save. No, I don't want you need to click on this little play button. And if we do this, normally in the terminal, helloworld should appear and the pipeline is working. Okay, so that's pretty much it for installing Python. 39. 38-What is Python: Hey, welcome to Python novice. Well, this is not a tutorial on using Python does is just how to install Python and especially how slings integrating it with our visual pseudo-code. So let's get started. First of all, with what Python is. Python is an interpreted, object-oriented, and high level programming language with dynamic semantics. It's high-level built in data structure combined with dynamic typing and dynamic binding make it very attractive for rapid application development, as well as for use as a script or glue language to connect existing component together. Python is simple, it's easy learns syntax emphasizes readability and for reduced the cost of programming maintainance. Python also supports modules and packages which encourages program modularity and code reuse. Often programmers falling in love with Python because of the increased productivity it provides. So let's see how can we install festival Python.