Once the Explorer sidebar is active, you can do things like adding files, and folders.

Move your mouse over the sidebar and you’ll see those icons show up:

Click the leftmost one to create a new file.

Give the new file a name:

Press enter, and the file will open on the main part of the editor on the right:

Note that at this point VS Code recognized it’s an HTML file, because in the bottom status bar you see “HTML” and also there’s a little icon <> near the file name, that’s an “HTML icon” assigned by VS Code.

Now you can start typing.

As soon as you type < to write an HTML tag, VS Code shows you a panel of suggestions.

You can use the up and down keys, or the mouse, to pick one choice. For example I pressed “enter” to select the first option, and it autocompleted the <!DOCTYPE> tag:

This is IntelliSense.

When you edit in one of the languages supported by default (JavaScript, JSON, HTML, CSS, Less, Sass, C#, and TypeScript) VS Code has IntelliSense, a technology that hints at autocompletion of functions and parameters, as you type them.

And extensions introduce support for many other languages.

You can open files side by side.

For example create a new file.

By default VS Code shows files in a tab bar, so you see one file at a time.

But you can drag the tab on the right:

or at the bottom, too. Or mix and match:

Hit cmd/ctrl+w to close a tab, or right-click a tab and click “Close”.

When you edit a file, you can see it has a big white dot next to the name, that’s to remind you it’s unsaved.

Press cmd/ctrl+s to save it, or right-click a file name and pick “Save”

Pressing cmd/ctrl p will show you a quick file picker to easily move in files on large projects:

Lessons in this unit: