Before You Begin

Before writing your first line of code, you need a few foundational tools in place. This chapter walks you through setting up your terminal and installing VS Code — the two things everything else depends on. The setup takes about 20–30 minutes and you only do it once.

In the AI-assisted development era, these tools don't just sit side by side — they form a connected workflow. GitHub tracks your code, Next.js gives you a real project to work in, and Claude Code helps you build faster. But none of that works well without a solid environment underneath. That's what this chapter is for.

Operating System Compatibility#

This guide works on Mac, Windows, and Linux. All three can run every tool you'll use — Git, Node.js, and Claude Code — but there are small differences in how you interact with each:

Windows users: You can follow this guide using PowerShell or Windows Terminal. Both work well for everything covered here. For advanced use cases — like matching a Linux production server exactly — you can optionally install WSL 2 (Windows Subsystem for Linux) later, but it's not required to get started.

Mac and Linux users: Your environment closely matches most production servers, so things tend to "just work."

Your Terminal#

The terminal (also called the command line or shell) is a text-based interface for controlling your computer. Instead of clicking through menus, you type a command, press Enter, and the computer executes it. It might feel unfamiliar at first, but developers use it constantly — installing packages, running servers, managing Git, and more. Once you're comfortable with the basics, it becomes one of the fastest tools you have.

Opening the Terminal#

On Mac:

• Press Cmd + Space, type Terminal, and press Enter
• Or go to Applications → Utilities → Terminal
• Want something more powerful? Download iTerm2 — it adds split panes, better search, and other useful features

On Windows:

• Press Win + X and select Windows Terminal or PowerShell
• Or press the Windows key, type Terminal, and press Enter
• Windows Terminal (free from the Microsoft Store) is the modern choice — it lets you run PowerShell, Command Prompt, and WSL side by side in tabs

On Linux:

• Press Ctrl + Alt + T on most distributions (Ubuntu, Fedora, etc.)
• Or search "Terminal" in your applications menu

Essential Commands#

Once your terminal is open, you navigate your file system using text commands. Here are the five you'll use most often in this guide:

Try them now. Open your terminal and run:

pwd

You should see your current location — something like /Users/yourname on Mac or C:\Users\yourname on Windows. Next, list the files in that directory:

ls

Then navigate into a folder. If you have a Documents folder, try:

cd Documents
pwd

You should now see the path ending in Documents. To go back up one level:

cd ..

Those five commands cover almost everything you'll need in this guide.

Handy Terminal Shortcuts#

• Tab completion — Start typing a folder or file name and press Tab. The terminal completes it for you. If there are multiple matches, press Tab twice to see all options.
• Command history — Press the Up arrow to cycle through commands you've already run. Useful when you want to re-run something without retyping it.
• Cancel a running command — If something is stuck or taking too long, press Ctrl + C to stop it.
• Clear the screen — Type clear (Mac/Linux) or cls (Windows) to clean up the terminal output.

Installing VS Code#

VS Code (Visual Studio Code) is a free, open-source code editor made by Microsoft. It's the most widely used editor for web development — and it's what this guide assumes you're using throughout. It's also the best environment for Claude Code, which has a native VS Code extension that integrates directly into your editor.

Download and Install#

1. Go to code.visualstudio.com
2. Click the big Download button — it automatically detects your operating system
3. Run the installer and follow the prompts (the default options are fine)
4. Open VS Code once installation finishes

VS Code is free and updates itself automatically.

Open a Project from the Terminal#

The most convenient way to open a project in VS Code is from the terminal. Navigate to your project folder and type:

code .

The . means "this current directory." VS Code opens with that folder as your workspace.

Mac users: The first time you use this command, it might not work. Open VS Code, press Cmd + Shift + P, type shell command, and select Install 'code' command in PATH. After that, code . will work from any terminal.

Recommended Extensions#

Extensions add new features to VS Code. Install these three — they're the most useful for the work ahead:

To install an extension:

1. Click the Extensions icon in the left sidebar (it looks like four squares, or press Ctrl+Shift+X / Cmd+Shift+X)
2. Type the extension name in the search box
3. Click Install

Configure Prettier to Format on Save#

After installing Prettier, tell VS Code to use it automatically every time you save a file:

1. Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows/Linux) to open the Command Palette
2. Type Open User Settings (JSON) and press Enter
3. Add these two lines inside the curly braces {}:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Now every time you save a file, Prettier will clean up the formatting automatically. This is especially helpful when you're learning — it means you don't have to worry about getting spacing and indentation exactly right by hand.

What You'll Learn Next#

With your terminal and VS Code ready, you're set to start learning the three core tools. Here's the recommended order and the reasoning behind it:

Start with GitHub — set up version control before writing any app code. This way, every change you make is tracked from day one. If something breaks, you can always roll back to a version that worked. Git is the safety net that makes experimentation safe.

Then build with Next.js — once Git is in place, you create and develop your actual app. You'll learn the project structure, understand what each file does, and get comfortable making and testing changes on your own.

Finally, add Claude Code — once you understand what your project is doing, AI assistance becomes far more valuable. In AI-assisted development, you're the director: you decide what to build, review what the AI generates, catch mistakes, and guide it when it goes off track. That requires understanding your codebase. Jumping straight to AI without this foundation often leads to confusion, because you won't be able to tell whether what it produces is correct.

Each chapter builds on the previous one. The order is intentional.

Summary#

You're ready. Head to the next chapter to set up GitHub and start tracking your code.