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

Install VS Code with Live Server, a current browser and Node.js on Windows 11 or macOS, then open The Daily Grind's menu page and watch it reload every time you save.

Novice · CSS · Web Development · Updated November 1, 2026

## After this lesson you can

- Name the tools this course uses (VS Code, Live Server, a browser and Node.js) and say what each one is for
- Open a page with Live Server and watch it change when you save its stylesheet
- Check that Node.js is installed by running node --version in VS Code's terminal

## Key takeaways

- VS Code is a code editor, a text editor made for code. Its Live Server extension shows your page in the browser and updates it every time you save.
- Use a current Chrome, Edge or Firefox. This course's developer tools steps are written for those three.
- Node.js runs the exercise checks, and npm, which comes with it, installs what they need. Check it with node --version.
- Keep the course's files in one folder, css-in-depth, with a folder of its own for each page you style.

Before you can style a page, you need somewhere to write CSS and somewhere to see it. Professional web developers use the same small kit every day, it's all free, and setting it up takes about half an hour, once. After that, every lesson, exercise and project in this course 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 your CSS so it's easier to read, suggests property names 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 updates it every time you save. | Free |
| **A browser** | Shows your page the way visitors will see it, and has the developer tools you'll use to look inside any page. | Free |
| **Node.js** | Runs JavaScript outside a browser. In this course it runs one thing only: 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 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.

Type commands 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 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.

## Install VS Code

| Windows 11 | macOS |
|---|---|
| Open **Terminal**, type the command below and 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. **Homebrew** does the same job on a Mac. 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

Any current version of **Chrome**, **Edge** or **Firefox** works, and browsers keep themselves up to date. The lessons show the developer tools as Chrome and Edge name them, with Firefox's names beside them. Windows 11 comes with Edge, so you're ready. Macs come with Safari, whose developer tools are switched off and laid out differently, so install Chrome or Firefox as well:

| Windows 11 (optional second browser) | macOS |
|---|---|
| `winget install -e --id Google.Chrome` or `winget install -e --id Mozilla.Firefox` | `brew install --cask google-chrome` or `brew install --cask firefox` |

Or download one from **google.com/chrome** or **firefox.com**. Having two browsers is worth it: a page you style should look right in both.

## 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**.

## 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, and 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 downloads what each exercise's checks need; you'll use it in *Exercise: First Styles*.

## Your course folder, and The Daily Grind's menu

Make a folder named `css-in-depth` in your **Documents** folder, and inside it a folder named `daily-grind`. Short lowercase names with dashes and no spaces are the habit to keep: web addresses are made from file and folder names, and spaces and capital letters cause trouble there. In VS Code, choose **File > Open Folder** and open `daily-grind`. 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 `index.html`, and paste in The Daily Grind's menu page:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Daily Grind: Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>The Daily Grind</h1>
  <p>Your neighborhood coffee shop. Open every day, 6 a.m. to 6 p.m.</p>

  <h2>Coffee</h2>
  <ul>
    <li>Drip coffee <span class="price">$2.50</span></li>
    <li>Latte <span class="price">$4.25</span></li>
    <li>Cold brew <span class="price">$4.00</span></li>
  </ul>

  <h2>Bakery</h2>
  <ul>
    <li>Blueberry muffin <span class="price">$3.00</span></li>
    <li>Cinnamon roll <span class="price">$3.75</span></li>
  </ul>

  <div class="special">
    <h2>Today's special</h2>
    <p>A maple oat latte and a cinnamon roll <span class="price">$6.50</span></p>
  </div>
</body>
</html>
```

You'll learn to write HTML like this yourself in the next chapter, *The HTML You Need*. For now, notice three things. The `<link>` line near the top tells the browser to style the page with a file named `styles.css`. Every price is marked `class="price"`. And the Today's special box is marked `class="special"`. Those marks are how CSS will find them.

Make a second file next to it named `styles.css`, and leave it empty. Save both with **Ctrl+S** (**Cmd+S** on macOS).

## Open it with Live Server

Right-click `index.html` in the Explorer and choose **Open with Live Server**. Your browser opens the menu: black text on white, a big bold heading, and bullet points beside each drink, the browser's plain default look. 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 (`127.0.0.1` is the address every computer uses for itself), so the page is delivered the way a real site's would be.

Now put VS Code and the browser side by side, and type this into `styles.css`:

```css
body {
  background-color: linen;
}
```

Save, and watch the browser: the page turns a warm off-white the moment you save, with no reload button. The next lesson, *Your First CSS Rule*, explains every symbol in those three lines. That save-and-see loop is how you'll style everything in this course.

![VS Code on the left with styles.css open, and the browser on the right showing The Daily Grind's menu on a warm off-white page, updated the moment the file was saved](https://www.ask-codey.com/lessons/TODO)

**Try it.** Change `linen` to `lavender`, save, and watch. Then change it back to `linen`.

## 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 page doesn't change when you save `styles.css` | Check the file is named exactly `styles.css` (not `style.css` or `styles.css.txt`) and sits next to `index.html`. A white dot on the file's tab in VS Code means it isn't saved yet. |
| 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 update 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 kit web developers use every day: an editor, a browser that shows each save, a terminal, and the tool that runs your exercise checks. Every page in this course, from a coffee menu to a complete business site, is built with these.

## Key terms

- VS Code
- Code Editor
- Terminal
- Node.js
- npm
- [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/css-setup-your-tools-cheat-sheet)

Source: https://www.ask-codey.com/lessons/css-setup-your-tools