Setup: VS Code, a Browser and Node.js

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

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

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:

<!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.

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

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:

node --version
npm --version

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

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

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

Cheat sheets

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