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.

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.