初級

Web

HTML

Web

HTML

CSS

JavaScript

入門

The Anatomy of Web：網頁的骨架、皮膚、肌肉

從零認識網頁的三大核心：HTML 骨架、CSS 皮膚、JavaScript 肌肉。最後親手打造一個 Linktree 個人連結頁面，學會的每一個概念都用得上。

王

王小明

資深前端工程師，10年開發經驗，專注於 React 生態系

5 小時

33 堂課

4,800 學員

4.9 評分

開始學習

✓ 終身訪問

✓ 互動式編碼練習

✓ 完成證書

課程內容

在 AI 時代的前端學習3 堂

前端是什麼？

認識前端三劍客 HTML、CSS、JavaScript 的分工，透過互動體驗感受三層的威力，學會辨識檔案類型和語法。

互動

20 分鐘

X 光透視：所有網站底層都一樣

用 DevTools 透視 ChatGPT、Google、YouTube、Shopee，看看它們的 HTML、CSS、JavaScript 三層結構。

互動

12 分鐘

你應該學多少前端？

AI 時代不需要從零手寫網頁，但你需要看懂結構、定位問題、精確描述需求。搞清楚哪些該學、哪些讓 AI 做。

互動

8 分鐘

HTML：網頁的骨架6 堂

五大必知標籤圖鑑

互動式標籤圖鑑：點擊卡片看程式碼、呈現效果與延伸知識。介紹 div、h1~h6、p、button、img 五大核心標籤。

互動

8 分鐘

🧩 Nesting 與 <div> 收納盒

修正 Nesting 錯誤，認識 HTML 裡最常見的 <div> 標籤，理解分組與巢狀結構。

互動

8 分鐘

🧪 從零搭建產品頁面骨架

步驟式互動操作，一步步把 SaaS 定價頁從空白建成完整 HTML 頁面。

互動

8 分鐘

Attributes：標籤上的附加說明

屬性就是貼在盒子上的「標籤貼紙」。介紹 class、src、href、placeholder 四大常見屬性，並用拖放挑戰練習。

互動

8 分鐘

🎯 標籤辨識挑戰

三道題 Quiz：HTML→畫面配對、Nesting 除錯、AI 指令撰寫能力測驗。

互動

8 分鐘

語義化標籤：HTML 的說明書

header、nav、main、footer、section 等語義化標籤介紹，它們就是特殊版的 div。

互動

4 分鐘

CSS 全貌：從層疊到動畫7 堂

CSS 基礎：選擇器與視覺設計

認識 CSS 選擇器的運作方式，掌握字體、色彩、排版三大視覺設計基礎。

互動

10 分鐘

Display、Flexbox 與 Grid

block vs inline、Flexbox 一維排列、Grid 二維佈局。學會用 CSS 控制元素的排列方式。

互動

15 分鐘

盒模型與單位系統

Content → Padding → Border → Margin。px、%、em、rem、vw、vh 的差別。

互動

10 分鐘

定位與層疊：Position 與 z-index

static、relative、absolute、fixed、sticky 五種定位模式，搭配 z-index 控制元素的層疊順序。

互動

10 分鐘

進階：變數與媒體查詢

CSS Custom Properties、@media RWD。

互動

10 分鐘

CSS 動畫：Transition 與 Keyframes

transition 屬性、@keyframes animation、timing function、常見動畫模式。

互動

10 分鐘

簡單質感設計

圓角、陰影、漸層、字體選擇、色彩搭配。用最少的 CSS 讓頁面從「能看」變成「好看」。

互動

10 分鐘

實作 ChatGPT 風格的介面18 堂

設定元素的寬度

用 CSS 的 width 屬性控制 ChatGPT 介面中 Logo 和輸入框的大小。

互動

5 分鐘

Inline vs Block 元素

為什麼 h1 和 input 會排在不同行？搞懂 inline 和 block 的差別，用 display: block 控制元素的排列方式。

互動

5 分鐘

Margin Top

用 margin-top 在標題上方加上空間，把 ChatGPT 介面的內容往下推。

互動

5 分鐘

Div 統治世界

認識 <div>：HTML 裡最常用的容器元素。用 div 把標題和輸入框包在一起，統一設定 margin。

互動

5 分鐘

CSS Classes

用 class 屬性區分不同元素，用 .className 選擇器精準控制樣式。

互動

5 分鐘

用 Margin 疊漢堡

用 margin 讓漢堡的每一層食材之間產生間距。麵包、生菜、肉排、起司——每層都要剛好！

