No jargon, no prior experience. Just what's happening under the hood — and how to read it, and change it, without breaking everything.
Code is just a list of instructions, written down for a computer to follow — like a recipe. The computer does exactly what the instructions say, in order, very fast, and not one thing more. It never guesses what you meant. That's the whole secret: when something breaks, it's almost never magic — a step is missing, out of order, or spelled in a way the computer doesn't recognize.
Different "languages" are just different ways of writing those instructions, each suited to a different job — the same way a recipe, a knitting pattern, and sheet music are all instructions, but for different things. You don't need to write them fluently to be useful. Being able to read a few lines and know which one to nudge is most of the battle.
You'll meet these by name constantly. Here's what each one is for — so when you open a file, you know what you're looking at.
Defines what's on the page and in what order — headings, paragraphs, buttons, images. It's the skeleton. If you want to change the words on a page, this is usually where they live.
Controls how it looks — colors, fonts, spacing, sizes, layout. Same bones, totally different outfit. Change a color or a font here and nothing about the content breaks.
Makes things happen — what occurs when you click, type, scroll, or submit. The interactivity. More powerful, so also the easiest of the three to break. Edit gently.
A friendly, readable language used for automation, crunching data, scripts, and most AI work. Reads almost like English, which is why beginners and scientists both love it.
The language for asking a database questions — "give me every customer in Texas who ordered last month." If your data lives in a table somewhere, SQL is how code fetches it.
A tidy way to store and pass around information, written as labelled pairs. Not instructions — just data. You'll see it everywhere settings or content get saved.
Learn these five ideas once and you can half-read almost any language. The words differ; the concepts don't.
Here's a snippet of HTML with a touch of CSS — the kind of thing you'll actually open. Same colors as above, so you can spot each part.
The pattern to notice: tags come in pairs that wrap content — <h1>…</h1> — and the closing one just has a slash. The text between them is what shows up on screen. The style block is a list of property: value; pairs. The values (a color, a number) are the safest thing to change. The punctuation around them — the braces, colons, semicolons — is the structure holding it together.
A project isn't one giant file — it's a folder of files that reference each other, like a binder with labelled tabs. A typical website folder might hold:
"Running" the code just means handing those files to something that can follow the instructions — your browser opens the HTML and obeys it, drawing the page. index.html is almost always the starting point, the page that loads first.
You'll also hear front-end vs back-end. Front-end is everything you see and click (the storefront). Back-end is the machinery behind the curtain — databases, logins, payments (the stockroom). Most of what you'll want to tweak — words, colors, layout — lives on the front-end.
You said you can read code and want to manipulate it. This is the playbook for doing that safely.
Before you touch anything, duplicate the file. If it all goes sideways, you delete your version and you're back to safe.
Edit, look at the result, repeat. If you change five things and something breaks, you won't know which one did it.
Words inside "…", color values, and plain numbers are the safest to change. They're content, not structure.
The brackets { }, ( ), colons and semicolons are scaffolding. Deleting one is the #1 way to break a file.
⌘ Z walks back your last change, again and again. Nothing you do in an editor is permanent until you save.
Paste a confusing line to Claude and ask "what does this do, and what's safe to change?" Reading with a guide beats trial and error.
The words that get thrown around as if everyone already knows them. Now you do.
With the basics down, the rest of this suite maps the tools where code and design actually live — the shortcuts that make each one fast, and what each is for.