Vibe Code 101
Back

The glossary

Every term, grouped by domain, in the order they showed up building Aden's Mowing. Jump to a group, or just scroll.

Layer 1

Computers, Code & Operating Systems

The bricks themselves

What a computer is doing when it “runs” your code, and why the OS underneath changes your day.

Computer

A machine that follows instructions, extremely fast. Everything else is just organised ways of giving it those instructions.

Code

The instructions themselves, written in a language a computer eventually understands.

Operating system (OS)

The base layer — Windows, macOS, or Linux — that manages hardware and how programs run.

Most AI coding tools are built on Mac/Linux. Windows works — often via one extra step (WSL).

WSL (Windows Subsystem for Linux)

A real Linux environment that runs inside Windows, alongside your normal desktop.

On Windows, run vibe-coding tools inside WSL so you match the Mac/Linux setup they were built for.

Layer 2

The Web, Browsers & the Front End

Aden's Mowing, page one

One mowing-business web page: one link on the internet, one file on disk — here's what's inside.

Webpage

A document your browser can request and display. A single-page site is one link, and on disk, one file.

Browser

A desktop app (Chrome, Firefox, Edge) that requests and renders web pages by exchanging HTML with a server.

HTML

What the content is — headings, text, images, and structure.

CSS

The styling layer. Turns plain content into something that looks like your brand.

JavaScript (in the browser)

Makes the page interactive — clicks, popups, loaders — without a full reload. Runs in the visitor's browser, not your server; it can't remember anything between visitors on its own (see Layer 5).

Layer 3

Domains, DNS, IPs & Ports

Getting the world to your file

You've got the file. How does anyone else on Earth actually reach it?

Domain name

A human-readable name — adensmowing.com — bought from a registrar.

DNS

Translates a domain name into the IP address of the computer that will answer.

IP address

The address of a specific computer on the internet.

Port

A numbered lane on that computer for one kind of traffic, so everything doesn't collide.

HTTP 80, HTTPS 443, SSH 22 — these three cover almost everything early on.

Web server

Software listening on that port that returns the right file or response when your domain is requested.

Hosts like Vercel run this for you. Knowing the layer helps you name what broke.

Layer 4

Data & Database Design

Model the data before you model anything else

Visitors leave a mobile number in a queue you can see — that needs a home. Shape the data first; it tells you what to vibe code.

Database

Like a spreadsheet: rows and columns, each column typed (text, number, date…).

Table

One entity per table — a tab in that spreadsheet. A mowing business might have businesses and locations.

Column / field

A single typed value on a row — name, email, date.

Relationship — "has many"

One-to-many. A business has many locations; those locations belong to that one business.

Relationship — "belongs to" / one-to-one

The other direction — each location belongs to exactly one business.

Schema

The overall shape — every table, column, and relationship — sketched before application code.

Do this first or you get 80 accidental tables. Vibe code the schema, then build on it.

Layer 5

Front End vs Back End — Making It Dynamic

Static files can't remember anything

A signup queue needs saved state. A static file you hand-edit can't do that — this is where an app stops being “just a file.”

Static file

Fixed content that only changes when you edit it by hand. Fine for a brochure, not for a growing list of leads.

Client-side JavaScript

Runs in the visitor's browser. Great for UI; no lasting memory of its own, and can't touch your server's data alone.

Back end

Server-side logic that can save and query state — it talks to a database, not a static file.

Dynamic application

Front end and back end wired together: visitors add data, you query it later — nothing frozen at deploy time.

Layer 6

APIs & System Communication

How separate systems actually talk

Internal tools come down to two skills: how data is saved (Layer 4), and how systems hand data to each other.

API

A defined way for two systems to exchange data — request in, response out.

Request / payload

The data you send, and the shape it's in — JSON, form fields, or a file on a URL. The API decides which it wants.

Integration

Wiring one system's output into another's input — form → spreadsheet, webhook → queue, app → payments.

Layer 7

Logistics & Systems Talking to Systems

Most "hard problems" are just logistics

A transcription site can only work on audio that already exists on the server — upload first. That mildly annoying step is often the whole problem.

Logistics problem

Most “impossible” bugs are really: this data isn't where the next step needs it yet.

Name it as get-data-from-A-to-B and it becomes a series of solvable steps.

File system access

A server can only process a file once that file exists somewhere it can reach.

Upload

Moves a file from the user's device onto your server (or a bucket) so the back end can use it.

Getting systems to talk to systems

A large share of real work is moving data between two things that don't natively understand each other.

Layer 8

Control Flow & Programming Logic

The actual Lego blocks

Under every feature: a small set of blocks. Critical thinking here is naming which block you're looking at.

Function

A named, reusable block that does something — and often returns a result.

If / else statement

A branch: do this if true, otherwise do that.

Loop (for / while)

Repeats an action — for a fixed count or list, or while a condition stays true.

Breaking a problem into blocks

Look at a feature and ask: function? if? loop? Naming the block tells you what to write.

Layer 9

Building For Yourself vs Building To Sell

Beer and spirits — treat them as different drinks

Two different drinks: software that runs your own business, and software you sell to other businesses.

Internal application

Built for your own business. The data model is easy — it's just your customers, emails, and jobs.

Multi-tenant SaaS

Sold to other companies; each company's data stays separate inside the same product.

Scaling, security, and logistics get harder — spirits to an internal tool's beer.

Platform admin

Owner/operator of the whole product — sits above every tenant.

Tenant (business) admin

Admin of one business that signed up to use your product.

End users

People using the product day to day inside a tenant — often several roles with different permissions.

Roles usually share one users table — that's what makes multi-tenant login tricky.

Layer 10

Schema-First Design & Migrations

Design the Excel sheet before you design anything else

“One project” vs “many projects” looks identical on day one and brutal once real data is in the table. Model early.

Migration

A change to database structure after real data is already in it — e.g. one-to-one → one-to-many.

Easy on an empty table, hard on a live one. Decide the shape before data piles up.

"What does the Excel sheet look like?"

Picture the page you're building: what data is visible? Each distinct thing becomes a table.

Semantic grouping

Name and group tables by what the data is in the real world — not what's convenient to type today.

A listing is a property; rental history and sale history are separate tables because that's how the world is shaped.

That's the full block set. Everything else is just combining these in different orders.