LESSON-28 · SELF-PACED PRACTICE

dist/project/e-commerce Production Artifact 與本機 Smoke

把「dist/project/e-commerce Production Artifact 與本機 Smoke」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

4個獨立主題3個練習階段1個整合挑戰
看見缺口 → 修改一小段 → 重新載入驗收

每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。

先知道今天要做什麼

不要從長篇名詞開始;先從第一個可完成的小任務開始。

01

選一個 topic

從第一張卡開始,先閱讀任務情境與預期畫面。

02

修改自己的檔案

打開 Starter 的實作檔,依 Step 逐步修改,不靠按鈕代做。

03

用證據驗收

重新整理頁面,對照畫面、DOM、Computed、Console 或文件證據。

4 個獨立主題

每張卡只練一個責任;完成後再進入下一張。

01

唯一 Production Artifact 根

能確認唯一交付根包含六頁、assets、apps-script、robots、sitemap 與 smoke test。

要修改:files/starter/index.html

02

六頁與本地資源清單

能逐項確認六個 HTML 與 assets/apps-script/robots/sitemap 均位於交付根內。

要修改:files/starter/index.html

03

SEO 與索引產物

能檢查六頁 placeholder canonical/OG 與 robots/sitemap 使用同一 placeholder origin,並留下部署前同批替換 gate。

要修改:files/starter/index.html

04

本機 E2E Smoke 與不部署

能驗收六頁、購物流程、聯絡流程、390px、Tab、Console/Network,並留下 deployment=not-run。

要修改:files/starter/smoke-test.md

最後整合挑戰

把已完成的責任轉回本章完整作品,不把整合步驟冒充成單項教學。

在同一份章節作品中整合 4 個 module,排除單項通過但組合失敗的問題。

完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

第一個建議動作

如果你現在只想知道下一步,先做這件事。

開啟「唯一 Production Artifact 根」:先看 files/starter/index.html 的 先從 e-commerce 根列出 index.html 與六頁。,記錄目前狀態,再修改一小段。