CodePen 是什麼？
CodePen 是一個線上前端程式碼編輯器，可以即時撰寫與預覽 HTML、CSS、JavaScript 程式碼，適合練習、展示作品、或測試功能。無需安裝環境，只要打開瀏覽器就能開始寫程式！👉 官方網站：https://codepen.io
為什麼要用 CodePen？
- 免安裝，開啟即用
- 即時預覽畫面，方便 Debug
- 分享方便，只需一個連結
- 適合展示前端作品集
- 有大量範例可參考
CodePen 操作教學
1️⃣ 建立一個 Pen
- 登入 CodePen（可用 GitHub 或 Google 帳號）
- 可以開始寫程式囉 ! -> 新增「Pen」 的方式有以下兩種 :
編輯區會分為三塊：
- HTML 區：撰寫 HTML 結構
- CSS 區：撰寫樣式
- JS 區：撰寫互動邏輯（JavaScript）
2️⃣ 即時預覽功能
- 每輸入一行程式碼，「Preview」區域會即時更新結果
- 若不想即時預覽，也可在右上角點選「Settings」關閉 Auto-Update
3️⃣ 設定外部資源（像是 Bootstrap、jQuery）
- 點右上角的「Settings」
- 分別在 HTML/CSS/JS 頁籤中加入 CDN 連結（例如 jQuery 或 Font Awesome）
4️⃣ 儲存與分享
- 點右上方「Save」儲存
- 可取得唯一連結，例如：
https://codepen.io/你的帳號/pen/xxxxxx - 可直接嵌入部落格、Notion、或簡報中！
