Overview of the VS Code Text Editor

HTML Cheatsheet

• Download HTML Cheatsheet (PDF)
• Star HTML Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS Cheatsheet

• Download CSS Cheatsheet (PDF)
• Star CSS Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

Video Transcript

Lesson 2: Overview of the VS Code Text Editor

Now that you have Google Chrome and VS Code installed, I want to give you a quick overview of VS code. The thing is that when you are a new developer, and you download this software called VS Code or any text editor, they come with a lot of options, and it can be overwhelming. So in this video, I want to make you comfortable with a code editor like VS Code.

Now I want to tell you that a text editor is actually a very fancy software on the surface, but it is very simple in the background. The number one reason we use a text editor is that because it has something called Syntax Highlighting.

So let's say, if I go to the VS Code website and I go over here, you see some code has been written here, and it has different colors. That means it automatically highlights the code parts, so it is easier for the developer to read. You just write the code and it automatically makes it into different colors.

The second thing the text editor has, it has some help text. So let’s say if you are writing certain code, it is going to give you the different options that you can write along the way as you are typing. So as you are typing something just like in Google. Let’s say you go to Google.com. And you are doing a search, I write, 'make', and it just gives/suggests to me these helpful texts. So that is another feature that a text editor has.

So these are the two primary reasons we use a code editor, or else we can write code in any kind of software. We do not have to have a code editor. So that is the number one reason I want to tell you why we use a code editor.

The second thing that I want to get you familiar with the VS Code is that it has something called color themes. So if you select different themes, you can change the color of how your code editor looks. I like to stick with the default, so I am going to stick with my default colors.

Another thing I want to show you is that it has a lot of options here. So, for the most part, we are going to be using just the Explorer section over here when we have a lot of code, a lot of different files. It can help us explore those files, just the way on our computer. Let us say I create a folder over here. If I open this folder where I go to the ilovecoding video folder, all these folders that we have, show those files.

So let's say in a project I have this project folder. I create the folders like first-page and I import drag and drop this over here. It is going to basically show that in the Explorer section, you see the FIRST-PAGE over here, and now I can simply add files. So that is a filea.js, let's say if you are making a JavaScript file and I can just right-click and do the same thing, let's say index.html. And I can make more files here.

So if I create these files over here and I open my folder, you will see those files have been created in that particular project folder. So we call this a project folder and we import or drag and drop this project folder in our VS code and we can simply browse that over here. If you want to organize that into folders, I can just create a folder over here. And I can sub-organize these files if I want to drag this over here. I can just move this particular file inside this folder. So if I go inside the folder, you see this file. So basically, that is what a coder editor is. It is just simply the syntax highlighting and stuff like that.

Now it has other advanced features as well, but it does not matter. The point of the matter is that it is just a tool to facilitate a developer’s job. And if it gets very overwhelming, just ignore those features. Just like right now when I was playing around with this file, this particular thing opened up. Do not worry about it. I am just going to close it, that is all. We do not need it.

One more thing I want to tell you about the VS Code is that they are constantly upgrading it. So if your VS Code looks slightly different, maybe the colors are different. They usually have a purple here. Do not worry about it. They are just keeping on upgrading it. Some options, some icons just look different. I have certain extensions installed. So extensions are over here. So you may have a different extension preinstalled. I may have some different extensions installed. That is why it looks slightly different.

But the fact of the matter is that you just focus on the code that is being written, and you are going to be all fine. So with that said, let us start in our next video by creating our first web page. Talk to you in the next video.