LESSON-01 · 3 個自學主題
建立可預覽、可除錯的前端檔案結構
服務型商家的網站剛開始製作，今天只建立一個可以預覽與除錯的三檔案小專案；圖片素材先不加入，避免把尚未教的路徑問題混在一起。
180 分鐘主課＋依學習成果逐項完成的自主學習
學生實作包 · 28 章
從空資料夾，到可公開分享的服務型商家網站。
每章保留 180 分鐘主課，再依學習成果自主完成 micro Lab、整合 Lab 與驗收證據；進度以能做到什麼為準，不以倒數計時。
28 章主課111 個自學主題Vue 3 CDNCloudflare Pages
28 章練習地圖
Solution 是參考答案；各章卡片可直接進入 examples/supplement/index.html 完成自主學習。
LESSON-02 · 4 個自學主題
用 HTML 語意建立服務型商家首頁骨架
客戶只有一段商家介紹與服務資訊，先用兩個 HTML 檔案建立能閱讀、能前往下一頁的首頁骨架；本堂不加入 CSS、JavaScript 或框架。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-03 · 4 個自學主題
用相對路徑與表單欄位完成多頁網站骨架
商家不只需要首頁，訪客還要能進入服務、關於與聯絡頁並留下需求。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-04 · 4 個自學主題
理解 selector、cascade 與規則套用順序
首頁 HTML 已經有內容，但品牌色、卡片與 CTA 尚未套用；需要精準指定要改哪一類元素。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-05 · 4 個自學主題
用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸
先在 index.html 建立三張服務卡片，再觀察 padding、border 與 width 如何改變實際盒子；最後用 box-sizing 修正 390px 手機畫面的水平溢位。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-06 · 4 個自學主題
完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性
商家已有一張服務卡片，但標題、說明文字、按鈕與狀態提示還沒有一致的閱讀階層；本堂只處理這張卡片的內容呈現，不延伸到多頁、框架或版面排列。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-07 · 4 個自學主題
用 Flexbox 排列導覽列、頁首與服務卡片
品牌樣式已完成，但導覽與服務摘要仍像垂直清單，需要在不同寬度下保持可用排列。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-08 · 4 個自學主題
整合共用容器、Hero、服務摘要與 CTA 成為首頁
單一區塊都已會排版，現在要把它們組成訪客一進站就能理解並採取行動的首頁。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-09 · 4 個自學主題
用 CSS Grid 建立可伸縮的服務型商家版面
首頁服務資訊開始增加，單純 Flexbox 不容易表達主卡片與側邊資訊的二維關係。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-10 · 4 個自學主題
用 Mobile First 與 Media Query 讓服務型網站適應不同寬度
服務商家的訪客可能用手機、平板或桌機進站，固定桌機欄位會讓手機操作困難。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-11 · 4 個自學主題
用 Position 控制元素參考點、捲動行為與前後層級
商家希望在服務頁標出推薦方案，並讓聯絡入口在長頁面中保持可找到。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-12 · 4 個自學主題
用狀態樣式與鍵盤操作讓表單和按鈕可理解
聯絡頁看似完成，但使用鍵盤或填寫錯誤時，訪客不一定知道目前焦點與問題在哪裡。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-13 · 4 個自學主題
用 class、狀態與 transition 做出可驗收的按鈕與服務卡片回饋
服務型網站的 HTML 已經能顯示內容，但按鈕和卡片的狀態切換太突然；本堂只處理 CSS 狀態變化、簡短 animation 與使用者的減少動態偏好。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-14 · 4 個自學主題
用值、型別、變數與函式把服務資訊整理成可顯示的結果
服務型網站需要根據訪客操作顯示一段清楚的服務資訊；本堂先用原生 JavaScript 建立最小的輸入、處理與輸出流程。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-15 · 4 個自學主題
用陣列與物件整理服務資料並產生可用結果
商家不只一項服務，資料若散落在多個變數中，新增方案與篩選都會變得困難。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-16 · 4 個自學主題
用 DOM API 將服務資料安全地渲染到頁面
服務資料已經整理好，現在要讓頁面依資料產生卡片，新增資料時不用手動複製 HTML。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-17 · 4 個自學主題
用事件監聽完成行動版選單與 FAQ 開合
多頁網站在手機上需要可開關導覽，FAQ 也要能讓訪客逐項展開而不重新整理頁面；本堂先用一個入口頁和一個目的頁，讓每個狀態都能在瀏覽器中看見。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-18 · 4 個自學主題
掌握表單驗證、preventDefault 與非同步狀態流程
聯絡表單不能直接刷新頁面消失，訪客需要知道送出中、成功或失敗的結果。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-19 · 4 個自學主題
用 Vue 3 CDN 建立 createApp、setup 與 mount 的最小流程
網站先需要一個可由瀏覽器直接開啟的 Vue 入口；本堂暫時只把靜態服務介紹交給 Vue 渲染，不先處理互動狀態。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-20 · 4 個自學主題
用 ref、computed、v-for 與 v-if 管理服務清單畫面
服務資料需要依搜尋或分類變化，手動操作 DOM 會讓畫面與資料逐漸不同步。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-21 · 4 個自學主題
用元件、props 與 emits 建立清楚的資料流
服務卡片越來越多，若全部寫在同一個 template，修改一張卡片容易影響整個頁面。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-22 · 4 個自學主題
用 v-model、watch 與生命週期整理 Vue 表單狀態
聯絡表單需要同時處理輸入、載入、成功、失敗與重試，狀態若沒有規則會讓按鈕卡住。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-23 · 4 個自學主題
把服務型商家需求整理成可執行的 project brief
在開始寫四頁網站前，先把目標商家、訪客角色、頁面責任、主要任務與驗收證據寫成一份不需要猜測的規劃檔；本堂只做規劃，不連外部服務、不部署。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-24 · 4 個自學主題
建立多頁網站共用外框與首頁入口
規劃已確定四頁，接下來要讓每一頁有一致導覽、品牌標誌、頁尾與首頁主要 CTA。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-25 · 4 個自學主題
用原生 HTML、CSS、JavaScript 完成服務、關於與聯絡三頁
首頁外框已可導航；本堂先把頁面責任、三筆服務資料與離線表單狀態做成可觀察的前端成果。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-26 · 4 個自學主題
讓聯絡表單以明確 payload 串接 Google Apps Script Web App
網站表單已能收集資料，現在需要送到 Apps Script 的 doPost，並用可追蹤的回應更新畫面。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-27 · 4 個自學主題
串起 Google Sheet 寫入與表單完整狀態流程
表單已能呼叫 Apps Script，但商家還需要確認資料真的進到 Sheet，訪客也需要明確結果。
180 分鐘主課＋依學習成果逐項完成的自主學習
LESSON-28 · 4 個自學主題
完成多頁網站的可部署 production 產物與本機 smoke 驗收
功能已完成，本堂整理唯一上傳根目錄並在本機確認四頁路由、CDN、表單與手機鍵盤操作；未取得人工授權前不部署正式站。
180 分鐘主課＋依學習成果逐項完成的自主學習