ReidCodex / learn
The Builder's Path · An Audio Adventure

Learn to build the web while you drive.

A guided journey through no-code and low-code website building — written to be heard, not just read.

Each mission below comes with a prompt you can speak aloud to your AI. No keyboard, no screen, no pressure. By the last mile you'll understand how real websites get made, and you'll have the words to make your AI build them with you.

ON THE ROAD

Eyes up, hands on the wheel. When you reach a Say this aloud block, read it to your AI and let it teach back. Pull over before tapping anything. The goal is fluency, so you arrive home knowing exactly what to build.

Orientation · Where we're going

First, the lay of the land

Before the missions, here's the whole world in five ideas. If a term shows up later, it lives here. Don't memorize it; just let it pass by like road signs.

The Spectrum

No-code → Low-code → Code

No-code is building by clicking and dragging. Low-code is mostly that, plus small snippets when you want power. Code is writing every line. You can live happily anywhere on this line.

The Anatomy

A site is three things

Structure (the bones), style (the skin), and content (the words and images). Every tool, no-code or not, is just a friendlier way to arrange those three.

The Engine

Static vs. dynamic

A static site is the same for everyone, fast and cheap — like your GitHub Pages sites. A dynamic site changes per visitor and needs a database behind it.

The Address

Domain, host, deploy

The domain is your street address. The host is the land it sits on. Deploying is moving the house onto the land so the world can visit.

The Helper

The AI is your contractor

You don't lay every brick. You describe the house clearly, the AI builds it, and you learn the trade by watching and asking why.

The Goal

Taste, not just tools

Anyone can drag a button. The skill worth having is knowing which button, where, and why. That's what these missions actually train.

The Journey · Eight missions

The missions

Take one per drive, or string a few together on a long haul. Each has a goal, a short teaching, and a prompt to speak aloud so your AI explains it back in its own words. Talking it through out loud is the whole point — that's how it sticks.

01

Name the spectrum

Goal · Understand where no-code, low-code, and code differ

People argue about which is "real" building. They're all real. No-code tools like Webflow, Framer, Wix, Squarespace, and Carrd let you design visually and never see a line of code. Low-code adds escape hatches — a snippet here, a custom block there. Hand-coding is what you already do with your GitHub Pages sites. The right choice is the one that gets your idea live without fighting you.

Say this aloud
Explain the difference between no-code, low-code, and writing code by hand, like you're talking to a smart friend on a road trip. Give me one real example tool for each, and tell me one situation where each one is clearly the best choice.
  • Listen for the tradeoff: speed and ease versus control and ceiling.
  • Notice that "no-code" still produces real HTML and CSS underneath.
02

See the three layers

Goal · Learn structure, style, and behavior

Every web page is HTML (structure), CSS (style), and JavaScript (behavior). No-code tools hide these behind panels, but they're always there. Once you can name which layer a problem lives in, you can fix anything: "the spacing is wrong" is CSS, "the menu won't open" is JavaScript, "the heading is in the wrong place" is HTML.

Say this aloud
Teach me HTML, CSS, and JavaScript using a house as a metaphor. Walk me through what each one does, then quiz me: describe three website problems and ask me which layer each one belongs to.
03

Pick the right no-code tool

Goal · Match the tool to the job

Carrd is unbeatable for a one-page site. Framer and Webflow give you serious design freedom with real animation. Squarespace and Wix trade some control for an all-in-one experience with hosting baked in. Notion and Super.so can turn notes into a site. The trap is picking by popularity instead of by fit — a landing page and a 200-page store want very different tools.

Say this aloud
I want to compare no-code website builders. For Carrd, Framer, Webflow, Squarespace, and Wix, tell me the kind of project each one is best at and its biggest weakness. Then ask me what I'm trying to build so you can recommend one.
04

Design with taste

Goal · Make choices that don't look templated

Drag-and-drop makes everything possible and most things mediocre. The fix is a tiny set of rules: one display font and one body font, a palette of four or five colors with one accent, generous whitespace, and consistent spacing. Constraints are what make a page feel designed instead of assembled.

Say this aloud
Teach me the five design decisions that make a website look professional instead of templated. Keep it to fonts, color, spacing, hierarchy, and one signature element. For each, give me a simple rule I can remember without looking at a screen.
05

Learn to prompt like a builder

Goal · Get exactly the site you pictured

The difference between a vague request and a great build is specificity. Name the audience, the one job the page must do, the mood, the sections in order, and the single thing it should be remembered for. A weak prompt is "make me a website." A strong one reads like a creative brief. The clearer your words, the less you fix later.

Say this aloud
Help me write a strong website prompt out loud. Ask me one question at a time: who is it for, what is the one job of the page, what mood, what sections in order, and what should it be remembered for. After my answers, read the finished brief back to me.
  • This is the master skill — a clear brief beats any tool.
  • Save the brief in your head; you'll hand it to your AI when you're home.
06

Understand hosting and domains

Goal · Get a site from your machine to the world

A domain is rented from a registrar like Namecheap or Cloudflare. Hosting is where the files live — GitHub Pages and Netlify host static sites for free. Connecting them means pointing DNS records (the internet's phone book) from your domain to your host. You've done this with your Reid sites; this mission makes the why click so it stops feeling like luck.

Say this aloud
Explain domains, hosting, and DNS to me like I'm setting up my first website. Define an A record and a CNAME in plain English, and walk me through what happens, step by step, from buying a domain to seeing my site live.
07

Add low-code superpowers

Goal · Break past what no-code allows

When a builder can't do the thing you want, low-code is the escape hatch: an embed block for a custom widget, a snippet of JavaScript for an interaction, a connection to a tool like Airtable or a form service. You don't become a programmer — you learn just enough to reach past the ceiling. This is also where AI shines: ask it for the exact snippet and where to paste it.

Say this aloud
Give me three examples where a no-code site needs a small piece of custom code to do something the builder can't. For each, explain what the code does in plain words, and tell me where it usually gets pasted.
08

Ship, then improve

Goal · Build the habit that makes you good

The builders who get great aren't the ones who plan forever — they're the ones who ship a rough version, look at it honestly, and fix one thing at a time. Launch a small site. Read it on your phone. Note what feels off. Improve one thing. Repeat. Speed of iteration beats perfection of plan every single time.

Say this aloud
Give me a five-step loop for shipping a website fast and improving it over time. Then ask me what small site I could launch this week, and help me cut it down to the smallest version worth publishing.
Reference · For when a word slips by

The road signs, defined

You don't need these to start. They're here for the moment a term flies past and you want it pinned down. Have your AI read any of these aloud if you'd rather hear it.

No-code
Building software visually, without writing code — clicking, dragging, and configuring instead.
Low-code
Mostly visual building, with small bits of real code added where you need more power.
Static site
A site that serves the same files to everyone. Fast, cheap, secure. Your GitHub Pages sites are static.
Dynamic site
A site that changes per visitor or updates from a database — logins, dashboards, stores.
Domain
Your readable web address, like reidcodex.com, rented from a registrar.
Host
The service that stores your site's files and serves them to visitors.
DNS
The internet's phone book; it points your domain at your host using records like A and CNAME.
Deploy
Publishing your site so it's live on the internet.
Responsive
A design that reshapes itself to look right on phones, tablets, and desktops.
Template
A pre-built starting design. A shortcut — and, unchanged, the reason many sites look the same.