Revise an existing webpage with Codex: request, compare, and check
Use the recorded Lin revision to practice scoping changes, preserving a baseline, giving feedback, and checking results.
Make one clearly scoped, verifiable change to an existing webpage.
On this page
01Keep a baseline before editing
Use your own HTML/CSS page or download the original Chinese example. The archive contains the finished version; open the preserved first draft to compare the initial layout.
Copy the whole folder as a backup and record which file you are previewing. Practice on a copy. If you already use Git, commit a baseline first.
The screenshots and measurements below come from the same recorded demonstration on October 2, 2026, not a new test. The revision was planned teaching feedback, not feedback from an independent beginner study.
02Read the existing page first
Confirm the directory, file roles, and preview method before editing. Start with a read-only request.
Confirm the full working directory path and read the personal webpage files. Explain the page structure, stylesheet, and preview method. Identify what controls the bio font size below the nickname and the gap before the interests. Do not modify files or publish yet.
Compare the reported path with your folder. Your page may have inline styles or a separate CSS file; the example filenames are not a rule for your own project.
03Name both changes and things to preserve
The recorded case changed only the bio sizes and spacing above the interests. Adapt this prompt to a small change you actually want.
Adjust only the bio font size below the nickname and the gap between the bio and interests, for readability at phone and desktop widths. Preserve the wording, colors, project content, and interactions. Add no features or external dependencies. Before editing, state which files you plan to change. Afterwards, list the actual changes and check for clipped text and horizontal overflow at desktop and approximately 390px widths. Explicitly identify any check you did not perform. Work locally; do not publish.
04Compare the recorded change
- Desktop bio: 17px → 20px.
- Mobile bio: 16px → 18px.
- Space above interests: 26px → 38px.
- HTML unchanged; edits confined to CSS.
These measurements describe one revision, not universally ideal sizes. The recorded change matched the request, but no reader study measured the readability benefit.
05Refresh and check in order
- Confirm you are previewing the edited file and refresh it.
- Compare the bio size and spacing with the baseline.
- Check that the nickname, interests, project text, and colors did not change unexpectedly.
- Inspect desktop and phone widths for clipping and horizontal scrolling.
- Test existing links and the project disclosure.
The recorded case had no horizontal overflow in local HTTP previews at 1280, 390, and 320px. Direct file:// opening, cross-browser compatibility, and physical phones were unverified. You must check your own page separately; the example’s results are not your acceptance results.
06Set a clear boundary for the next revision
If the change causes a problem, describe its location, viewport width, and visible effect. Keeping a baseline helps comparison and recovery.
After this revision, [specific symptom] occurs at [viewport width]. Keep the confirmed [change] and fix only [problem location]. Do not rebuild the whole page. List the changed files, recheck the original content, interactions, and small-screen layout, and separate completed checks from unperformed checks.
Keep the checked version and a short change summary. Read the original Lin walkthrough for the complete record or troubleshooting if files or changes are missing. English prompts here are practice adaptations; original evidence remains in Chinese.
Before you move on
Checklist progress stays in this browser. It is not uploaded or synchronized across devices.
About this article
Uses original evidence from the Lin demonstration on October 2, 2026. New prompt templates are practice suggestions, not evidence of an additional test. Updated: 2026-10-02.