互動

8 分鐘

在元素之間加上間距

用 margin-bottom 調整標題和輸入框之間的垂直間距，讓 ChatGPT 介面的排版更舒適。

互動

5 分鐘

用 Margin 置中

margin-left: auto 和 margin-right: auto 的魔法。為什麼它能讓 block 元素水平置中？

互動

5 分鐘

讓內容置中

回到 ChatGPT Clone，用 margin auto 讓標題和輸入框都水平置中。

互動

5 分鐘

Padding 內間距

文字緊貼卡片邊緣看起來很擠！用 padding 讓語錄卡片的內容呼吸一下。

互動

5 分鐘

Border 與 Border-Radius

幫小熊工程師的個人名片加上邊框和圓角，讓它從一張白紙變成一張精緻的卡片。

互動

5 分鐘

挑戰：設計購物車按鈕

幫珍珠奶茶商品卡片設計一個「加入購物車」按鈕。運用 background、color、border、padding、border-radius、font-weight。

互動

8 分鐘

修正搜尋輸入框

用 line-height、padding、border、border-radius 讓輸入框變成 ChatGPT 風格的圓角搜尋框。

互動

5 分鐘

置中按鈕

用 display: block 和 margin: auto 讓按鈕水平置中，再用 margin-top 跟搜尋框保持距離。

互動

5 分鐘

美化按鈕樣式

用 background、border、padding、border-radius、font-size 讓按鈕從預設樣式變成 ChatGPT 風格。

互動

5 分鐘

讓按鈕並排顯示

用 text-align: center 和移除 display: block 讓兩個按鈕並排在同一行，學會 inline 元素的排列方式。

互動

5 分鐘

Flexbox 咖啡廳菜單

用 display: flex 讓咖啡廳的四個品項排成一排，再用 justify-content 均勻分佈。

互動

5 分鐘

用 Flexbox 置中按鈕

用 btn-wrapper 搭配 display: flex 和 justify-content: center 讓兩個按鈕水平置中。

互動

5 分鐘

JavaScript：讓網頁動起來5 堂

沒有 JavaScript 的世界

想像所有網頁都不能點、不能動、不能更新。JavaScript 就是解決這個問題的。

互動

8 分鐘

你的第一行 JavaScript

用一行程式碼改變網頁上的文字。不需要背語法，只要看懂這行在做什麼。

互動

8 分鐘

語言基礎速成

變數、註解、運算子、條件判斷、函式、事件。六大基礎概念一次看完。

互動

15 分鐘

網頁上的資料從哪來？

蝦皮的商品、YouTube 的影片、ChatGPT 的回覆，都不是寫死的。它們是 JavaScript 去「要」來的。

互動

10 分鐘

實戰：圖片切換器與歡迎訊息

用 onclick 做圖片切換、用 prompt + localStorage 做客製化歡迎訊息。

互動

12 分鐘

控制維度：從前端知識到精準 Prompt3 堂

HTML 的控制維度：結構怎麼描述

結構、層級、語意、類型、分組、清單、表單、連結、媒體、屬性。學會用這些維度精確描述你要的頁面。

互動

10 分鐘

CSS 的控制維度：畫面怎麼描述

位置、尺寸、間距、排版、對齊、顯示、可見性、層級、樣式、響應式、狀態。用控制點取代「感覺」。

互動

10 分鐘

JavaScript 的控制維度：行為怎麼描述

事件、時間、狀態、條件、資料、數量、輸入、回饋、持久性、位置。描述系統而不是許願。

互動

10 分鐘

融會貫通：Build Your Own Linktree4 堂

🌱 Linktree 骨架：放上你的名字和大頭照

用 <h1> 和 <img> 兩行 HTML，幫你的 Linktree 放上名字和頭像。最簡單的起步。

互動

3 分鐘

🌱 Linktree 美化：讓名片變好看

加上置中排版、圓形頭像、字體大小。用兩三行 CSS 讓你的 Linktree 從素顏變有型。

互動

3 分鐘

🌱 Linktree 加連結：放上你的社群按鈕

用 <a> 標籤加上幾個社群連結按鈕。你的 Linktree 現在可以真的點擊跳轉了。

互動

3 分鐘

🌱 Linktree Prompt 練習：用精準語言描述你要的改動

用這個模組學到的控制維度，寫一段 Prompt 請 AI 幫你的 Linktree 加上 hover 效果和漸層背景。

互動

3 分鐘