Course contents
How websites and coding agents work
Name the parts of a website, explain what a coding agent does on each turn, and see why everything an AI reads is counted in tokens.
You don't need to write code to vibe code, but you do need a map. When the agent says it “added a fetch call in app.js” or “the server needs an environment variable,” you should know roughly where that lives and why it matters. This lesson gives you the map in plain words.
A website is a folder of files
A simple website is a folder of text files that a browser knows how to read. Three kinds of file do most of the work:
| File | What it does | Bakery example |
|---|---|---|
HTML (index.html) | Structure and content: headings, paragraphs, images, buttons | The heading “Crumb & Co.”, the opening hours, the menu |
CSS (styles.css) | Looks: colors, fonts, spacing, and layout on phones and laptops | A cream background, brown headings, two columns on a laptop |
JavaScript (app.js) | Behavior: anything that changes after the page loads | An “Open now” badge that checks the time |
When someone visits, their browser downloads these files and draws the page. That means everything in them is visible to every visitor: right-click any web page and choose View Page Source to see for yourself. Remember this. It's the root of most security mistakes you'll meet in Module 4.
Front end, back end and hosting
The files that run in the visitor's browser are the front end. Some jobs need a computer you control instead: checking a password, saving an order, or calling a paid service with a secret key. That code runs on a server, the back end, often with a database that stores information between visits. Hosting means renting space on a computer that's always online, so other people can reach your files at an address like crumbandco.example.
Front end or back end? Decide where each job belongs.
Checking whether a password is correct
What a coding agent actually is
A coding agent is a large language model (the AI) connected to tools. It can list and read files, write and edit them, search your project, and run commands in a terminal. It works in a loop: look at your request and everything it has seen so far, pick the next action, use a tool, read the result, and decide what to do next. It stops when it believes the task is done or when it needs your permission.
Two things follow. First, the agent learns about your project only by reading it, so a tidy folder and a short instruction file make it noticeably better (Module 5 covers this). Second, it predicts what a good next step looks like rather than looking up facts. It can be confidently wrong, which is why checking its work stays your job.
Match each request to the kind of tool the agent reaches for.
Pick one on the left, then its partner on the right.
You'll mostly talk to the agent in plain English, but you'll see a terminal often: a window where you type commands instead of clicking. On a Mac it's the Terminal app; on Windows it's PowerShell or Terminal. The agent runs most commands for you, and you'll learn the handful you need as you go.
Tokens: how the AI reads your words
Models don't read letters or whole words. They read tokens: chunks of text that are often a word or part of one. For ordinary English, a rough rule of thumb is about four characters per token. Everything the agent handles is counted in tokens: your prompt, the files it reads, the command output it sees and the code it writes. Usage limits on most plans are measured in them too, which is why a long, messy session uses up your allowance faster than a short, focused one.
Try a plain sentence, then a line full of prices and times. The split here is an approximation; each model family uses its own tokenizer.
Move the controls and watch what changes.
In the explorer, what happened with prices, times and symbols such as $4.50 and 7am–3pm?
Plain-English definitions from the AI Coding Dictionary.