Setup: VS Code, a Browser and Node.js

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

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

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:

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

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:

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 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:

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

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.

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

If something goes wrong

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

Cheat sheets

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