給第一次學前端的你

從第一個網頁開始，做出自己的作品

你不需要先會寫程式。從打開第一個 HTML 檔案開始，逐步完成個人網站、互動功能、資料串接與 TODO Web App。

0先備知識

28章完整教材

28次課堂進度

84小時完成作品

TWO WAYS TO LEARN

選一個符合你現在情境的入口

兩個入口使用同一套課程內容：自學查單章用章節路線；跟著實際上課日期前進，則用每次固定 180 分鐘的課次路線。

28 CHAPTERS

依章節學習

適合自學、補課或查特定能力。每章從主講義理解成果，再進 Starter 完成三項固定任務。

打開 28 章學生地圖

28 MEETINGS

依課次學習

適合跟班上進度。每張課次卡都是 180 分鐘，跨章時會清楚標出本次交棒與下次承接。

打開 28 次課程模式

YOUR PROGRESS

繼續上次進度

進度只保存在這台裝置的瀏覽器。只有你勾選 Evidence、確認固定任務或按下完成按鈕時才會更新；不會因為開過頁面就自動完成。

已完成章數0 / 28

目前創作階段模仿 · 先做得出來

從第 01 章開始

NEW · CREATION PATH

學完不只會照著做，還能自己定義作品

28 章各有一個不重複的創作挑戰，從模仿、改造、遷移走到獨立創作。每章都要做選擇、避免照抄、留下驗收證據；第 13、20、28 章完成創作關卡。

四階段逐步減少答案支援
三層提示，卡住才往下看
第 26–28 章不提供完整解

打開 28 章創作路徑查看挑戰、需求拆解與四級 rubric →

START HERE

第一次來，今天只要做三件事

先知道今天會做出什麼

每一章都會先說明成果，再帶你理解概念，不需要一開始就背一堆術語。

閱讀第 1 章目標 →

從練習檔開始動手

你會拿到一份可以修改的半成品，跟著 TASK 一步一步完成自己的版本。

查看第一份練習檔 →

從 Starter 完成完整練習路線

依 Starter → Checkpoint 1 → Checkpoint 2 前進，先用證據判斷成果；完成自己的版本後，再回主講義驗收。

進入第一份 Starter →

YOUR PROJECT

你會一路做出的成果

第一個個人頁面

把姓名、介紹、圖片與連結放進一個真正能開啟的網頁。

自己的作品集

加入導覽列、Hero、作品卡片、手機版排版與有目的的互動效果。

能讀取資料的網站

讓網站取得 API 或試算表資料，並完成產品列表與聯絡表單。

可展示的 Web App

完成 TODO App、理解登入與權限觀念，最後把作品部署到網路上。

LEARNING ROUTE

作品會從一頁網站，慢慢長成 Web App

不用一次想像 84 小時的全部內容。每一階段只替同一個作品多加一種能力，完成後就會留下可以展示、可以說明的成果。

WHEN YOU GET STUCK

卡住時，照這個順序就好

先看畫面

描述你看見的問題

是整頁空白、某個區塊不見，還是按鈕沒有反應？先把症狀說清楚。

再找證據

一次只檢查一件事

確認檔案、儲存狀態、路徑或瀏覽器訊息，不要一口氣把整份程式碼重寫。

最後核對

從檢查點接回來

先回到本章的中途檢查與答案位置對照，完成後再看完整範例。

DETAILED LESSONS

28 章完整教材

正在跟課程進度時，先從上面的作品路線找目前階段；需要查單章內容時，再從這裡進入。