Skip to content
Lesson 2 of 22

Setting Up Your Environment

16 min read

What You Need

Before you can start vibe coding, you need a handful of tools installed on your computer. Don't worry — everything here is free, and the entire setup takes about 20 minutes. Here's what we're installing and why:

  • A terminal — The command-line interface where you'll run AI tools and manage your projects. You already have one on your computer; you just need to know where to find it.
  • Node.js — A JavaScript runtime that powers most modern web development tools. Claude Code and many other AI tools are built on it.
  • Git — A version control system that tracks every change to your code. Think of it as an infinite undo button and a safety net rolled into one.
  • VS Code — A code editor where you can view, browse, and occasionally tweak the files AI generates for you.
  • Claude Code — The AI coding tool we'll use throughout this course. It runs in your terminal, understands entire projects, and can read files, write code, run commands, and fix its own mistakes.

By the end of this lesson, you'll have all of these installed and you'll have built your first AI-generated application. Let's get started.

Installing Node.js

Node.js is a JavaScript runtime — it lets you run JavaScript code outside of a web browser. You need it because Claude Code is built with Node.js, and most of the web applications you'll build use JavaScript-based tooling.

Step 1: Download Node.js

Go to https://nodejs.org and download the LTS (Long Term Support) version. LTS means it's the stable, well-tested version — always choose this over the "Current" version unless you have a specific reason not to.

The website will automatically detect your operating system (Windows, macOS, or Linux) and offer the right download.

Step 2: Run the Installer

Open the downloaded file and follow the installation wizard. Accept the defaults — they're fine for our purposes. On Windows, make sure the option to add Node.js to your PATH is checked (it usually is by default).

Step 3: Verify the Installation

