Setting Up Your Workshop

Every lesson in this course has a live console built into the page — you can learn the whole language right here. But real projects live on your own machine, and a craftsperson deserves a proper workshop. In the next twenty minutes you'll set up the three tools professional JavaScript developers touch every day: a code editor, the browser's developer tools, and Node.js — plus just enough terminal to drive them.

The editor: VS Code

Visual Studio Code is the editor most of the JavaScript world uses — free, fast, and built (fittingly) largely in JavaScript. Download it from code.visualstudio.com and accept the defaults.

Two setup moves worth doing on day one:

• Windows: in the installer, tick "Add to PATH" and the "Open with Code" options — future-you says thanks.
• macOS: open VS Code, press Cmd+Shift+P, type "shell command", and run "Install 'code' command in PATH".

Both give you the superpower of typing code . in a terminal to open the current folder in your editor.

Meet the DevTools — the laboratory you'll live in

Every browser ships developer tools: a full inspection lab hiding behind a keyboard shortcut. Open them right now, on this very page:

• macOS: Cmd + Option + I
• Windows / Linux: Ctrl + Shift + I (or plain F12)

A panel appears with tabs like Elements, Console, and Network. The one that matters today is the Console — an interactive JavaScript prompt wired into the page you're looking at. Type 2 + 2, press Enter, and the engine answers. That console is the same kind of engine this course's playgrounds use, and lesson 1.4 makes it your first REPL.

Poke around freely: the DevTools can't break anything. Refreshing the page resets everything.

Node.js — yes, even for browser work

Install Node.js from nodejs.org — pick the LTS (long-term support) version. Node lets JavaScript run outside the browser, and even if you only ever build websites, you want it, because the entire modern web toolchain — package installs, dev servers, formatters, build tools — runs on Node. It's the workshop's power supply.

Verify the install in a terminal:

node --version
# v24.13.0        ← any v24.x (or newer LTS) is perfect
npm --version
# 11.6.2          ← npm comes bundled with Node

A gentle crash course in the terminal

The terminal (macOS: Terminal app; Windows: PowerShell or Windows Terminal; VS Code has one built in under View → Terminal) is a text interface to your computer. You type a command, press Enter, something happens. You only need a handful to be productive:

pwd             # "print working directory" — where am I?
ls              # list the files here (Windows PowerShell: also ls)
cd projects     # change directory — move into the projects folder
cd ..           # move UP one folder
mkdir learn-js  # make a new directory

That's genuinely most of it. Every developer you admire types these five commands hundreds of times a week.

Your project home + the extensions that matter

Give your code a tidy, permanent home now — future projects will thank you:

mkdir projects
cd projects
mkdir learn-js
cd learn-js
code .          # open this folder in VS Code

Inside VS Code, install two extensions (the boxes icon in the sidebar, or Cmd/Ctrl+Shift+X):

• ESLint — reads your code as you type and flags likely bugs. You'll configure it properly in Part V; installed now, it quietly helps from day one.
• Prettier — formats your code automatically. Turn on "Format on Save" in settings and never argue with yourself about spacing again.

Skip the temptation to install fifteen more. A tidy workshop beats a crowded one — you can always add tools when a lesson actually needs them.

The checklist

You're done when all four of these are true:

• VS Code opens, and code . works from a terminal
• You can open the DevTools Console on any page and 2 + 2 answers 4
• node --version prints a version number
• You have a projects/learn-js folder that opens in VS Code

Next lesson, the fun starts: you'll run JavaScript three different ways — including your first program executed by Node on your own machine.