情境開場
你聽說學會做網頁很有用，但打開 YouTube 搜尋「HTML 教學」，跳出來幾百支影片，每支都從「什麼是 HTML」講起，看 10 分鐘就關掉了。
你也試過直接叫 ChatGPT「幫我做一個個人網頁」，它確實生出了一整頁程式碼。你複製貼上，打開瀏覽器，哇，看起來很讚。但你看不懂那些程式碼在幹嘛，想改一個字的顏色都不知道從哪裡改。
問題不是你不聰明，而是你用錯了方法。AI 不應該是幫你寫程式碼的代工，而是一個隨時可以問問題、會根據你的程度調整解釋方式的私人家教。
這篇教學要帶你用 AI 學 HTML、CSS、JavaScript——不是複製貼上，而是真的理解每一行在做什麼。最後你會做出一個自己寫的個人介紹頁面。
完成後你將能做到
- 看得懂基本的 HTML 結構，知道每個標籤的作用
- 用 CSS 修改網頁的顏色、字型、排版
- 用 JavaScript 做出簡單的互動效果（按鈕點擊、顯示隱藏）
- 知道怎麼用 AI 當學習夥伴：問對問題、驗證答案、避免只會複製
- 做出一個可以放到網路上的個人介紹頁面
你需要準備的東西
- 一台電腦（Windows、Mac 都可以）
- 一個瀏覽器（Chrome、Edge、Firefox 都行）
- 一個文字編輯器（推薦 VS Code，免費下載）
- 一個 AI 工具（ChatGPT、Claude、Gemini 都可以，免費版就夠）
不需要任何程式基礎。
學習地圖
| 步驟 | 內容 | 時間 | 你的產出 |
|---|---|---|---|
| Step 1 | 認識 HTML：網頁的骨架 | 15 分鐘 | 你的第一個 HTML 檔案 |
| Step 2 | 用 AI 搞懂標籤：問對問題 | 15 分鐘 | 一個有標題、段落、圖片、連結的頁面 |
| Step 3 | CSS 入門：讓網頁有樣子 | 20 分鐘 | 套上顏色和排版的頁面 |
| Step 4 | 用 AI Debug：排版壞掉怎麼辦 | 15 分鐘 | 學會描述問題讓 AI 幫你找錯 |
| Step 5 | JavaScript 入門：讓網頁會動 | 20 分鐘 | 一個按鈕能控制的互動效果 |
| Step 6 | 組合技：做一個完整的個人介紹頁 | 30 分鐘 | 可以上線的個人頁面 |
| Step 7 | 驗證：不靠 AI 你還會嗎？ | 15 分鐘 | 獨立完成一個小挑戰 |
總時間約 2 小時。可以一次做完，也可以分幾天做。
Step 1：認識 HTML——網頁的骨架
情境
你打開了一個網頁，按右鍵 →「檢視原始碼」，看到一堆 <div>、<h1>、<p> 的東西。看起來很嚇人，但其實每個都有明確的意義。
你的任務
建立你人生中第一個 HTML 檔案，用瀏覽器打開它。
開始前先想一想
你覺得 HTML 是一種程式語言嗎？
操作內容
- 打開你的文字編輯器（VS Code 或記事本都行）
- 新建一個檔案，存成
my-page.html（注意副檔名是.html，不是.txt） - 在裡面打上這些內容：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>哈囉，世界！</h1>
<p>這是我用 AI 學做的第一個網頁。</p>
</body>
</html>- 存檔，然後用瀏覽器打開這個檔案（直接拖進瀏覽器就行）
你會看到的結果
瀏覽器會顯示一個大標題「哈囉，世界！」和一行文字「這是我用 AI 學做的第一個網頁。」
很簡單，但這就是一個完整的網頁。
請檢查這些地方
- 瀏覽器的分頁標題有沒有顯示「我的第一個網頁」？
- 畫面上有沒有看到你打的文字？
- 如果什麼都沒出現，檢查檔案副檔名是不是真的是
.html
HTML 不是程式語言——它是標記語言。它不做計算，只做一件事：告訴瀏覽器「這段文字是標題、那段是段落、這個是圖片」。
<h1> 是 heading 1（一級標題）。<p> 是 paragraph（段落）。每個標籤都有開始 <h1> 和結束 </h1>，就像括號一樣要配對。
本步驟產出
Step 1 完成確認
Step 2：用 AI 搞懂標籤——問對問題
情境
你已經會用 <h1> 和 <p> 了。但 HTML 有幾十個標籤，不可能一個個背。這時候 AI 就派上用場了——但重點是怎麼問。
你的任務
用 AI 學會 5 個新標籤，然後加到你的頁面裡。
開始前先想一想
如果你直接問 AI「教我 HTML」，你覺得會得到什麼？
操作內容
打開你的 AI 工具，試這個 prompt：
AI 會教你 <img>、<a>、<ul>/<li>、<hr>、<strong> 這些標籤。
學到之後，自己動手把這 5 個標籤加到你的 my-page.html 裡。不要複製 AI 的完整範例——看懂之後，用你自己的內容寫。
例如 AI 教你圖片標籤是 <img src="圖片網址" alt="說明">，你就找一張你喜歡的圖片網址，自己寫 <img src="那個網址" alt="我的照片">。
<img> 忘了 alt 屬性、<a> 忘了 href 屬性。這兩個是初學者最容易忽略的。alt 是圖片的文字說明——當圖片載入失敗時會顯示這段文字，對視障使用者的螢幕閱讀器也很重要。
請檢查這些地方
- 圖片有沒有成功顯示？如果沒有，檢查
src的網址是不是正確 - 連結點下去有沒有跳到你指定的網頁？
- 項目清單有沒有出現圓點？
- 粗體文字有沒有變粗？
注意我們沒有問 AI「教我 HTML」——那太籠統了，AI 會丟一大堆你記不住的東西。我們問的是「我想做 X，要用什麼」。
這個學習策略叫做任務驅動學習：從你想完成的任務出發，只學你現在需要的東西。HTML 有 100 多個標籤，你常用的大概 20 個。先學會那 20 個就夠了。
更完整的 AI 學習策略可以看 用 AI 學程式設計的正確方法。
本步驟產出
Step 2 完成確認
Step 3：CSS 入門——讓網頁有樣子
情境
你的網頁已經有內容了，但看起來很素——白底黑字，沒有排版。CSS（Cascading Style Sheets）就是拿來解決這個問題的：它控制網頁的外觀。
你的任務
替你的網頁加上顏色、字型和基本排版。
開始前先想一想
如果你想把標題變成藍色，你覺得應該改 HTML 還是 CSS？
操作內容
在你的 my-page.html 裡面，找到 <head> 區塊，加入一段 <style>：
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
<style>
body {
font-family: "微軟正黑體", sans-serif;
max-width: 700px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #2563eb;
}
a {
color: #2563eb;
}
img {
max-width: 100%;
border-radius: 8px;
}
</style>
</head>存檔，重新整理瀏覽器。
你會看到的結果
- 整個頁面會置中，不再頂到螢幕左邊
- 背景變成淡灰色
- 標題變成藍色
- 圖片不會超出頁面寬度，而且有圓角
用 AI 學更多 CSS
你可以這樣問 AI：
學到新的 CSS 之後，自己加到 <style> 裡面試試效果。如果效果不對，不要馬上問 AI——先試著改改數字（比如 padding: 20px 改成 padding: 40px），看看哪個屬性控制什麼。
請檢查這些地方
- 頁面有沒有置中？
- 顏色有沒有改變？
- 如果沒效果，檢查 CSS 有沒有放在
<style>標籤裡面 - 檢查每個屬性後面有沒有加分號
;
CSS 的語法很規律：選擇器 { 屬性: 值; }。h1 { color: blue; } 意思就是「所有 h1 標題的顏色是藍色」。
學 CSS 的最佳方式是改數字看效果。不確定 margin 是什麼？把它改成 0 看看差別。不確定 border-radius 做什麼？把它改成 50% 看看（圖片會變成圓形）。
本步驟產出
Step 3 完成確認
Step 4：用 AI Debug——排版壞掉怎麼辦
情境
你想讓兩個區塊並排顯示，但不管怎麼改，兩個區塊就是疊在一起。或者你在手機上打開，排版整個亂掉。
這種「我知道我想要什麼效果，但 CSS 就是不聽話」的狀況，是所有前端工程師的日常。
你的任務
學會怎麼把 CSS 問題描述給 AI，讓它幫你找到問題。
好問法 vs 壞問法
不好的問法
「CSS 壞了幫我修」
好的問法
「我的 div 寬 500px，裡面圖片 800px 超出去了，想讓圖片自動縮小不變形。」
操作內容
故意製造一個問題。在你的 HTML 加入：
<div style="width: 500px; background: #ddd; padding: 20px;">
<img src="你的圖片網址" alt="照片" style="width: 800px;">
<p>這段文字應該在圖片下面。</p>
</div>你會發現圖片超出了外框。現在用 AI 來 debug：
請檢查這些地方
AI 大概會告訴你加 max-width: 100% 和 height: auto。修好之後：
- 圖片是否縮小到 div 寬度以內？
- 圖片有沒有變形（比例有沒有跑掉）？
- 文字有沒有在圖片下面？
重點是你描述問題的方式。好的 debug 問法包含三個元素：
- 現在的狀況：圖片超出 div
- 你想要的結果：圖片自動縮小、不變形
- 相關的程式碼：div 寬度 500px，圖片寬度 800px
如果你只說「CSS 壞了幫我修」，AI 會猜半天。越具體，AI 的回答越準。
Debug 是學程式最重要的技能之一。AI 可以幫你更快找到答案，但你要先學會描述問題。這個能力不管有沒有 AI 都很重要。
本步驟產出
Step 4 完成確認
Step 5：JavaScript 入門——讓網頁會動
情境
你的網頁現在有內容、有設計，但它是「靜態」的——打開就是那個樣子，不會變。JavaScript 可以讓網頁根據使用者的操作做出反應：按按鈕展開內容、切換深色模式、驗證表單。
你的任務
在網頁上加一個按鈕，點下去可以切換顯示和隱藏一段文字。
開始前先想一想
HTML 管結構，CSS 管外觀，JavaScript 管什麼？
操作內容
在你的 my-page.html 的 <body> 裡加入：
<h2>關於我</h2>
<button onclick="toggleBio()">展開 / 收合</button>
<div id="bio" style="display: none; margin-top: 10px; padding: 15px; background: #e8f0fe; border-radius: 8px;">
<p>我是一個正在學做網頁的人。我用 AI 當家教，從零開始學 HTML、CSS 和 JavaScript。</p>
<p>我的目標是做出自己的個人網站。</p>
</div>
<script>
function toggleBio() {
var bio = document.getElementById('bio');
if (bio.style.display === 'none') {
bio.style.display = 'block';
} else {
bio.style.display = 'none';
}
}
</script>存檔、重新整理瀏覽器，然後按按鈕試試看。
你會看到的結果
按「展開 / 收合」按鈕，下面的介紹文字會顯示出來。再按一次，文字消失。
用 AI 理解程式碼
現在不要急著學更多——先確定你理解剛才那段 JavaScript。問 AI：
讀完 AI 的解釋之後，試著自己改這段程式碼：
- 把
'block'改成'flex'，看看有什麼差別 - 再加一個按鈕，控制另一個
<div>的顯示隱藏 - 試著加一行讓按鈕文字跟著改變（「展開」↔「收合」）
第三個比較有挑戰性。如果卡住了，再問 AI——但先自己想 5 分鐘。
請檢查這些地方
- 按鈕按下去有沒有反應？
- 如果沒反應，按 F12 打開開發者工具，看「Console」分頁有沒有紅色的錯誤訊息
- 常見錯誤：
getElementById的 id 跟 HTML 裡的id不一致
innerHTML 放使用者輸入——這是 XSS（跨站腳本攻擊）的常見入口。如果 AI 給你用到 eval() 或 innerHTML，問它有沒有安全風險。在學習階段，你的網頁只在自己電腦上跑，風險不大。但如果要放到網路上，安全就很重要。
JavaScript 最核心的概念只有三個：
- 選取元素：
document.getElementById('id')— 找到 HTML 裡的某個東西 - 讀取/修改屬性：
element.style.display = 'none'— 改變它的狀態 - 事件觸發：
onclick="函式()"— 當使用者做了某件事，執行某段程式碼
你剛才寫的 toggleBio() 同時用到了這三個概念。如果你理解這三個，你就理解了 JavaScript 的骨幹。
本步驟產出
Step 5 完成確認
Step 6：組合技——做一個完整的個人介紹頁
情境
前五步你分別學了 HTML 結構、CSS 樣式、JavaScript 互動。現在把它們組合起來，做一個完整的個人介紹頁面。
你的任務
做一個包含以下內容的個人頁面：
- 你的名字（大標題）
- 一句自我介紹
- 一張照片（可以是任何圖片）
- 「關於我」展開/收合區塊
- 技能清單
- 聯絡方式（email 連結）
- 整體有配色和排版
操作內容
這次不給你完整的程式碼。你要用前五步學到的東西，自己組合。
你可以用 AI 的地方
不確定某個標籤怎麼用 → 問 AI
CSS 排版出問題 → 用 Step 4 學的方法描述問題
想加一個你不知道怎麼做的效果 → 問 AI，但先理解再用
你不應該用 AI 的地方
不要叫 AI「幫我做一個完整的個人介紹頁面」然後整份複製
如果你發現自己在整段複製 AI 的程式碼，停下來，逐行看懂再繼續
卡住的時候
如果完全不知道怎麼開始，可以問 AI：
注意這個 prompt 的關鍵：「不要給我完整程式碼」和「我會自己寫程式碼」。你要的是方向，不是答案。
請檢查這些地方
- 頁面在電腦和手機上都能正常顯示嗎？（用 F12 的裝置模擬器看）
- 連結有沒有正確跳轉？
- 展開/收合有沒有正常運作？
- 圖片有沒有超出頁面？
本步驟產出
Step 6 完成確認
Step 7：驗證——不靠 AI 你還會嗎？
情境
你覺得自己學會了。但怎麼確認是「學會」還是「記得 AI 說了什麼」？
你的任務
在不開 AI 的情況下，完成以下挑戰。
挑戰內容
開一個全新的檔案 challenge.html，不使用 AI，做出以下頁面：
- 一個標題「我的學習紀錄」
- 三個段落，寫你這次學到的三件最重要的事
- 每段用不同的底色
- 一個按鈕，按下去顯示一段隱藏的鼓勵文字
時間限制：20 分鐘。
如果你成功做出來了——不管 CSS 多醜、JavaScript 有沒有 bug——你都已經學會了 HTML、CSS、JavaScript 的基礎。
如果做不出來，回頭看你卡在哪個部分：
- 想不起 HTML 標籤 → 回 Step 2 再練
- CSS 語法忘了 → 回 Step 3 把語法抄一份
- JavaScript 邏輯不清楚 → 回 Step 5 重新看 AI 的解釋
然後再試一次。
「用 AI 寫得出來」跟「自己寫得出來」是兩個完全不同的能力。前者是知道怎麼問，後者是真的理解。
兩種能力都有用。在工作中，用 AI 加速開發完全合理。但如果你連基礎都不懂，AI 給你的程式碼出了 bug，你會完全不知道怎麼修。
先有基礎 → 再用 AI 加速。順序不能反過來。
本步驟產出
Step 7 完成確認
最終挑戰
如果你想更進一步，試試這個：
把你在 Step 6 做的個人介紹頁放到網路上。最簡單的方式是用 GitHub Pages——免費、不需要伺服器。你可以問 AI 「怎麼用 GitHub Pages 部署一個靜態網頁」，跟著步驟做。
當你把你的頁面放到 你的名字.github.io，然後把連結傳給朋友看的那一刻——那就是你從「學 AI」變成「用 AI 做出東西」的轉折點。
你完成的成果
my-page.html：你從零開始學出來的完整個人介紹頁challenge.html：你不靠 AI 獨立完成的驗證頁面- 一套 AI 學習的方法：問對問題 → 理解答案 → 自己寫 → 驗證自己會
重點整理
- AI 是家教，不是代工。問 AI「怎麼做」，不是叫 AI「幫我做」。
- 任務驅動學習。不要從「HTML 有哪些標籤」學起，從「我想在網頁上放一張圖片」學起。
- 先動手改數字。CSS 不確定某個屬性做什麼？改數字看效果，比讀 10 分鐘文件更快。
- 三要素 Debug 法。跟 AI 描述問題時說清楚：現況、期望、相關程式碼。
- 用 AI 之前先想 5 分鐘。卡住的時候不要馬上問 AI，先自己想。想不出來再問。
- 定期關掉 AI 驗證。確認是「學會」還是「記得 AI 怎麼說」。
延伸練習
- 讀 用 AI 學程式設計的正確方法，學更完整的 AI 學習策略
- 試試 什麼是 Vibe Coding——用 AI 快速做出原型的開發方式
- 學會基礎後，用 AI 學 Flexbox 和 Grid（CSS 排版的兩大技術）
- 試著用 AI 學 JavaScript 的 DOM 操作和事件監聽