Open your terminal (we'll cover how to find it in a moment) and run these two commands:

node -v

You should see something like v22.14.0 (the exact number may be different — anything v18 or higher is fine).

npm -v

You should see something like 10.9.2. npm (Node Package Manager) is installed automatically with Node.js — it's the tool you'll use to install other packages, including Claude Code.

If either command shows an error like "command not found" or "not recognized," jump to the Troubleshooting section at the end of this lesson.

What Did I Just Install?

Think of Node.js as the engine that runs JavaScript-based tools on your computer. You won't interact with it directly very often, but it quietly powers everything behind the scenes. npm is the app store for JavaScript tools — when you want to install a new tool, you use npm.

Installing Git

Git is a version control system. In simple terms, it keeps a complete history of every change you make to your project. Every time you save a checkpoint (called a "commit"), Git remembers the exact state of every file. If something breaks, you can go back to any previous checkpoint instantly.

For vibe coders, Git is your safety net. When you ask AI to make a big change and it doesn't work out, Git lets you undo everything and try again. Without Git, a bad AI-generated change could ruin your project with no way back.

Step 1: Download Git

Go to https://git-scm.com and download the installer for your operating system.

On macOS: You might already have Git. Open Terminal and type git --version. If it shows a version number, you're set. If it prompts you to install developer tools, say yes.

On Windows: Download the installer and run it. There are many options during installation — the defaults are fine. The important one is choosing a default editor; you can select VS Code if you've already installed it, or just leave the default.

On Linux: Use your package manager:

# Ubuntu/Debian
sudo apt install git

# Fedora
sudo dnf install git

Step 2: Configure Git

After installation, tell Git who you are. This information is attached to every checkpoint you create, which is useful when you're working with others (or when you look back at your own history later).

Open your terminal and run:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Replace the values with your actual name and email. The email should match the one you use for GitHub if you have an account (or plan to create one).

Step 3: Verify

git --version

You should see something like git version 2.47.1. Any modern version works.

What Did I Just Install?

Git is like a time machine for your code. Every time you tell it to save (commit), it takes a snapshot of your entire project. You can jump back to any snapshot at any time. You can also create parallel versions of your project (branches) to experiment without risking your main work. We'll cover Git workflows in detail in a later lesson, but for now, just know it's your most important safety tool.

Setting Up VS Code

VS Code (Visual Studio Code) is a free code editor made by Microsoft. It's the most popular editor in the world for a reason — it's fast, extensible, and works great with AI tools.

As a vibe coder, you won't spend most of your time in VS Code the way a traditional developer does. But you'll use it to browse your project files, review what the AI generated, and occasionally make small manual edits.

Step 1: Download VS Code

Go to https://code.visualstudio.com and download the installer for your operating system. Run it and accept the defaults.

Step 2: Install Essential Extensions

Extensions add features to VS Code. Open VS Code, click the Extensions icon in the left sidebar (it looks like four small squares), and search for each of these:

  • ESLint — Highlights code quality issues. Helps you spot problems in AI-generated code.
  • Prettier — Automatically formats code so it's consistent and readable.
  • Tailwind CSS IntelliSense — Autocomplete and previews for Tailwind CSS, which we'll use for styling.
  • GitLens — Shows Git history and blame information inline. Makes it easy to see what changed and when.

Click "Install" for each one. They'll activate automatically.

Step 3: Get Comfortable

Take a minute to explore the VS Code interface:

  • File Explorer (left sidebar) — Shows your project files and folders.
  • Editor (center) — Where you view and edit files.
  • Terminal (bottom panel) — A built-in terminal. Open it with Ctrl+`` (backtick) on Windows/Linux or Cmd+`` on macOS.
  • Command Palette — Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to search for any action.

You'll get more familiar with VS Code as we build projects. For now, having it installed is enough.

Terminal Basics for Non-Developers

The terminal (also called command line, console, or shell) is a text-based interface for interacting with your computer. Instead of clicking icons and menus, you type commands. It might look intimidating at first, but you only need a handful of commands for vibe coding.

Finding Your Terminal

On Windows: You have several options:

  • PowerShell — Press Win+X and select "Terminal" or "Windows PowerShell." This is the modern default.
  • Command Prompt (cmd) — Search for "cmd" in the Start menu. The classic option.
  • Git Bash — Installed with Git, this gives you a Linux-like terminal on Windows. Find it in the Start menu.
  • VS Code Terminal — Press Ctrl+`` inside VS Code.

On macOS: Open Spotlight (Cmd+Space), type "Terminal," and press Enter.

On Linux: Press Ctrl+Alt+T or find Terminal in your applications.

Essential Commands

Here are the only commands you need to get started:

# See where you are (print working directory)
pwd

# List files in the current directory
ls          # macOS/Linux/Git Bash
dir         # Windows PowerShell/cmd

# Change directory (navigate into a folder)
cd my-project

# Go up one level
cd ..

# Go to your home directory
cd ~

# Create a new directory
mkdir my-new-project

# Clear the terminal screen
clear       # macOS/Linux/Git Bash
cls         # Windows PowerShell/cmd

Productivity Tips

  • Tab completion — Start typing a folder or file name and press Tab. The terminal will auto-complete it. This saves a ton of typing and prevents typos.
  • Up arrow — Press the up arrow key to cycle through previous commands. No need to retype anything.
  • Ctrl+C — Stops whatever is currently running. If a command seems stuck, this is your escape button.
  • Copy/paste — In most modern terminals, Ctrl+Shift+C copies and Ctrl+Shift+V pastes (on macOS, the regular Cmd+C and Cmd+V work).

A Note on Different Terminals

Windows users might notice that some commands differ between PowerShell, Command Prompt, and Git Bash. For example, ls works in Git Bash and PowerShell but not in the old Command Prompt. Throughout this course, we'll use commands that work in Git Bash and most Unix-like terminals since that's what Claude Code and most web development tools expect. If you're on Windows, I recommend using Git Bash or the VS Code terminal (which can be configured to use Git Bash).

Don't worry about memorizing everything. You'll pick up the commands naturally as you use them. And if you forget one, you can always ask Claude Code — it knows terminal commands too.

Installing Claude Code

Claude Code is an agentic AI coding tool made by Anthropic. Unlike chat-based AI tools where you copy-paste code back and forth, Claude Code operates directly in your project. It reads your files, writes new ones, runs terminal commands, sees error output, and fixes problems — all from your terminal.

Step 1: Install Claude Code

Open your terminal and run:

npm install -g @anthropic-ai/claude-code

The -g flag means "global" — it installs Claude Code as a command you can run from anywhere, not just in a specific project.

This will take a minute as it downloads and installs the package and its dependencies.

Step 2: Verify Installation

claude --version

You should see a version number. If you see "command not found," check the Troubleshooting section below.

Step 3: Authentication

The first time you run Claude Code, it will ask you to authenticate. You need an Anthropic API key or an Anthropic account. Here's how the process works:

  1. Run claude in your terminal.
  2. It will open a browser window for authentication (or display instructions for API key setup).
  3. Follow the prompts to log in or enter your API key.
  4. Once authenticated, Claude Code is ready to use.

About API keys: An API key is like a password that lets Claude Code communicate with Anthropic's AI servers. If you're using the direct API, you'll need to set up billing on Anthropic's website. Claude Code also supports connecting through other plans — the authentication process will guide you.

Step 4: Test It Out

Navigate to any directory and run:

claude

You should see the Claude Code interface appear in your terminal — a prompt waiting for your instructions. Type exit or press Ctrl+C to quit for now. We'll do a proper first project in the next section.

Your First AI Interaction

This is the moment everything comes together. You're going to create your first application using vibe coding. It won't be complex — but it will be real, and the experience of watching AI turn your words into working software is genuinely exciting.

Step 1: Create a Project Directory

Open your terminal and create a new folder for your first project:

mkdir my-first-vibe-project
cd my-first-vibe-project

Step 2: Initialize Git

Set up version control from the very beginning. This is a habit you should build now:

git init

You'll see a message saying an empty Git repository was initialized. Good.

Step 3: Launch Claude Code

claude

Claude Code starts up and presents you with a prompt. This is where you describe what you want to build.

Step 4: Give Your First Prompt

Type something like this:

Create a simple web page with:
- A heading that says "My First Vibe Coded App"
- A counter that starts at 0
- A "+" button that increases the counter
- A "-" button that decreases the counter
- A "Reset" button that sets it back to 0
- Modern styling with a centered layout, rounded buttons, and a
  pleasant color scheme
- Use plain HTML, CSS, and JavaScript (no frameworks)

Press Enter and watch what happens.

Step 5: Watch the Magic

Claude Code will start working. You'll see it creating files — probably an index.html file with HTML structure, CSS styles, and JavaScript logic all in one place (or perhaps separated into individual files). It makes decisions about colors, fonts, spacing, and button styles.

The whole process takes less than a minute.

Step 6: See the Result

Open the generated HTML file in your browser. On most systems, you can just double-click the file, or run:

# macOS
open index.html

# Windows (from Git Bash)
start index.html

# Linux
xdg-open index.html

You should see a polished, working counter application. Click the buttons. They work. The layout is centered. The colors are pleasant. You just built a web application by describing what you wanted.

Step 7: Save Your Work

Back in Claude Code (or in a separate terminal), save this milestone with Git:

git add .
git commit -m "feat: initial counter app from first vibe coding session"

Congratulations — you've just completed your first vibe coding cycle: describe, generate, test, commit.

What Just Happened?

Let's break down what Claude Code did behind the scenes:

  1. Parsed your description — It understood that you wanted a counter with increment, decrement, and reset functionality.
  2. Made design decisions — You said "pleasant color scheme" and it chose specific colors, fonts, and spacing.
  3. Wrote the code — It generated valid HTML, CSS, and JavaScript that implements your requirements.
  4. Created the file(s) — It wrote the code directly to your project directory.

You didn't need to know HTML syntax, CSS properties, JavaScript event handlers, or DOM manipulation. You described the user experience, and the AI handled the implementation. That's vibe coding.

Troubleshooting Common Issues

Setting up development tools doesn't always go smoothly. Here are the most common problems and how to fix them.

"node: command not found" or "node is not recognized"

Cause: Node.js wasn't added to your system's PATH — the list of directories your terminal searches when you type a command.

Fix (Windows): Restart your terminal completely (close and reopen). If that doesn't work, reinstall Node.js and make sure "Add to PATH" is checked during installation.

Fix (macOS/Linux): If you installed via a package manager, try restarting your terminal. If you downloaded from the website, you may need to add Node.js to your PATH manually. Run which node — if it returns nothing, Node.js isn't in your PATH.

"git: command not found" or "git is not recognized"

Cause: Same as above — Git isn't in your PATH.

Fix: Restart your terminal. On Windows, make sure Git was installed with the "Add to PATH" option. On macOS, running git --version should prompt you to install it via Xcode Command Line Tools.

Permission Errors When Installing Global npm Packages

You might see errors like EACCES: permission denied when running npm install -g.

Fix (macOS/Linux): Don't use sudo. Instead, configure npm to use a different directory for global packages:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Then add ~/.npm-global/bin to your PATH by adding this line to your ~/.bashrc or ~/.zshrc:

export PATH=~/.npm-global/bin:$PATH

Restart your terminal and try again.

Fix (Windows): Run your terminal as Administrator (right-click and select "Run as administrator"), or use Node Version Manager for Windows (nvm-windows) which avoids permission issues entirely.

Node.js Version Too Old

Claude Code requires a relatively modern version of Node.js (v18 or higher).

Fix: Download the latest LTS version from https://nodejs.org and install it over your existing version. Or use a version manager like nvm (macOS/Linux) or nvm-windows (Windows) to manage multiple versions.

Check your version with:

node -v

Firewall or Network Blocking API Calls

If Claude Code installs but can't connect to Anthropic's servers, your network might be blocking the API calls.

Symptoms: Claude Code starts but gives network or timeout errors when you try to use it.

Fix: If you're on a corporate or school network, you may need to configure proxy settings or ask your IT department to whitelist Anthropic's API endpoints. On a personal network, check that your firewall or VPN isn't blocking outbound HTTPS connections.

Claude Code Opens But Authentication Fails

Fix: Make sure you have an active Anthropic account or API key. Visit https://console.anthropic.com to check your account status. If using an API key, ensure it's valid and has available credits.

General Advice

When something goes wrong during setup:

  1. Read the error message. It often tells you exactly what's wrong, even if the formatting looks intimidating.
  2. Restart your terminal. Many installation issues are solved by simply closing and reopening your terminal so it picks up new PATH entries.
  3. Search the error message. Copy the key part of the error and search for it online. Someone has almost certainly had the same problem.
  4. Ask Claude Code. Once it's running, you can describe any error you're seeing and it will help you troubleshoot. It's surprisingly good at diagnosing development environment issues.

What's Next

Your environment is ready. You have Node.js, Git, VS Code, and Claude Code all installed and working. You've built your first application by describing it in plain English. You've saved it with Git.

In the next lesson, we'll explore the broader landscape of AI coding tools. Claude Code is the primary tool for this course, but understanding how it compares to Cursor, GitHub Copilot, and other options will help you choose the right tool for any situation — and give you context for why we use what we use.

See you there.