FROM SYNTAX TO SYSTEMS
看懂程式在哪裡執行，然後真的動手把它跑起來。
從變數、HTML、JavaScript 開始，一路走到 HTTP、SQL、Git、Linux、React、Supabase、CI/CD 與真實 production debugging。每個概念都回到：誰執行？input/output？state 怎麼變？失敗在哪一層？
執行：誰在跑？
資料：input → transform → output
狀態：哪個 state 被改變？
Debug：最後成功 / 第一失敗
LEARNING COCKPIT
不用找路：先看你現在該做什麼
這裡只顯示目前進度、下一課與一個最適合接著做的實作入口。
4-STAGE LEARNING PATH
不要同時看十二條路線；分四個階段走
每一階段只回答一個問題：你現在要建立的是語法、Web 資料流、工程能力，還是框架與平台能力？
01
FOUNDATION
先讓程式碼不再像咒語
value、type、if、loop、function、HTML 結構、CSS layout、DOM 與 JavaScript。
02
WEB SYSTEM
把 Browser、Network、API、Database 串成一條資料流
DNS、port、HTTP、fetch、REST、SQL、auth、Browser state；知道 request 到底走去哪裡。
03
ENGINEERING
開始像工程師一樣驗證、部署與除錯
Git、Shell、Linux service、testing、CI/CD、security、logs、production smoke 與 incident diagnosis。
04
FRAMEWORKS & PLATFORM
最後才把抽象能力搬進 TypeScript、React、Android、Supabase
框架不是另一個宇宙；它們仍然建立在 runtime、state、network、authorization 與 data flow 上。
PRACTICE SYSTEM
需要哪種能力，就進哪一種 Lab
工具不再全部平鋪。先選「寫、組、系統、除錯」其中一種能力。
寫得出來
單一概念與 function correctness。
組得起來
多個概念一起運作，產生真的 UI / state / data flow。
看得見系統
把 command、request、response、network timing 變成 evidence。
壞掉時找得到原因
從症狀蒐證，形成 hypothesis，修復後再 regression。
CORE MENTAL MODELS
三個模型夠你反覆套用
只有需要複習時才展開；首頁不再強迫你一次看完所有內容。
01 · Browser 怎麼找到 Server？
→
→
→
→
02 · if = 要件 → 涵攝 → 效果
let age = 20;
if (age >= 18) {
allow();
} else {
reject();
}命題：age ≥ 18
成立 → allow()
不成立 → reject()
成立 → allow()
不成立 → reject()
03 · Error 先分類，再修改
點一個錯誤類型看診斷方式。
REAL INCIDENT TRACK
不是背錯誤碼：真的從 evidence 找 root cause。
從 JavaScript null crash、API 404、Nginx 502、RLS 資料洩漏，到 CI 與慢 query；先蒐證，再提出 hypothesis。
SYSTEM MAP
迷路時，再打開整張地圖
平常沿四階段走；只有需要定位名詞時才看完整 system map。
展開完整系統地圖
READY?