HTML: Using VS Code

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:

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:

0: Introduction
1: Your first HTML page
2: Text tags
3: Attributes
4: Links
5: Images
6: Lists
7: Head tags
8: Container tags
9: DEMO Using CodePen
10: ▶︎ DEMO Using VS Code
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!