學生實作包 · 28 章

從空資料夾，到可驗收的商用網站與連續電商專案。

每章保留 180 分鐘主課，再依學習成果自主完成 micro Lab、整合 Lab 與驗收證據；進度以能做到什麼為準，不以倒數計時。

28 章主課111 個自學主題Vue 3 CDNCloudflare Pages

LESSON-23–28 · 連續專案

從規劃到 GAS／Sheet 的運動器材電商

六章共用同一份鐵刻運動專案：商品、localStorage 購物車、訂單、聯絡表單、GAS 測試契約、server-authoritative totals 與 release smoke。

開啟運動器材電商

預設 endpoint 空白時只跑 local mock，不送出 POST；真實 GAS 與 Sheet 只能使用測試部署及測試資料。

28 章練習地圖

Solution 是參考答案；各章卡片可直接進入 examples/supplement/index.html 完成自主學習。

LESSON-01 · 3 個自學主題

建立可預覽、可除錯的前端檔案結構

服務型商家的網站剛開始製作，今天只建立一個可以預覽與除錯的三檔案小專案；圖片素材先不加入，避免把尚未教的路徑問題混在一起。

180 分鐘主課＋依學習成果逐項完成的自主學習

閱讀 README 開始練習自學 3 主題

LESSON-02 · 4 個自學主題

用 HTML 語意建立服務型商家首頁骨架

客戶只有一段商家介紹與服務資訊，先用兩個 HTML 檔案建立能閱讀、能前往下一頁的首頁骨架；本堂不加入 CSS、JavaScript 或框架。

180 分鐘主課＋依學習成果逐項完成的自主學習

從空資料夾，到可驗收的商用網站與連續電商專案。

從規劃到 GAS／Sheet 的運動器材電商

28 章練習地圖

建立可預覽、可除錯的前端檔案結構

用 HTML 語意建立服務型商家首頁骨架

用相對路徑與表單欄位完成多頁網站骨架

理解 selector、cascade 與規則套用順序

用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸

完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性

用 Flexbox 排列導覽列、頁首與服務卡片

整合共用容器、Hero、服務摘要與 CTA 成為首頁

用 CSS Grid 建立可伸縮的服務型商家版面

用 Mobile First 與 Media Query 讓服務型網站適應不同寬度

用 Position 控制元素參考點、捲動行為與前後層級

用狀態樣式與鍵盤操作讓表單和按鈕可理解

用 class、狀態與 transition 做出可驗收的按鈕與服務卡片回饋

用值、型別、變數與函式把服務資訊整理成可顯示的結果

用陣列與物件整理服務資料並產生可用結果

用 DOM API 將服務資料安全地渲染到頁面

用事件監聽完成行動版選單與 FAQ 開合

掌握表單驗證、preventDefault 與非同步狀態流程

用 Vue 3 CDN 建立 createApp、setup 與 mount 的最小流程

用 ref、computed、v-for 與 v-if 管理服務清單畫面

用元件、props 與 emits 建立清楚的資料流

用 v-model、watch 與生命週期整理 Vue 表單狀態

定義運動器材電商需求、資料模型與驗收矩陣

建立黃色／鐵灰品牌 shell、首頁與商品入口

完成商品目錄、購物車、checkout 與聯絡表單的離線 mock

建立 GAS 商品 GET、訂單 POST 與聯絡 POST 契約

固定 Sheet schema、伺服器權威計價、去重與完整狀態

交付 dist/project/e-commerce production artifact 與本機 smoke