← Workshop

Workshop 4

Web and Interactive Applications

Wednesday, June 24, 2026 · 10 AM – noon · CHDR

Part 1

GitHub and GitHub Pages, from scratch

Walk through, together: what a repository is, what a commit is in plain language, what main means, and what GitHub Pages does.

What GitHub is — and what it isn't

  • A repository: a folder of files with a complete history.
  • A commit: a saved version. You'll make many.
  • Main: the canonical line of work; everything else is a branch off it.
  • Owned by you (or by Microsoft, technically) — not by Claude.

GitHub Pages

  • Free public web hosting from any repository.
  • URL pattern: https://<username>.github.io/<repo>/
  • Static only — but for a CV, syllabus, or playful tool, that's plenty.
  • Settings → Pages → choose a branch → wait two minutes → you have a site.

Part 2

From Artifact to Code Web

What persists, what changes. Why a real GitHub repository matters even for a one-page site.

Two tools, two purposes

Claude Artifacts

Quick. Disposable. Lives inside a Claude conversation. Great for a one-shot demo or in-class build.

Claude Code Web

Persistent. Multi-file. Writes to a real GitHub repository. Designed for the thing you'll keep iterating on.

Where this is heading: agentic Code Web

  • Claude AI now ships in finance, sales, and infra workflows — full repo access.
  • Same building blocks we'll use today: read files, edit files, run commands, deploy.
  • What we do for an ePortfolio scales to course tools, archive interfaces, recommender sites.

Live demo

Live demo: CV → ePortfolio

Same tool, same prompt structure, deployed to a real GitHub Pages URL inside the demo block. Watch the iteration: palette, sections, typo. This is the workflow you'll do in 50 minutes.

What we'll have built today

  • A live URL pointed at a single-page website you wrote.
  • Version history of every change you and Claude made.
  • A README that documents your AI use — the attribution is part of the work.
  • No code written from scratch. That's the point — and it's also a literacy.

Exercise

CV → ePortfolio (deployed)

Adapted from DistantCodingUMKC and HumanitiesAI/weekeleven:

  1. From your GitHub home, click New → name it (my-eportfolio) → set Public → check Add a README.
  2. From the repo page, Add file → Upload files → drag your CV / syllabus / description → Commit changes.
  3. Open Claude Code Web → authorize GitHub → select the repo.
  4. Prompt: "This repo has my [CV/syllabus]. Read it, then build a fun-but-professional single-page site appropriate to the work it represents. Put files in /site. Make it deploy-ready for Pages."
  5. Iterate. Color, layout, sections. The conversation is the workflow.
  6. Settings → Pages → branch main, folder /site (or /(root)) → wait two minutes → save your URL.

What's actually under the hood

Where Code Web sits in the agentic landscape

  • OpenAI ships Atlas (browser-as-AI), Comet automates tasks in your browser.
  • Claude Code Web is the humanities member of the family — it commits, deploys, attributes.
  • Choose the tool whose building blocks match your discipline's labor.
OpenAI Atlas / Comet articles

"But I didn't write any code"

  • Describing what you want in prose and steering what the model builds is natural language programming — the prompt is the source, the running site is the output.
  • It's continuous with distant coding: just as distant reading lets us work with a corpus too large to read line by line, agentic AI lets us work with code without authoring every line — reading it, directing it, judging it instead.
  • You still made the design decisions, reviewed the output, and committed the changes. That is a literacy — even if it isn't the one you grew up calling "programming."

And then there's the CLI

  • CLI = command-line interface: you type commands to the computer instead of clicking — the original, most direct way to drive software.
  • techradar.com: 'Claude Code comes to the masses.'
  • Code Web is the entry. The CLI is the deeper version — we tour it in Workshop 6.
  • You don't need it today. But know it's the same family of tool.

How fast this is moving

  • Over half of Japanese game companies use AI in development (October 2025).
  • NPR: AI code productivity claims under scrutiny — but the use is real.
  • When your students enter the field in two years, this is the floor.

If you assign this in a course

  • Require three iteration cycles documented in the conversation history.
  • Require a reflection on one design decision the student overrode.
  • Require AI-use attribution in the README.
  • Grade the iteration. Grade the override. Grade the attribution.

Part 5

Discussion: assignment design

Bring the assignment you're worried about. Or the one you've been wanting to redesign. Open Q&A on how Code Web fits in your fall.

What broke today? What surprised you?

  • Save your Pages URL — Workshop 5 iterates on it for accessibility and play.
  • Async Week 8: Rebuilding a Handout — converting a static handout into an interactive site.
  • If something broke at deploy time: GitHub Pages settings → check branch + folder → wait full two minutes.

Your URL is yours

That URL stays live as long as the repo exists. You own the work, the version history, and the attribution.