humans making things for humans#

a course about humans making things for other humans — using AI and other tools

deciding what’s worth building is the tricky part, and requires judgement — hence the studio

welcome to COMP4020#

a studio course: build web-app prototypes with LLM coding agents, every week, in public

one rhythm all semester: Thursday lecture, your 90-minute studio crit, and the build in between

two threads: mostly agentic coding at the centre; just enough web to build something real

(the field’s two poles are vibe coding and agentic engineering — we’re the second one)

today’s beats#

• what the course is, and how it runs: outcomes, the semester, working in public
• your week-1 mission — your crit 1 (C1) prototype live at a URL before your first crit next week
• how a coding agent actually works
• demo: build a small site and put it on the internet

what changed this week?#

(every lecture opens here)

the tools will change under us mid-semester — that’s a design feature of the course, not a failure of planning

Kimi K3, Opus 5

hating AI properly#

this course bans nothing, which is exactly why the critiques matter here

why an AI-everything course needs its critics

assumed knowledge#

git and the command line — you’ve cloned, committed, pushed before

design, iteration, feedback, reflection (COMP3900/6930)

web development is not assumed — the supporting web thread starts next week

what the course asks of you#

3.5 hours of contact a week: this 2h lecture plus your 90-minute studio crit

the Your participation page lists all of it — setup, weekly rhythm, deadlines

this week: two clicks in Canvas Start here: a survey and the access quiz — no marks in either, but the quiz unlocks your key

in public, on purpose#

every prototype ships to a public URL, and the repo becomes public at submission: source, history, CI logs, agent files

by November it’s your portfolio — evidence of how you work, not just what you made

no secrets, nothing private (inc. claude logs), and a fresh GitHub account for the course is fine

your week 1 mission#

today: get a working agent and meet the workflow

this week: build and ship C1, your first small website

before your week-2 crit: C1 is public and live; your reflection is in the repo

at the crit: demo it, discuss it, and build with your pod — your group’s time and room are on the crits page

C1: forgotten web#

create a simple site, and give it a look the modern web has forgotten

GeoCities, brutalism, teletext: the look is the brief; the content is yours

keep it small: a handful of readable pages, reachable from the home page

build it with plain HTML and CSS; no JavaScript this week

3. tell us who you are on GitHub#

the course generates your repos, but you need to tell us which GitHub account is yours

in Canvas Start here, on the Your Claude Code API key assignment, submit your username as the text entry: octocat, on its own — not a sentence, not a URL

handle in → organisation invitation out → you accept → your C1 repo is generated

(compulsory)

4. meet your C1 repo#

accept the course GitHub-organisation invitation promptly

you do not create the repo: the course generates it for you once your handle lands

run /comp4020:start for C1: it clones the repo and pulls the brief in — keep every course repo in one folder, there are a dozen by November

build privately; before the cutoff, make the repo public to turn on GH Pages

going off piste#

the documented path — mise, Claude Code, the starter templates — is the supported one, not the mandatory one

another agent, another model, another runtime manager: nothing is forbidden and nothing about the marking changes — but you own the debugging

all the way to the conscientious objector: you can do this course without AI — same specs, same deadlines, same rubric

stuck on setup?#

every step we’ve just covered is on the Onboarding page on the course site

if you’re stuck, post on Ed (tech support) or come to the drop-in: this Friday, 3–4pm, Seminar Room 3.03, Level 3, Birch Building — bring your laptop, we’ll help you get sorted before crit 1

communication channels#

this website: how the course runs, and the source of truth — if anything disagrees with it, the website wins

Ed for everything else: public threads answered within one working day, private threads within two

Canvas for marks, recordings, your api key, and the door into Ed

no email, no Teams, no Discord (you’ll get a polite redirect)

Claude Code cheatsheet#

cd into the repo first, then claude — context starts where you launch it

Esc interrupts a response; /clear starts the conversation fresh

/help lists the built-ins; /comp4020:help lists the course skills

plain English beats memorised commands, e.g. “how much budget do I have left?”

ask the course#

point your agent at the course site: handbook is the first course skill we use live; it retrieves the course’s published facts rather than trusting the model to guess them

• “What exactly must C1 contain?” — brief and definition of done
• “When is my C1 cutoff?” — the group-specific answer

demo: from brief to live site#

Use the handbook skill to find out exactly what C1 asks for, then build me a small site that answers it — and give me a page that shows at a glance what I need to do before my first crit next week.

one prompt, then we walk away from it — the agent builds while we talk about how it works

a small machine#

every coding agent is the same machine: a language model, a set of tools, and a loop

the model never touches your filesystem — it consumes and produces text

some of that text is tool calls, which the harness carries out on its behalf: read this file, apply this edit, run this command

read, edit, run#

read: nothing about your repo is in the model’s training data, so it searches and reads; every result lands in the transcript, its entire working memory

edit: the model proposes, the harness applies; permission lives in the harness

run: dev server, build, tests: the step that separates an agent from autocomplete

in a loop, until the model decides the job is done

model vs harness#

the model: weights on someone else’s GPU, turning a context window into the next chunk of text

