完成第一个小项目

返回 Codex 教学总目录

读完能做到什么

开始之前：拿到正确版本

下载Small Steps 练习材料，解压缩后会看到 start、broken、expected。这篇只复制 expected，将副本命名为 codex-first-site，保留解压缩的原版。start 的筛选尚未完成，broken 故意有错，两者留给后续课程；不要把三个资料夹合并，以免不知道自己正在验证哪一版。

副本根目录直接包含 index.html、style.css、app.js、core.mjs、core.test.mjs。HTML 是画面结构，CSS 是样式，app.js 串接浏览器互动，core.mjs 处理资料，test 档负责检查核心行为。这些档案不用先全部看懂，但必须确认都存在。本篇需要可用的 Codex、Node.js 与 Python 3；已有工具就不重灌，只核对命令可执行。

Windows 在这个资料夹开启 PowerShell，macOS／Linux 开启终端机；不熟位置确认时先读终端机与路径。Windows 用 py --version，macOS／Linux 用 python3 --version，三个平台都用 node --version。找不到命令时先安装对应工具并重开终端机；这个范例没有 package.json，因此不使用 npm install 或 npm test。

第一步：先确认修改前能运作

在副本根目录执行核心测试，应有三个测试通过、零失败。这是「修改前」的证据；如果现在已失败，先核对是否误用了 start 或 broken，或缺少档案。不要在坏掉的基础上要求 Codex 同时改画面和修所有错误，否则无法判断哪个结果来自哪项需求。

node --test core.test.mjs

Windows 用下方命令启动预览。这个终端机会持续显示伺服器日志，先保留它，不要等待它自动回到提示符号；需要执行别的命令时另开终端机。命令只系结本机的 127.0.0.1。

py -m http.server 4173 --bind 127.0.0.1

macOS 或 Linux 用下方等效命令。两段选自己的平台其中一段执行，不能同时占用 4173。若该埠已被自己的另一个练习使用，先停止已确认的那个伺服器，或改用 4174 并在后续网址保持一致。

python3 -m http.server 4173 --bind 127.0.0.1

浏览器开启 http://127.0.0.1:4173。若这个来源已有想保留的虚构任务，先另行记录；展开 About this exercise，选 Reset practice data，再切到 All tasks 并确认清单为空。这只清除练习资料，不会还原程式档。接著新增 Read、Build，勾选 Read；Completed 应只看到 Read，Active 应只看到 Build。重新整理确认状态仍在。直接双击 index.html 可能因 file 网址限制无法载入模组，请使用刚启动的 http 网址。

第二步：先让 Codex 读取，再下修改要求

桌面版选 codex-first-site 建立任务；CLI 则在副本根目录启动。先要求只读取五个档案并摘要用途、回报工作目录与测试命令，暂不修改。确认它知道这是没有套件安装步骤的静态网站，再送出下方完整需求。即使是小修改，也要把「要保留的功能」一起交代。

Work only in this codex-first-site practice folder.
1. In index.html, set the h1 text to "Small steps, clear progress."
2. In style.css, set the :root background to #fff8ed.
Keep all todo behavior, labels, storage keys and data formats unchanged.
Do not add packages or external requests. Do not deploy the site.
Run node --test core.test.mjs.
Check the page at 390px and 1280px if browser access is available.
Report changed files, checks performed and any checks not run.

理想的差异只有 index.html 的 h1 文字与 style.css 的背景色；不是整份 HTML 被重建，也不是资料程式被换成另一套框架。Codex 若说没有浏览器工具，应把画面检查列为未执行，你仍可自行完成。不要要求它为了声称检查通过而猜测画面，或把没有错误讯息当成视觉验收。

第三步：自己验证成果

重新读取两个档案，核对指定字串与色码；再次执行核心测试并保留测试结果。浏览器重新整理后看标题、背景与原来的 Read、Build。缩到约 390px 再看一次，页面不应出现整页横向卷动；放大到 1280px 检查内容宽度。窄视窗验证响应式版面，不代表真的测过 iPhone 或 Android。

再做两个边界测试：只输入空白不能新增；把下方样本输入待办栏位后，画面应显示原始文字，不应把它当成图片。用 Tab 移动到输入框、按钮、筛选与核取方块，应有可见焦点。这些检查确认小幅画面修改没有顺手破坏资料处理或键盘操作；核心测试不会自动涵盖 CSS 外观，所以两种证据都要看。

<img src=x>

常见问题、停止与还原

页面变成资料夹清单，表示伺服器从太外层启动；停止它，移入直接包含 index.html 的副本，再启动。Port 被占用时不要乱停其他服务，先找自己的预览或换埠。改了档案画面没变，先确认储存、网址、资料夹与重新整理；换了埠会使用不同的浏览器储存来源，待办消失不一定是程式删掉资料。

停止预览是在执行 Python 的终端机按 Ctrl+C。还原时只从保留的 expected 原版取回这次改过的 index.html 与 style.css，或手动恢复两行；不要删除浏览器全部资料。若要清除练习待办，页面 About this exercise 里的 Reset practice data 只处理本例的储存键。先保留需要的虚构记录，再按重置。

小练习与查证纪录

自主练习只改主标题成自己的另一句英文，仍保留所有功能并重做正常与空值案例。你能交付修改前后差异、实际测试结果、两种宽度的观察及未执行项目，就完成这一篇。接著读需求描述、专案规则与测试及审查，把这次流程变成每次都能重复的工作习惯。

材料是本系列原创、可公开分享的虚构练习网站。参考版核心与浏览器行为已在 Windows／Edge 验证；其他 OS 的启动说明未冒充实机测试。Codex 入口依 2026-09-20 的官方快速开始与 CLI 文件查证。图片只表示练习成果，不是 Codex 的产品介面。

把「预期」与「实际检查」分开记录

下表是验收时的预期对照，不是你这次执行的通过纪录。每次另记四项：实际修改的档案；测试执行目录与通过／失败数；390px 与 1280px 各自的实际画面结果；尚未完成的操作。即使核心测试 3 项全通过，主标题或背景仍可能改错，因为这组测试检查待办资料逻辑。若无法开启预览，画面栏填「未执行」并保留待验收项目，不要用原始码中的颜色值代替画面结果。

返回 Codex 教学总目录

阅读完整文字说明

Request to index.html to Browser

• AI 工具
• 教程
• Codex