Track · Web & sites

Build and ship your first website with AI.

You'll go from a blank file to a real, live website anyone can visit — starting with a single page you fully understand, then layering on style, interactivity, real data, and a framework, and finally deploying it for free. The AI types; you learn the web underneath it.

How this track reads

This is the path made concrete for the web. Each step has a prompt to ask your assistant, the concept you're learning, and a your turn tweak you do by hand. Build one small site you care about (a portfolio, a page for a hobby, a tiny tool) and apply each step to it.

What you'll install

A code editor — VS Code is the easy default.
Node.js 24 — the runtime for modern web tooling. If you set up the groundwork environment, you already have it via mise; otherwise grab the LTS from nodejs.org.
A browser with dev tools (Chrome, Firefox, or your daily browser).
An AI assistant — Claude, Cursor, Copilot, or Codex, ideally one that can edit files in your project folder.

The mindset for this whole track

The web is just three languages — HTML (structure), CSS (looks), JavaScript (behavior) — plus tools that organize them. When the AI writes a file, open it and find those three things. If a line is a mystery, ask the agent to explain it. Understanding the layers is what lets you fix the site when something looks wrong, instead of re-prompting blindly.

1One real page

ask your AICreate an index.html for a simple personal landing page: a heading with my name, a short bio paragraph, and a list of three links. Use semantic HTML and no styling yet.

Concept · HTML & the documentHTML is the structure — headings, paragraphs, lists, links. Open the file in your browser. "Semantic" tags (<header>, <nav>, <main>) describe what content is, which matters for accessibility and search. This unstyled page is the skeleton everything else hangs on.

Your turn: add a fourth link by hand, copying the pattern of the others. You just wrote HTML.

2Make it yours

ask your AIAdd a stylesheet that gives the page a clean, modern look — readable font, comfortable spacing, a color accent, and a layout that works on phones. Keep the CSS in its own file.

Concept · CSS & the box modelCSS controls appearance. Every element is a box with content, padding, border, and margin — the "box model," the thing you'll adjust most. Open your browser's dev tools (right-click → Inspect) and hover elements to see their boxes. Notice how the layout reflows when you resize the window — that's responsive design.

Your turn: change the accent color to one you like. Find where the AI defined it and edit that one value.

3Make it do something

ask your AIAdd a button that toggles the page between light and dark mode using JavaScript. Keep the script small and commented.

Concept · JavaScript & the DOMJavaScript adds behavior. It listens for events (a click) and changes the page (the DOM — the live tree of elements). Read the script: it's "when this is clicked, flip a class on the page." That listen-then-change loop is most of front-end programming.

Your turn: change the button's text. Then open dev tools, click the button, and watch the page's class change in the Elements panel.

The web underneath: requests, responses, status codes

Before your page pulls in live data (next step), meet the conversation every website is made of. You've already used it today: when you opened this page, your browser sent a request ("give me web-dev.html") to a server, and the server sent back a response — a three-digit status code saying how it went, plus the page itself. The first digit is the family: 2xx succeeded (200 "here it is"), 3xx redirects you elsewhere, 4xx means the request as sent can't be fulfilled (404 "no such thing"), and 5xx means something on the server's side failed. That exchange is HTTP, and every fetch, form, and API call in this track is another round of it.

You can watch the exchange raw with curl, which makes a request from the terminal and prints exactly what comes back — and you can be the server too. Your machine answers to the name localhost, and a port is a numbered door a server listens behind, so localhost:8000 means "door 8000 on my own machine." One precision that matters on shared Wi-Fi: without --bind 127.0.0.1, Python's teaching server answers every network interface, so other machines on the same network could browse your folder. The bind flag keeps it to your machine only — and either way this is a five-minute teaching tool, not a production server.

http

$ curl -i https://example.com/     # -i shows the status line and headers
$ python3 -m http.server 8000 --bind 127.0.0.1   # serve the current folder, this machine only
$ curl -i http://localhost:8000/index.html   # from a second terminal: request your own page

Your turn: in your project folder, run python3 -m http.server 8000 --bind 127.0.0.1, then from a second terminal curl -i http://localhost:8000/index.html and find the 200 on the first line. Ask for a page that doesn't exist and watch the 404. Stop the server (CtrlC) and curl again — connection refused: no server behind the door. Those are exactly the states your fetch code in the next step has to handle.

4Pull in real data

ask your AIAdd a section that fetches data from a free public API (like a quote or weather endpoint) and displays it on the page when it loads. Handle the case where the request fails.

Concept · Fetch, async, and JSONMost real sites get data from somewhere else. fetch asks a server for data; it's asynchronous (the page doesn't freeze while waiting), and the data usually comes back as JSON. Notice the AI handled the failure case — networks fail, and code that ignores that breaks in the real world.

Your turn: ask the agent what happens if the API is down, then read its answer against the actual code. That's diff review — the core engineering chop.

5Grow into a framework

ask your AIMy site is getting repetitive. Scaffold it as an Astro (for a content site) or Next.js (for an app) project, move my page in, and split the header and footer into reusable components. Explain the folder structure.

Concept · Components & a build stepA framework lets you write a piece once (a header) and reuse it everywhere — components. It also adds a build step that bundles your code for the browser. This is the jump from "a few files" to "a project," and the structure you see here is how nearly all modern sites are organized.

Your turn: edit the shared header once and confirm it changes on every page. That "write once, change everywhere" moment is why components exist.

6Put it on the internet

ask your AIWalk me through deploying this site for free — connect the project's Git repo to a host like Vercel, Netlify, or Cloudflare Pages so it rebuilds and goes live on every push.

Concept · Deploy & the Git workflowModern hosting watches your Git repo: you push a change, it builds and publishes automatically. Free tiers are generous enough for real projects. You now have a public URL — and the same push-to-deploy loop the pros use.

Your turn: make one small edit, commit, and push — then watch it appear live a minute later. That feedback loop is addictive on purpose.

Where to go next

Fundamentals, free: MDN Web Docs (the reference for everything web), The Odin Project and Scrimba (free tier) for structured, project-based courses on HTML, CSS, and JavaScript, and javascript.info for JavaScript in depth. Practice on Exercism with free human mentoring.
The chops: on the Vibe → agentic page — start specifying a feature before you prompt, and review every diff for what it actually changed.
Next step up: the Apps track takes the framework you just met and adds real data storage, accounts, and a back end.

The arc, in web form

The first page appearing in your browser is the floor — exciting and instant. Understanding the three languages, reviewing the data-fetch code, and owning the deploy loop is the climb. Keep doing both.

Built to be rebuilt. Open source, no tracking, works offline.