the harness: everything else — the tools, the system prompt, what makes it into context, the permission rules, the loop itself

Claude Code: a polished harness, tied largely to one vendor’s models

pi: the same machine, a different take — minimal, model-agnostic, a codebase you can actually read

where feedback enters#

look where the world gets a say: run — reading and editing act on the repo; running is the repo answering back

“make pnpm test pass” gives every turn a verdict; “improve the code” free-runs on the model’s confidence

a question to watch all week: which turns got a real answer from the world, and which ran on confidence alone?

now you try#

Restyle the home page to look like ______ (a 90s fan page, a terminal, a newspaper — your call). Keep pnpm check green.

this week only: nothing is set up yet, so watching along counts — from week 2 the pauses assume a working laptop

demo: ship it#

Ship it: get the checks green, then push and turn on GitHub Pages.

turn what it built into something on the internet: the C1 path in miniature

the agent runs the checks instead of merely claiming it’s done — and what they say next is not up to either of us

commit, push, live#

the push lands on GitHub; a throwaway machine boots, checks out your repo, builds the site

the built files go to GitHub’s webservers — seconds later https://<org>.github.io/<repo>/ serves them to anyone on earth

Pages serves static files only — why it’s free, fast, and hard to break

(a server of your own arrives in week 7)

green checks and red#

green: the machinery ran and every check passed — not that the site is good

red: don’t squint at it — open the failing run, copy the log, read it back to the agent

gh puts all of it in the terminal, which means your agent can watch its own checks

the course skills don’t replace this loop — they make good feedback cheap to ask for

Ben uses… the GitHub CLI#

(another standing segment: one piece of my own harness)

gh — GitHub in the terminal: runs, logs, PRs, flipping repos public

in the demo just now, the agent watched its own deploy instead of waiting for me to paste logs in

now you try#

browser only, nothing to set up — the demo’s push is in CI right now

Open the Actions tab and watch it live. Green or red? Commit to one, out loud, with your neighbour.

key already wired up? ask handbook a question you actually care about

demo: read the failure#

The CI run failed. Read the log and fix it.

we never ran that check locally — CI held a sensor in reserve, and it found something we didn’t

watch what it does with a dead link: create the missing page, or delete the link? one of those is a fix

bring C1 to your crit#

C1 freezes at your cutoff, two hours before your week-2 session

the session opens on your crit agent’s prototype — fifteen minutes, whole group, your tutor driving

then, in a pod of four: show your live site, open with your breakthrough, give and take critique, and riff on the agent’s prototype

come able to account for how you directed and corrected the agent

your group has an agent#

six crit groups, six named agents — Shítāo, Bādà, Báishí, Dàchī, Yúnlín, Liùrú — and your group goes by its agent’s name

it sits the course beside you: same provocation, same cutoff, shipped publicly, same two reflection questions

the session opens by critiquing it as a whole group, and every pod forks it for the riff — never reset, never marked

two questions, every week#

• what was the breakthrough that moved the work forward?
• what did this work change about who I want to be as a software developer?

in your repo’s reflections/ — your breakthrough opens your pod crit

PROCESS.md sits beside it and describes (with commit citations) the key moments

studio mindset#

agents make the easy-to-test stuff easy — what remains is hard, and subjective, and human

come with something to show — a broken prototype beats no prototype

critique the artefact, not the author; take it the same way

research participation is voluntary#

the study uses data you already generate — commits, telemetry, work, marks

Lorenn Ruster holds the responses; I can’t see yours until after final grades

yes, no, or ignoring it changes nothing about your marks or your standing

you can change your mind later; the sheet and the form are in Canvas

assignment 1 is open#

build an interactive explainer of something you think more people should know or understand — one strong idea, one dataset or mechanic, and nothing else

interactive: the explanation is something a visitor does, not just reads

static and client-side, on the same canvas as C1 and C2 — due noon, Monday 17 August

class reps wanted#

every course gets a couple of class representatives — the cohort’s voice back to the teaching team; you’d gather feedback from the class and raise it with us and with ANUSA, a small time commitment, with training and support provided

interested? we’ll take nominations and vote in the room, during the lecture

deadline radar#

open now: Canvas Start here — survey, quiz, key and GitHub handle, onboarding, then doctor

Friday 3–4pm: setup drop-in (Birch 3.03)

before you build C1: crit group registered, org invitation accepted, repo cloned

your week-2 cutoff: C1 live at its URL via ship; reflection submitted

noon, Monday 17 August: assignment 1 — brief up now, repo lands next week

tl;dr#

every coding agent is the same small machine: a model, some tools, and a loop — and “done!” is a claim, not a fact

the model is fixed this afternoon; the harness is yours, and that’s where this course lives

shipping is cheap and starts today — push, read the checks, open the live URL

this week: get set up, then get C1 live before your first crit

ask your agent#

recast the week’s topics as prompts — ask until you can explain the answer back:

• static sites: what “static” means, and what it can still do
• HTML & CSS fundamentals: structure and layout from the ground up

the web thread proper starts next week — until then, your agent is the web tutor