zero2codex
OpenAI Codex workflow course

Course goal: ship your personal brand site

Build a personal brand site with Codex

Keep improving one project from an empty folder to a responsive one-page site with an introduction, projects, and contact details. Every lesson adds a visible result or a check toward that finish line.

Curriculum

Personal brand site build path

01

Start With Codex

Set up Codex and build the hero section of your personal brand site.

0/4
03

Work Safely

Add site interactions while keeping every edit safe and easy to undo.

0/3
Local Thread BoundariesAdd Back to top while keeping the task limited to one file and one visible outcome.Sandbox And ApprovalsServe the personal site locally and review every command before approving it.Network Access RiskAudit fonts, images, scripts, and links to decide whether the site needs network access.
9 minReady

Network Access Risk

Balance current information needs against supply-chain and privacy risk.

network accesspackage installationsource trust

Watch, then try

09|檢查外部連線風險(CLI 版・25 秒)

真實 CLI 輸出檢視器與本機網站錄影,非 Codex 原生介面;繁中字幕、無旁白,等待區段已剪接。

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 read-only。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 依實際程式碼列出連線;不開啟或送出 Email。
跟著本片操作:CLI 指令與練習檔(繁體中文)

這是本課的 CLI 替代實作路徑;下方概念課程仍保留其他介面的說明。先安裝並登入 Codex CLI,在 my-brand-site 資料夾內執行下列 macOS/Linux 指令。影片將真實 CLI JSON 事件排版成易讀畫面,下列指令使用一般 CLI 輸出;不是 Codex 原生介面,等待區段已剪接。

codex exec --ephemeral --ignore-user-config --sandbox read-only '唯讀檢查 index.html 的 script、link、img、CSS url、fetch、form 與 mailto。實際搜尋後列出外部 HTTP 請求與 Email 連結是否存在;不要訪問任何 URL,不修改。分清 mailto 與頁面載入的網路請求。限 180 字。'

下載逐課練習檔與實際結果(ZIP)

10-minute lab

Hands-on lab

Run a read-only network-needs audit on the personal brand site. The goal is to prove whether this local static project needs internet access at all.

Before you start

  • Keep my-brand-site as the active local project after the server-verification lesson.
  • Start a separate task named Audit network needs and keep network access off.

Do it now

Good prompt

Codex, perform a read-only network-needs audit of index.html. Inspect all script, stylesheet, image, font, fetch, and form references. Do not edit files, browse, install packages, or make external requests. Report which resources are local, identify any exact external URLs without opening them, and conclude whether this page needs internet access to work when served locally.

What success looks like

  • No file changes, package installs, browsing, or external requests occur.
  • The report identifies whether every asset and behavior is contained in index.html.
  • Codex concludes that external internet access is unnecessary unless the file contains a specific external reference.
Stuck? Try this
  • If Codex asks to browse, reply: “The answer is in index.html. Continue locally and name the missing fact if you disagree.”
  • If an external URL is found, ask Codex to report it without opening it or changing the file.

Plain-language explanation

Network access is useful when Codex needs current documentation, packages, or external context. It is unnecessary when the answer is already in the repo or in stable local files.

A good request tells Codex when browsing is allowed and what sources should count as trustworthy.

Why it matters

Network boundaries reduce supply-chain and privacy risk while still letting Codex use current official information when that matters.

Common beginner mistake

Beginners sometimes let Codex search the open web for stable local facts or install packages before checking what the project already uses.

Try this

Pick one task and write a sentence that says whether Codex may use the network and which sources are allowed.

Completion checklist

  • The request names when browsing is allowed.
  • The response prefers official documentation for current technical facts.

Sources

08

Finish And Deliver The Site

Polish independent tasks in parallel, then complete one final acceptance review.

0/3

Practice lab

Copyable Codex prompts

Plan before coding

Codex, inspect the relevant files first, then propose a plan. Do not edit until the plan names tests and verification steps.

Verification checklist

  • Relevant files are named before edits begin.
  • The plan includes tests and verification commands.

Verify a UI change

Codex, start the dev server, open the route in the browser, check desktop and mobile layouts, then report the exact evidence.

Verification checklist

  • Desktop and mobile states are checked in the browser.
  • The final note includes exact evidence.

Review focused risk

Codex, review the uncommitted diff. Focus on behavioral regressions, missing tests, and accessibility issues. Do not modify files.

Verification checklist

  • Findings lead with severity and file references.
  • Unchanged files are left untouched.
Every good Codex request says what to change, what to preserve, and how to prove it worked.

Reference

Codex concepts to keep nearby