Make Websites with AI lessons

Chat window or coding agent

A chat window, like the Claude or ChatGPT app, answers in text. You copy its code into files yourself.

A coding agent works inside your project folder. It can read your files, edit them and run commands.

The same request through a chat window and through an agent, as two step-through flows.

Agents usually ask before they run a command. Only approve the ones you understand.

Practice: Chat or agent

Sort statements into chat window or coding agent.

Editor agents and terminal agents

Some agents live in a code editor. Cursor is an editor built around AI, and VS Code gets an agent through GitHub Copilot.

Others run in the terminal, like Claude Code, Codex CLI and Gemini CLI. You chat in the terminal and open the files in any editor.

An editor with an agent panel, then a terminal agent, shown in turn.

Both kinds can build the same site. Pick one and stick with it while you learn.

What to install

You need a code editor, Node.js, git and an agent. Node.js runs JavaScript tools on your computer, and it comes with npm, which downloads them.

Install the LTS version of Node.js from nodejs.org, and git from git-scm.com. Each agent has its own install steps on its website.

To check a tool is installed, ask it for its version in a terminal.

A terminal checks the versions of node, npm and git.

Practice: Match each tool to its job

Match each tool to what it does.

Start a project folder

The terminal is a window where you type commands. mkdir makes a folder and cd moves into it.

git init starts tracking the folder with git, so you can save versions of it. Then start your agent inside the folder.

A terminal makes a folder, moves in, runs git init and starts an agent.

The agent works on the folder you start it in. One folder per project keeps it focused.

Practice: Type the command

Type the terminal command for each setup step.

Your first prompt is a spec

A vague prompt gets a generic site. A spec says exactly what you want, so the agent has less to guess.

A good first prompt covers four things: the purpose, the pages, the style and the content.

A vague prompt and a four-part spec, each with the site it gets back.

Write the real words, prices and details yourself. Where you leave gaps, the agent fills them with filler.

Practice: Sort the spec

Sort lines from first prompts into purpose, pages, style and content.

Point the agent at the right files

The agent does better work when it reads the right files first. Most agents let you mention a file by name, often with @, like @index.html.

You can attach screenshots too, and keep a written spec in the project, such as a REQUIREMENTS.md file. Then tell the agent to follow it.

A prompt mentions two files, and the project tree lights up as the agent reads each one.

A spec in a file lasts. Later prompts can point at it instead of repeating it.

A file the agent reads every session

An instructions file holds the rules for your whole project. The agent reads it at the start of every session, so you never repeat them.

AGENTS.md is a shared format that many agents read, including Codex, Cursor and GitHub Copilot. Some tools have their own file too, like CLAUDE.md for Claude Code.

An AGENTS.md file, with each part lit up in turn.

Keep it short: the stack, the commands, the folder layout, style rules and things never to do. When the agent gets something wrong twice, add a line.

Practice: Every session or this prompt

Sort lines into AGENTS.md or a single prompt.

Read the plan first

Before a big change, ask the agent for a plan. Many agents have a plan mode that thinks it through without touching any files.

Read the plan before you say yes. A wrong plan is much easier to fix than wrong code.

The agent plans a contact form, the learner moves it, then the agent starts.

Practice: Check the plan

Pick the plan step that goes beyond the request.

Review every change

Agents show each change as a diff. Removed lines are red and added lines are green.

Read each diff before you accept it. Check it does what you asked, and nothing else.

A diff builds up: the file, the removed line, then the added line.

This is where the HTML, CSS & JavaScript course pays off. You do not have to write the code, but you do need to read it.

Practice: Accept or reject

Accept or reject each diff against what was asked.

Run it on your computer

Most agents set up a package.json file. It lists the tools the site needs and the commands that run it.

npm install downloads those tools. npm run dev then starts a dev server that shows your site at a localhost address.

localhost means your own computer, so only you can see it. The page reloads by itself each time a file changes.

npm install and npm run dev in a terminal, and the site at localhost beside it.

Word each change so it lands

A good change request has four parts: the goal, where it goes, what to keep the same, and how you know it is done. That last part is your acceptance criteria: a check you can try yourself.

Ask for one change per prompt. When two changes go in together, it is hard to tell which one broke something.

A vague request sharpened into goal, where, keep and done when.

If a task is unclear, tell the agent to ask you questions before it starts. A minute of answers can save an hour of rework.

Practice: Sharpen the request

Pick the precise option for each part of a vague request.

Show, don't describe

Showing beats describing. Attach a screenshot of the problem, or give an example of what you want, like a site whose layout you like.

Check the page after every change. Then you always know which change did what.

Feedback messages one by one, each changing one thing in the browser.

When something breaks

Errors are normal. Paste the full error message to the agent, and say what you did just before.

Paste errors as text, so nothing gets cut off. Save screenshots for problems you can see on the page.

A pasted error leads the agent to the cause, a fix and a check.

Practice: What to send

A good bug report gives the agent what it needs and nothing it should not see.

Tick what belongs in a message about a problem.

Commits are checkpoints

A commit saves a snapshot of your project with git. Commit each time the site works.

git add . picks up every changed file. git commit -m "message" saves them with a short note.

If a change breaks things, throw it away and go back to the last commit. Many agents also have their own undo or checkpoints.

A line of commits; a broken change is thrown away, then redone and committed.

Practice: Save a checkpoint

Fill the gaps in git add, git commit and git push.

Big jobs, many agents

One long chat struggles with a big job. Its working memory, called the context, fills up and it loses track.

Instead, a lead agent plans the job and splits it into parts that touch different files. Each part goes to its own agent with a clear brief, on its own branch.

A lead agent fans a plan out to three agents working in parallel, then merges and runs the checks.

Some tools build this in, such as subagents in Claude Code or cloud agents in Cursor and GitHub Copilot. Either way, the tests, typecheck and build must pass before you merge.

Practice: Run the team

Order a multi-agent workflow, then the parts of a feature that must wait.

Keep secrets out of the code

An API key works like a password for a service. Keep keys in a .env file, and list that file in .gitignore so git never saves it.

Never paste a key into a chat. Tell the agent the key's name instead, and let the code read it from .env.

Code that runs in the browser is public. Secret keys belong only in code that runs on a server.

A project tree with .env and .gitignore, and what each file holds.

Practice: Spot the leak

Tap the line that gives a secret away.

Put it online

To ship, push your code to a GitHub repository. Then import that repository into a host like Vercel or Netlify.

The host builds your site and gives it a public URL. Every push after that updates the live site.

A push goes from your computer to GitHub to the host to a live site.

For your own address, buy a domain and add it in the host's settings. The host shows you the DNS records to set up.

Practice: Ship in order

Going live and adding a domain each follow a set order.

Order the steps to go live, then to add a custom domain.

Where to go next

A form that saves messages needs a backend and a database. Analytics shows who visits, and SEO helps people find you in search.

Check accessibility too, so everyone can use your site. And keep reading the code the agent writes, so you can steer it better.

The APIs, Databases and Hosting & Deployment courses on this site cover these next steps.

Match each goal for a live site to what to learn next.