Things to make / Recipe 08 of 13 · Make
Make a tiny personal website you can open immediately
Turn three project notes into a real local page tonight.
- About 15 minutes
- For a beginner who wants a small project portfolio without a hosting account.
- Runs in Claude Code and OMP
What the agent made
Ran it for real with Claude Code 2.1.292 and OMP 18.8.5 on 2026-10-08, in an empty session with no saved memory. Your result will differ.
Open what Claude Code made, full screen
The same prompt in OMP made its own version: open what OMP made. Two runs, two different results: that is normal.
Make your own
Get the files
Download the practice folder (ZIP)
Unzip it: you get a folder called
cli-practicewith 1 fictional file. Download the fictional about-me.txt with a short introduction and three invented projects.Open your agent in that folder
Open a terminal in
cli-practiceand typeclaudeoromp --approval-mode always-ask. First time? Set up in about five minutes, with steps for Mac, Windows, and Linux.Paste this prompt
In this practice folder, read about-me.txt without changing it. Build self-contained index.html as an offline personal website using only HTML and CSS. Include an introduction, three project sections, and three labeled navigation links to those sections. Ground every claim in the notes; label the identity fictional. Make keyboard focus visible, check that all three section anchors resolve, and tell me how to open the file locally. Stay in this folder. Do not install packages, access the network, use external resources, or publish anything. Use commas, not em dashes.
The prompt asks the agent to stay in this folder; it cannot enforce that. Read each file change and command before you approve it.
Check it yourself
Open
cli-practice/index.htmlin your web browser (double-click it), then:Human check: Open index.html offline, use each of its three navigation links and confirm it jumps to the matching project. Tab through the links to inspect visible focus.
When we checked the recording above: Opened recorded index.html in Chromium; clicked all three project links and each landed on its matching heading. Pressed Tab and saw a 3px solid focus outline, with no external resources or changed input.
Why an agent, not a chat window
The agent transforms a local notes file into a functional, linked HTML page and checks its navigation.