In the previous demo I showed you CodePen, a cloud code editor.

In this demo I’ll show you how to install VS Code, a “real editor” that’s wildly popular.

We’ll have a separate unit dedicated to VS Code, here I’ll do a brief introduction.

It’s an editor from Microsoft that’s free, is fast, has lots of plugins.. it’s a solid choice. If you don’t know which one to use, pick this. It works on any platform: Windows, Mac, Linux.

Download it from here: https://code.visualstudio.com

If you want to use another editor, there’s no problem: you’ll be able to do the same exact things in all editors.

Once you download and install the code editor, start the VS Code application and you’ll see a welcome screen. Go through the steps to set things up:

Once you complete that initial setup you can work on your HTML files in there.

You can drag and drop files into the editor, or you can use the File menu to create a new HTML file.

What I generally do is, I drag a folder I use for my project into VS Code itself, dragging the folder icon into the VS Code window. This opens it, for example here I opened an empty testing folder:

From here I can click the “New file” icon:

And this creates a new file I can call test.html for example, and I can fill its content on the right:

Once the HTML file is saved using the File -> Save menu, or hitting cmd/ctrl + S, you can double click it on your computer and it should show the result in your default browser.

Lessons in this unit: