# Setup: VS Code, a Browser and Node.js

Install VS Code, the Live Server extension and Node.js on Windows 11 or macOS, check them from VS Code's terminal, and open your first page in a browser that reloads when you save.

Novice · HTML · Web Development · Updated October 31, 2026

## After this lesson you can

- Name the tools a web developer uses (a code editor, a browser, Live Server, a terminal and Node.js) and say what each one is for
- Check that Node.js is installed by running node --version in VS Code's terminal
- Open a page with Live Server and see it reload when you save the file

## Key takeaways

- VS Code is a code editor, a text editor made for code. Live Server, an extension for it, opens your page in the browser and reloads it every time you save.
- A terminal is a window where you type commands instead of clicking. VS Code has one built in, opened with Terminal > New Terminal.
- Node.js runs this course's exercise checks. node --version in the terminal shows that it's installed.
- Use a current Chrome, Edge, Firefox or Safari. Pages in this course work in all four.

Every web developer works with the same handful of tools: an editor to write the HTML, a browser to see it, and a way to check the work. Setting them up takes about half an hour, once. After that, everything in this course, from your first page to the final capstone, uses the same setup. Windows 11 and macOS are shown side by side; follow the column for your computer.

## What you're installing, and why

| Tool | What it's for | Cost |
|---|---|---|
| **VS Code** | A **code editor**: a text editor made for code. It colors the tags, finishes them as you type and shows your files in a side panel. | Free |
| **Live Server** | An extension (an add-on) for VS Code. It opens your page in the browser and reloads it every time you save. | Free |
| **A browser** | Shows your page the way visitors will see it. | Free |
| **Node.js** | Runs JavaScript outside a browser. In this course it runs only one thing: the checks that tell you when an exercise is done. You won't write any JavaScript. | Free |

You need a computer with Windows 11 or macOS that you can install software on, and an internet connection.

## A terminal, in one minute

Most of the time you'll click buttons and menus. A few times in this course you'll type a command instead, in a **terminal**: a window where you type an instruction, press Enter, and read the answer. It's like texting a very literal assistant: "install VS Code", and it does exactly that, no more and no less.

Commands are typed exactly as shown, spaces and dashes included. If a command doesn't work, the terminal prints a message saying why, and nothing is harmed.

On Windows 11 the terminal app is called **Terminal**: open the Start menu and type `terminal`. On macOS it's **Terminal** too, in **Applications > Utilities**. Once VS Code is installed, you'll use the terminal built into it instead.

## Install VS Code

| Windows 11 | macOS |
|---|---|
| Open **Terminal** and type the command below, then press Enter. Click **Yes** if Windows asks whether the app may make changes. | If you already use Homebrew, type the command below in **Terminal**. If you don't, use the download page instead: you don't need Homebrew for this course. |
| `winget install -e --id Microsoft.VisualStudioCode` | `brew install --cask visual-studio-code` |

**winget** is the Windows Package Manager: a program built into Windows 11 that installs other programs by name. Either way, the download page at **code.visualstudio.com** works too: download the installer for your computer, open it and accept the suggested settings. On macOS, drag **Visual Studio Code** into your **Applications** folder.

Open VS Code from the Start menu (Windows) or from **Applications** (macOS). A **Welcome** tab opens; you can close it.

## A browser

You already have one. Any current version of **Chrome**, **Edge**, **Firefox** or **Safari** works for this course, and browsers keep themselves up to date. The lessons show Chrome's tools and name the others' where they differ. It's worth having two browsers installed, because a page you build should work in both. Windows 11 comes with Edge and macOS with Safari, so Chrome or Firefox makes a good second.

## Install Live Server

1. In VS Code, click the **Extensions** icon on the left (four small squares), or press **Ctrl+Shift+X** (**Cmd+Shift+X** on macOS).
2. Search for `Live Server`.
3. Choose **Live Server** by **Ritwick Dey**, and click **Install**.

Now try it. Make a folder named `html-course` in your **Documents** folder (the lesson *Files and Folders for a Website* explains why the name has no capitals or spaces). In VS Code, choose **File > Open Folder** and open it. If VS Code asks whether you trust the authors of the files, choose **Yes**: they're your own. In the Explorer on the left, click the **New File** icon, name the file `hello.html`, and type or paste this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello</title>
</head>
<body>
  <p>Hello from my own computer!</p>
</body>
</html>
```

Save it with **Ctrl+S** (**Cmd+S** on macOS). The lesson *The Page Skeleton* explains every line. Then right-click `hello.html` in the Explorer and choose **Open with Live Server**. Your browser opens with the words *Hello from my own computer!*

Look at the address bar: it starts `http://127.0.0.1:5500/`. Live Server is a small web server running on your own computer, and `127.0.0.1` is the address every computer uses for itself. It works the way a real site does: the browser sends it requests, and it sends back your files.

**Try it.** Arrange VS Code and the browser side by side. Change *Hello* to *Good evening*, save, and watch the browser change by itself. That save-and-see loop is how you'll build every page in this course.

![VS Code on the left with hello.html open, and a browser on the right showing the same words, reloaded the moment the file was saved](https://www.ask-codey.com/lessons/TODO)

## Install Node.js, and check it in VS Code's terminal

| Windows 11 | macOS |
|---|---|
| In **Terminal**: `winget install -e --id OpenJS.NodeJS.LTS` | With Homebrew, in **Terminal**: `brew install node` |

Or use the download page at **nodejs.org**: choose the version marked **LTS** (long-term support, the version kept up to date the longest), download the installer and accept its suggested settings. Node.js 26 is the LTS version as this lesson is written. The exercise checks work with Node.js 24 or newer.

Close VS Code completely and open it again, so it can find the newly installed program. Then open VS Code's own terminal: choose **Terminal > New Terminal**, or press **Ctrl+`** (Ctrl and the backtick key, to the left of the 1 key; it's Ctrl on macOS too). A panel opens at the bottom of the window with a blinking cursor. Type these two commands, pressing Enter after each:

```bash
node --version
npm --version
```

Each answers with a version number. Yours may be newer than this:

```text
v26.13.0
11.20.0
```

**npm** came with Node.js: it's the tool that installs what each exercise's checks need. You'll use it in *Exercise: Your First Web Page*.

## If something goes wrong

| What you see | What it means, and what to do |
|---|---|
| `node : The term 'node' is not recognized` (Windows) or `zsh: command not found: node` (macOS) | The terminal can't find Node.js: it isn't installed yet, or VS Code was open while it installed. Close VS Code completely, open it again and retry. If it still happens, install Node.js again from nodejs.org. |
| `npm.ps1 cannot be loaded because running scripts is disabled on this system` (Windows) | Windows' PowerShell won't run npm's start-up script until you allow scripts you've installed yourself. In VS Code's terminal, run `Set-ExecutionPolicy -Scope CurrentUser RemoteSigned`, type `Y` if it asks, and try `npm --version` again. |
| No **Open with Live Server** when you right-click | The extension isn't installed, or the file isn't saved with the `.html` extension. Check the Extensions panel, and check the file's name. |
| The browser shows an address starting `file:///` | The page was opened by double-clicking it, not with Live Server. It still shows, but it won't reload when you save. Close it and use **Open with Live Server**. |

## Check yourself

2 questions to try on the lesson page.

## So what

You now have the same kit professional web developers use every day: an editor, a browser that shows each save, a terminal, and the tool that runs your exercise checks. Everything else in this course is built with these.

## Key terms

- VS Code
- Code Editor
- Terminal
- Node.js
- [winget](https://www.ask-codey.com/glossary/winget)

## Cheat sheets

- [Setup: VS Code, a Browser and Node.js](https://www.ask-codey.com/cheat-sheets/html-setup-vs-code-a-browser-and-nodejs-cheat-sheet)

Source: https://www.ask-codey.com/lessons/html-setup-vs-code-a-browser-and-nodejs