Visual Studio Code [Best code editor]

Sunday, August 14, 2016

Last week I was part of one programming contest where I was moderator and maker of challenge, and one of the submissions was from one very young girl that said that she was made her simple website with HTML, CSS and JavaScript in notepad. She does not have Visual Studio (She was using Visual Studio at web design/development course).  At that moment I realize that topic for this blog post will be about Visual Studio Code. How to install it and use it for simple web design/development at the beginning.

So in order to start with web design you can use "new" Microsoft code editor called Visual Studio Code we need to download it and install it.

Note: This will be very simple tutorial with download and install steps but it is for our youngest members (kids) of dev community, and the best way to start coding is with this code editor.

In this tutorial I will cover some very simple steps how to get started with it.

Download Visual Studio Code:

First of all we need to download it and install it on our machine. Go to this URL

Click on big green button Download, and wait for it to download it for you. After you click on button wait couple of seconds and this very lightweight code editor will start to downloading. Size of file is about 30 MB so depending on your download speed it should be done after couple of minutes or seconds.

Install Visual Studio Code:

When download file is done, click on it and follow the steps bellow:

At first screen go Next, at second you need to accept terms and conditions so select I accept the agreement ... and click on Next, if default installation path is ok with you click on Next, after that also Next.

At this screen by default this selected options are good for you. you can also select first one to create desktop icon for you.

After Next all you need to do is to click on Install and after couple of seconds you will have installed your new lightweight code editor Visual Studio Code.

After installation is done you will get this screen and you can launch Visual Studio from installer or you can launch it later.

First simple Website (HTML, CSS, JavaScript)

A lot of our new young dev member start coding with these three languages so I will demonstrate how to make very simple hello world web site in order to get started with Visual Studio Code.

Find VS Code installed on you machine like any other App and launch it.

For this tutorial I will make new folder on desktop which will be folder for my new website.

Open new folder and right click inside of it.

Click on Open with Code and this will open your folder in VS Code. As you know or don't know code editors does not have like IDEs wizards to create new project ets, to create new projects we use scaffolding generators but this is advanced topic for this kind of simple tutorial.

When VC Code starts you will get screen like this:

On left side we will have our files and folders. In order to create new folder or file right click on the area and create file/folder that you want. I will create in this tutorial two folders and three files.

Folder: css and js
Files: index.html, style.css and script.js

My simple website and project structure looks like this:

To run this website you can drag-and-drop index.html to the web browser.

I hope that this very simple tutorial was helpful for you. As I mentioned at first I heard that some of youngest code beginners that was coding website with Visual Studio at courses or lectures now want to code but they don't have Visual Studio. Of course Visual Studio Code is very powerful code editor that you can use for more advanced development but for this kind of need like simple web design and development it is perfect. If you don't have Visual Studio, Visual Studio Code is best tool for you.

Note: This was very simple tutorial with download and install steps. It is for our youngest (kids) members of dev community, and the best way to start coding is with this great code editor.

Best regards! Almir Vuk | AV Development

You Might Also Like