By the end of this page you will have typed one sentence and watched an agent make a web page from it. Here is where you are heading:

my-first-app — zsh

~❯mkdir my-first-app && cd my-first-app

~/my-first-app❯claude

Claude Code · ~/my-first-app

› Make a sign-up screen: a heading, an email field and one button. Plain HTML.

⏺ Write index.html +38

Done. Open index.html in your browser to see it.

index.html

Join the beta

One email when it opens. Nothing else.

you@example.com

An empty folder, one sentence, a first screen.

Four steps get you there: open a terminal, install Node.js, install an agent, and ask it for something. Each one is a few clicks or one pasted line.

1. Open a terminal

A is the window where you type commands. Every computer already has one.

Press Cmd + Space, type Terminal and press Enter. A window opens with a line ending in % or $. That line is the prompt: it is waiting for you to type.

To run a command, paste it after the prompt and press Enter. To paste in a terminal, use Cmd + V on a Mac, or right-click (or Ctrl + V) on Windows.

2. Install Node.js

lets your computer run JavaScript tools, and it comes with , the tool that installs them. Claude Code and Codex are installed with npm, and most web projects need Node anyway.

Download it
Go to nodejs.org and download the version marked LTS (long-term support, the steady one).
Install it
Open the file you downloaded and click through the installer with the default choices.
Check it worked
Close your terminal, open a new one, and run the line below. You should see a version number like v22.x.x.

Terminal

$ node -v

3. Install an agent

Pick one. They all work with this course; you can try another later.

Install it, then start it:

Terminal

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

Terminal

$ claude

The first time, it opens your browser to sign in. You need a Claude account with a paid plan (Pro or Max) or Anthropic API credit. On Windows, Claude Code also needs Git for Windows installed; it will tell you if it is missing.

Every one of these needs an account. That is the price of the model, not of this course, which is free.

4. Make a project folder

An agent works inside one folder at a time, and it can change anything in it. So give it a fresh, empty folder of its own. In your terminal:

Terminal

$ mkdir my-first-app

Terminal

$ cd my-first-app

mkdir makes a directory (a folder); cd changes into it. Now start your agent here (claude or codex), or open this folder in Cursor or VS Code.

5. Ask for your first screen

Type a plain sentence. Be specific about what is on the screen and keep it small.

Your first screen· for your agent

Make a sign-up screen in one file, index.html: a heading, one line of text under it, an email field and one button. Plain HTML and CSS, no frameworks. Then tell me how to open it.

The agent will ask permission before it writes the file or runs anything. Read what it wants to do and say yes. When it is done, open index.html in your browser (double-click it in your file manager, or ask the agent to open it).

✕ Too vague

"Make me a website." The agent has to guess everything, so it guesses the average: a hero, three cards, a footer.

✓ Small and specific

"A sign-up screen: heading, one line, email field, one button, in index.html." You can check every part of the answer at a glance.

It will look plain, maybe a little generic. That is fine: in Your first review you will make it better, with the skill doing half the work.

Quick check

Why should you start your agent inside a new, empty folder?

1. Open a terminal

2. Install Node.js

3. Install an agent

4. Make a project folder

5. Ask for your first screen

Connected lessons