LESSON-01
開發環境設置
開發環境設置
學生實作包 · 28 堂
從空資料夾，到可公開分享的服務型商家網站。
每堂課都有一個明確練習焦點。先看具體例子，再從 Starter 動手，最後用 Checkpoint 與 Solution 完成自我驗收。
3 小時／堂
多頁面網站
Vue 3 CDN
Cloudflare Pages
28 堂練習地圖
每堂的 Solution 是參考答案；請先完成自己的版本，再使用複製按鈕。
LESSON-02
HTML 基礎：首頁骨架
首頁骨架
LESSON-03
HTML 基礎：多頁面與聯絡表單
多頁面與聯絡表單
LESSON-04
CSS 基礎：選擇器與 Cascade
選擇器與 Cascade
LESSON-05
CSS 基礎：盒模型與間距
盒模型與間距
LESSON-06
CSS 基礎：字型、顏色與背景
字型、顏色與背景
LESSON-07
CSS 基礎：Flexbox
Flexbox
LESSON-08
CSS 基礎：首頁整合
首頁整合
LESSON-09
CSS 進階：Grid 服務型商家版面骨架
Grid 服務型商家版面骨架
LESSON-10
CSS 進階：Mobile First 與 Media Query
Mobile First 與 Media Query
LESSON-11
CSS 進階：Position、Sticky 與堆疊
Position、Sticky 與堆疊
LESSON-12
CSS 進階：狀態、表單與鍵盤操作
狀態、表單與鍵盤操作
LESSON-13
CSS 進階：Transition、動畫與樣式整理
Transition、動畫與樣式整理
LESSON-14
JavaScript 基礎語法
JavaScript 基礎語法
LESSON-15
JavaScript 基礎：陣列、物件與資料整理
陣列、物件與資料整理
LESSON-16
JavaScript 基礎：DOM 與動態渲染
DOM 與動態渲染
LESSON-17
JavaScript 基礎：事件、行動版選單與 FAQ
事件、行動版選單與 FAQ
LESSON-18
JavaScript 基礎：表單驗證與非同步概念
表單驗證與非同步概念
LESSON-19
Vue 3 CDN：createApp、setup、mount
createApp、setup、mount
LESSON-20
Vue 3 CDN：響應式與條件／清單渲染
響應式與條件／清單渲染
LESSON-21
Vue 3 基礎：元件、props 與 emits
元件、props 與 emits
LESSON-22
Vue 3 基礎：表單、watch 與狀態流程
表單、watch 與狀態流程
LESSON-23
專案規劃與設計
專案規劃與設計
LESSON-24
頁面開發：首頁與共用網站外框
藍圖已經完成，今天開始施工：先把每個頁面都需要的外框固定，再完成首頁第一印象。
LESSON-25
頁面開發：服務、關於與聯絡頁
首頁已經能讓人知道商家是誰，接下來要讓訪客看懂服務、建立信任，最後找到聯絡方式。
LESSON-26
功能實作：聯絡表單與 Apps Script Web App
聯絡表單現在只在瀏覽器裡驗證，今天建立第一條真正的資料管線：前端送出，Apps Script 接收。
LESSON-27
功能實作：Google Sheet 與完整狀態流程
表單已能找到後台入口，今天讓資料真正留下紀錄，並把等待與異常處理成使用者看得懂的畫面。
LESSON-28
優化與部署：Cloudflare Pages 上線
網站功能完成不代表可以交付；今天像上山前做最後裝備檢查，確認訪客、鍵盤、搜尋引擎與公開網址都能走完流程。