前端工具 on EricChung的程式勇者村

json-server 是什麼？前端開發很常用的假 API 工具介紹

Sat, 23 May 2026 20:05:00 +0800

前端開發最常遇到的問題之一，就是畫面想先做，但 API 還沒完成。這時候，如果還要自己手刻一個後端，只是為了讓前端有資料可以串，通常很浪費時間。json-server 就是在解決這個問題。

json-server 的 npm 頁面介紹的是一個非常實用的工具：你只要準備一份 JSON 資料，它就能快速幫你產生一組可用的 REST API。對前端工程師來說，這代表你不用等後端，也能先把列表、表單、編輯、刪除這些功能做起來。

這個網站在做什麼？

這個網站其實是 npm 上的套件介紹頁。它的用途不是單純下載，而是讓開發者快速了解：

這個套件是做什麼的
要怎麼安裝
怎麼啟動
支援哪些功能
套件目前版本和使用狀況

以 json-server 這頁來看，頁面上可以直接看到安裝指令：

1

npm i json-server

也可以看到最基本的啟動方式：

1

npx json-server db.json

這兩個資訊就已經很夠你快速上手。

json-server 的核心功能是什麼？

它最核心的功能，就是把一個 JSON 檔案變成一組 REST API。

例如你有一個 db.json：

1
2
3
4
5
6


{
 "posts": [
 { "id": 1, "title": "Hello" },
 { "id": 2, "title": "World" }
 ]
}

啟動 json-server 後，就可以得到類似下面的 API：

1
2
3
4
5
6


GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

這代表什麼？代表你前端原本需要後端才能做的 CRUD 流程，現在可以先自己模擬出來。

為什麼前端工程師會常用它？

原因很實際，因為它真的省時間。

第一，它可以讓前端先開發，不用卡在「API 還沒好」。第二，它很適合做 demo、作品集、教學範例。第三，它能讓你提早驗證資料格式和畫面流程。第四，它的使用門檻低，不需要先寫很多後端程式。

如果你是 React 開發者，這種工具特別方便，因為你可以直接拿 fetch 或 axios 去串它，流程和串正式 API 很接近。

這個 npm 頁面還透露哪些資訊？

根據我查看頁面時的內容，截至 2026-05-23，可以看到幾個重點：

版本是 1.0.0-beta.15
每週下載量約 332,131
License 是 MIT
GitHub repository 是 typicode/json-server
有 412 個 dependents
累積 165 個版本

這些資訊代表它不是冷門工具，而是真的有不少開發者在使用。不過也要注意，頁面顯示的版本仍然是 beta，如果你要放進正式團隊開發流程，最好先確認版本相容性和使用情境。

它適合用在哪些情境？

json-server 很適合這幾種情況：

前端畫面先做，但後端還沒完成
想快速做一個假資料 API
想練習 CRUD 串接
要做作品集或 demo
教學時想快速展示 API 行為

但它比較不適合拿來當真正的正式後端。因為它的主要目的是開發輔助，不是完整商業系統的後端解法。

總結

如果你把 json-server 想成「前端開發時的假後端工具」，這個理解基本上就是對的。它最大的價值不是功能多複雜，而是可以讓你非常快地把資料流跑起來。對前端來說，這件事很重要，因為很多畫面問題、互動問題、狀態管理問題，都要真的有 API 可以串時才會看得清楚。

所以，如果你常常碰到「前端要先做，但 API 還沒來」這種情況，那 json-server 是非常值得認識的一個工具。

新手第七步：SCSS 入門　寫 CSS 終於不再複製貼上了！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這樣的情況：網站的主題色是 #3498db，結果整份 CSS 裡出現了四十幾次。有一天設計師說「主題色改一下」，你只能一個一個找、一個一個改，改到懷疑人生。

SCSS 就是來解決這個問題的！

1. SCSS 是什麼？

SCSS 是 CSS 的超集合（Superset），意思是：所有合法的 CSS 都是合法的 SCSS。你可以直接把 .css 檔案改名成 .scss，它還是能正常運作。

SCSS 在 CSS 的基礎上加入了：

變數 — 統一管理顏色、字體大小等重複值
巢狀（Nesting） — 讓選擇器的階層結構更清晰
Mixin — 可重複使用的樣式片段（類似函式）
繼承（Extend） — 讓選擇器共用樣式

瀏覽器看不懂 SCSS，所以寫完後需要編譯成普通的 CSS 才能使用。

2. 安裝 SCSS 編譯工具

最簡單的方式是在 VS Code 安裝 Live Sass Compiler 外掛：

打開 VS Code 的擴充功能
搜尋 Live Sass Compiler
安裝後，點擊右下角的 「Watch Sass」 按鈕
它會自動監聽你的 .scss 檔案，存檔時立刻編譯成 .css

3. 變數：統一管理設計規格

這是 SCSS 最受歡迎的功能，沒有之一。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 在檔案最上方定義設計規格
$primary-color: #3498db;
$secondary-color: #2c3e50;
$font-size-base: 16px;
$border-radius: 8px;

// 之後到處使用變數
.button {
 background-color: $primary-color;
 border-radius: $border-radius;
 font-size: $font-size-base;
}

.navbar {
 background-color: $secondary-color;
}

現在要改主題色，只需要改最上面那一行 $primary-color，全站自動更新。

4. 巢狀：讓選擇器更有層次感

原生 CSS 的選擇器寫起來又臭又長：

1
2
3
4
5


/* 原生 CSS */
.navbar { background: #333; }
.navbar a { color: white; }
.navbar a:hover { color: #3498db; }
.navbar .logo { font-size: 20px; }

SCSS 可以寫成巢狀結構，一眼看出階層關係：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// SCSS
.navbar {
 background: #333;

 a {
 color: white;

 &:hover { // & 代表父選擇器（這裡是 a）
 color: $primary-color;
 }
 }

 .logo {
 font-size: 20px;
 }
}

& 符號代表當前的父選擇器，&:hover 就等於 .navbar a:hover。

5. Mixin：可重複使用的樣式積木

當你有一段樣式需要在多個地方使用，就把它做成 Mixin：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


// 定義一個 Mixin（像是定義函式）
@mixin flex-center {
 display: flex;
 justify-content: center;
 align-items: center;
}

// 帶參數的 Mixin
@mixin card($shadow: 0 2px 8px rgba(0,0,0,0.1)) {
 border-radius: 8px;
 padding: 20px;
 background: white;
 box-shadow: $shadow;
}

// 使用 Mixin
.hero-section {
 @include flex-center;
 height: 100vh;
}

.product-card {
 @include card;
}

.featured-card {
 @include card(0 8px 24px rgba(0,0,0,0.2)); // 自訂陰影
}

6. `@use` 與模組化：把 SCSS 拆成多個檔案

專案大了之後，一個 SCSS 檔案裝不下所有樣式。用 @use 可以把樣式拆成多個檔案管理：

1
2
3
4
5
6


styles/
├── _variables.scss // 變數
├── _mixins.scss // Mixin
├── _navbar.scss // 導覽列樣式
├── _buttons.scss // 按鈕樣式
└── main.scss // 主檔案，在這裡引入所有模組

1
2
3
4
5


// main.scss
@use 'variables';
@use 'mixins';
@use 'navbar';
@use 'buttons';

以底線 _ 開頭的檔案叫做 Partial（片段），表示這個檔案不會單獨編譯，只會被引入到其他地方使用。

7. 給新手的實戰練習

把之前寫的 CSS 改成 SCSS，感受一下整理後的清爽感：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


// _variables.scss
$primary: #3498db;
$dark: #2c3e50;
$light-bg: #f5f5f5;
$radius: 8px;

// main.scss
@use 'variables' as v;

body {
 background-color: v.$light-bg;
 font-family: Arial, sans-serif;
 padding: 40px;
}

#main-title {
 color: v.$dark;
 text-align: center;
 border-bottom: 3px solid v.$primary;
 padding-bottom: 10px;

 &:hover {
 color: v.$primary;
 }
}

.btn {
 background-color: v.$primary;
 border: none;
 border-radius: v.$radius;
 color: white;
 padding: 10px 24px;
 cursor: pointer;

 &:hover {
 opacity: 0.85;
 }
}

結語：CSS 也可以很工程化

SCSS 不是什麼高深的技術，它就是讓你寫 CSS 的方式更有組織、更好維護。對於任何需要長期維護的專案，SCSS（或類似的 CSS 預處理器）幾乎是標配。

接下來你可以做什麼？ 下一篇我們來看 Bootstrap 5——一個現成的 CSS 框架，內建幾百個元件，讓你不用從零開始，直接組出專業的版面！

準備好「偷懶」式開發了嗎？下一篇見！

新手第九步：Tailwind CSS 入門　用 class 直接堆出你要的樣式！

Fri, 17 Apr 2026 00:00:00 +0000

學完 Bootstrap，你已經體驗過 CSS 框架的威力。但 Bootstrap 有一個隱藏的痛點：所有用 Bootstrap 做的網站看起來都長得差不多。

Tailwind CSS 採用了完全不同的思路——它不給你預設好的元件，而是給你幾百個「工具類別」，讓你像積木一樣自由組合出任何你想要的樣式。

1. Tailwind 和 Bootstrap 的哲學差異

	Bootstrap	Tailwind CSS
思路	給你做好的元件，直接用	給你工具類別，自己組合
客製化程度	中（需要覆寫樣式）	高（完全自由）
HTML 可讀性	較乾淨	class 比較多
學習曲線	較平緩	需要記 class 名稱
設計一致性	容易長得一樣	每個網站可以完全不同

兩個都是好工具，端看你的需求選擇。

2. 快速上手：用 CDN 體驗 Tailwind

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!DOCTYPE html>
<html>
<head>
 <title>Tailwind 練習</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

 <h1 class="text-3xl font-bold text-blue-600 text-center mb-4">
 你好，Tailwind！
 </h1>

 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 點我
 </button>

</body>
</html>

注意：CDN 方式適合學習和原型開發，正式專案建議用 npm 安裝以獲得完整功能（後面的 Vite 篇會介紹）。

3. Tailwind 的命名邏輯

Tailwind 的 class 名稱設計得非常直覺，只要懂幾個規律就能舉一反三：

間距（Spacing）

1
2
3
4
5
6
7


<!-- p = padding, m = margin -->
<!-- t=top, b=bottom, l=left, r=right, x=左右, y=上下 -->
<!-- 數字 0,1,2,3,4,5,6,8,10,12,16,20... 代表大小（1 = 4px） -->

<div class="p-4">內距 16px</div>
<div class="mt-8">上方外距 32px</div>
<div class="px-6 py-3">左右內距 24px，上下內距 12px</div>

顏色（Colors）

1
2
3
4
5
6


<!-- 顏色名稱-深淺（100最淺，900最深） -->
<div class="bg-blue-500 text-white">藍底白字</div>
<div class="bg-gray-100 text-gray-800">淺灰底深灰字</div>
<div class="text-red-600">紅色文字</div>

<!-- Tailwind 內建顏色：slate, gray, zinc, red, orange, yellow, green, blue, purple, pink... -->

字體（Typography）

1
2
3
4
5


<p class="text-sm">小字（14px）</p>
<p class="text-base">預設大小（16px）</p>
<p class="text-xl">大字（20px）</p>
<p class="text-4xl font-bold">超大粗體（36px）</p>
<p class="text-center italic text-gray-500">置中斜體灰色</p>

彈性布局（Flexbox）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div class="flex justify-between items-center">
 <span>左</span>
 <span>右</span>
</div>

<div class="flex flex-col gap-4">
 <div>垂直</div>
 <div>排列</div>
 <div>有間距</div>
</div>

響應式（Responsive）

1
2
3
4
5
6
7
8


<!-- 斷點前綴：sm: md: lg: xl: 2xl: -->
<div class="text-sm md:text-base lg:text-lg">
 手機小字、平板中字、桌機大字
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- 手機單欄，平板雙欄，桌機三欄 -->
</div>

互動狀態

1
2
3
4


<!-- hover:、focus:、active: 前綴 -->
<button class="bg-blue-500 hover:bg-blue-700 active:scale-95 transition-all">
 有互動效果的按鈕
</button>

4. 常用的元件範例

按鈕

1
2
3
4
5
6
7
8
9


<!-- 主要按鈕 -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-5 rounded-lg transition-colors">
 主要操作
</button>

<!-- 外框按鈕 -->
<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-2 px-5 rounded-lg transition-all">
 次要操作
</button>

卡片

1
2
3
4
5
6
7
8


<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
 <img class="w-full h-48 object-cover" src="圖片網址" alt="...">
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">卡片標題</h3>
 <p class="text-gray-600 mb-4">卡片描述文字</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline">閱讀更多 →</a>
 </div>
</div>

5. 給新手的實戰練習：用 Tailwind 重做作品集

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>我的作品集</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 font-sans">

 <!-- 導覽列 -->
 <nav class="bg-gray-900 text-white px-8 py-4 flex justify-between items-center">
 <span class="text-xl font-bold">Eric's Portfolio</span>
 <div class="flex gap-6 text-gray-300">
 <a href="#" class="hover:text-white transition-colors">首頁</a>
 <a href="#" class="hover:text-white transition-colors">作品</a>
 <a href="#" class="hover:text-white transition-colors">聯絡</a>
 </div>
 </nav>

 <!-- Hero -->
 <div class="bg-blue-600 text-white text-center py-24 px-4">
 <h1 class="text-5xl font-bold mb-4">你好，我是前端新手</h1>
 <p class="text-xl text-blue-200 mb-8">正在努力學習 HTML、CSS 和 JavaScript</p>
 <a href="#" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-blue-50 transition-colors">
 查看我的作品
 </a>
 </div>

 <!-- 作品卡片 -->
 <div class="max-w-5xl mx-auto py-16 px-4">
 <h2 class="text-3xl font-bold text-center text-gray-800 mb-10">我的作品</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">計數器 App</h3>
 <p class="text-gray-500 mb-4">用原生 JavaScript 做的互動計數器。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">個人介紹頁</h3>
 <p class="text-gray-500 mb-4">用 HTML + CSS Flexbox 做的靜態介紹頁。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 <div class="bg-white rounded-xl p-6 shadow hover:shadow-md transition-shadow">
 <h3 class="text-lg font-bold text-gray-800 mb-2">Vue 練習</h3>
 <p class="text-gray-500 mb-4">用 Vue.js 做的響應式互動頁面。</p>
 <a href="#" class="text-blue-600 font-semibold hover:underline text-sm">查看作品 →</a>
 </div>
 </div>
 </div>

</body>
</html>

同樣的頁面，Tailwind 版和 Bootstrap 版的結果看起來截然不同，因為每個樣式都是你自己決定的。

結語：Tailwind 讓設計真的是你的設計

Tailwind CSS 的學習曲線稍高——前幾天你會一直在查 class 名稱。但一旦熟悉了，你會發現自己從「設計稿到程式碼」的速度快了很多，而且不用擔心和別人的網站「撞臉」。

接下來你可以做什麼？ 現在我們用的都是 CDN 引入，沒有辦法用到 Tailwind 的 JIT 模式或 SCSS 的完整功能。下一篇要學 Vite——現代前端的建置工具，讓你的開發環境真正「工程化」起來！

準備好打造專業開發環境了嗎？下一篇見！

新手第八步：Bootstrap 5 入門　不會設計也能做出專業版面！

Fri, 17 Apr 2026 00:00:00 +0000

每次做新專案，是不是又要從頭寫按鈕樣式、導覽列、卡片？Bootstrap 5 就是解決這個痛點的神器——它把最常用的 UI 元件全部做好了，你只要加幾個 class 名稱就能直接用。

1. Bootstrap 5 是什麼？

Bootstrap 是 Twitter 工程師開發的 CSS 框架，目前已發展到第 5 版，是全球使用量最大的 CSS 框架之一。

它幫你做好了：

Grid 格線系統：12 欄式的響應式排版
元件庫：按鈕、卡片、導覽列、Modal、輪播圖……數十種現成元件
工具類別（Utilities）：快速調整間距、顏色、對齊的 class
響應式設計：自動在手機、平板、電腦上顯示不同版面

2. 引入 Bootstrap 5：一行搞定

最快的方式是用 CDN，不需要安裝任何東西：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 練習</title>
 <!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

 <!-- 你的內容 -->

 <!-- Bootstrap JS（某些元件需要） -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

就這樣！引入之後，你的 HTML 裡只要加上 Bootstrap 定義好的 class 名稱，樣式就自動套上。

3. Grid 格線系統：響應式排版的核心

Bootstrap 把頁面分成 12 欄，你指定每個元素要佔幾欄：

1
2
3
4
5
6


<div class="container">
 <div class="row">
 <div class="col-6">左半部（佔 6/12）</div>
 <div class="col-6">右半部（佔 6/12）</div>
 </div>
</div>

響應式斷點：

class	裝置	螢幕寬度
`col-`	全部裝置	所有寬度
`col-sm-`	手機（橫放）	≥ 576px
`col-md-`	平板	≥ 768px
`col-lg-`	桌機	≥ 992px
`col-xl-`	大螢幕	≥ 1200px

實用範例：手機單欄、平板雙欄、桌機三欄

1
2
3
4
5
6
7


<div class="container">
 <div class="row">
 <div class="col-12 col-md-6 col-lg-4">卡片一</div>
 <div class="col-12 col-md-6 col-lg-4">卡片二</div>
 <div class="col-12 col-md-6 col-lg-4">卡片三</div>
 </div>
</div>

4. 最常用的元件

按鈕

1
2
3
4
5


<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-danger">危險操作</button>
<button class="btn btn-outline-primary">外框按鈕</button>
<button class="btn btn-lg btn-success">大按鈕</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
 <a class="navbar-brand" href="#">我的網站</a>
 <button class="navbar-toggler" type="button"
 data-bs-toggle="collapse" data-bs-target="#navMenu">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navMenu">
 <ul class="navbar-nav ms-auto">
 <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
 <li class="nav-item"><a class="nav-link" href="#">關於</a></li>
 <li class="nav-item"><a class="nav-link" href="#">聯絡</a></li>
 </ul>
 </div>
 </div>
</nav>

這段 HTML 就能做出完整的響應式導覽列，手機上會自動折疊成漢堡選單。

卡片（Card）

1
2
3
4
5
6
7
8


<div class="card" style="width: 18rem;">
 <img src="https://via.placeholder.com/280x160" class="card-img-top" alt="...">
 <div class="card-body">
 <h5 class="card-title">卡片標題</h5>
 <p class="card-text">卡片描述文字，可以放任何你想說的內容。</p>
 <a href="#" class="btn btn-primary">了解更多</a>
 </div>
</div>

5. 工具類別（Utilities）：快速調整樣式

Bootstrap 5 的另一個強項是「工具類別」，不用寫 CSS 就能調整樣式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!-- 間距 -->
<div class="mt-3">上方外距 3 單位</div>
<div class="px-4">左右內距 4 單位</div>
<div class="mb-0">下方外距 0</div>

<!-- 文字 -->
<p class="text-center">置中文字</p>
<p class="text-primary fw-bold">藍色粗體</p>
<p class="fs-4">4 號字體大小</p>

<!-- 背景與顏色 -->
<div class="bg-dark text-white p-3">深色背景白色文字</div>

<!-- Flexbox -->
<div class="d-flex justify-content-between align-items-center">
 <span>左邊</span>
 <span>右邊</span>
</div>

間距規則：m=margin，p=padding；t=top，b=bottom，s=start(left)，e=end(right)，x=左右，y=上下；數字 0~5 代表大小。

6. 給新手的實戰練習：做一個個人作品集頁面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>我的作品集</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

 <!-- 導覽列 -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
 <a class="navbar-brand fw-bold" href="#">Eric's Portfolio</a>
 </div>
 </nav>

 <!-- Hero 區塊 -->
 <div class="bg-primary text-white text-center py-5">
 <h1 class="display-4 fw-bold">你好，我是前端新手</h1>
 <p class="lead">正在努力學習 HTML、CSS 和 JavaScript</p>
 <a href="#" class="btn btn-light btn-lg mt-3">查看我的作品</a>
 </div>

 <!-- 作品卡片 -->
 <div class="container py-5">
 <h2 class="text-center mb-4">我的作品</h2>
 <div class="row g-4">
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">計數器 App</h5>
 <p class="card-text">用原生 JavaScript 做的互動計數器。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">個人介紹頁</h5>
 <p class="card-text">用 HTML + CSS Flexbox 做的靜態介紹頁。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 <div class="col-12 col-md-4">
 <div class="card h-100 shadow-sm">
 <div class="card-body">
 <h5 class="card-title">Vue 練習</h5>
 <p class="card-text">用 Vue.js 做的響應式互動頁面。</p>
 <a href="#" class="btn btn-outline-primary">查看作品</a>
 </div>
 </div>
 </div>
 </div>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這個頁面有導覽列、Hero 區塊、三欄卡片，在手機上自動變成單欄——全部不到 60 行 HTML。

結語：框架讓你站在巨人的肩膀上

Bootstrap 5 不是讓你「偷懶」的工具，而是讓你把時間花在更有價值的地方——功能邏輯、使用者體驗、創意設計，而不是重複造輪子。

接下來你可以做什麼？ Bootstrap 雖好，但有時候你會想要更精細地控制每一個樣式，而不是被框架的設計限制住。下一篇我們來看 Tailwind CSS——一個完全不同的思路，讓你在 HTML 裡直接組合樣式，彈性超高！

準備好看看 CSS 框架的另一種哲學嗎？下一篇見！

新手第十七步：Figma 入門　前端工程師一定會碰到的設計工具

Fri, 17 Apr 2026 00:00:00 +0000

很多新手以為 Figma 是設計師才需要學的工具，但其實不是。

只要你是前端工程師，你很快就會碰到這些情況：

設計師丟一個 Figma 連結給你
你要量按鈕尺寸、看字體大小、抓顏色碼
你要確認某個區塊在手機版怎麼排
你要看 hover 狀態、元件變體、間距規則

也就是說，你不一定要用 Figma 畫設計稿，但你幾乎一定要會看 Figma。

1. Figma 是什麼？

Figma 是一個雲端 UI / UX 設計工具。

設計師可以用它來做：

網站設計稿
App 畫面
元件庫
Prototype（互動原型）
團隊設計協作

而前端工程師最常用它來：

看設計稿
量尺寸
查顏色
看字體
確認元件狀態

你可以把 Figma 想成：

設計稿版的 Google Docs。

它強的地方不是只有畫圖，而是多人協作、雲端同步、分享方便。

2. 為什麼前端工程師要會 Figma？

因為現在大部分公司，設計交付幾乎都在 Figma 上完成。

以前可能是 PSD、Sketch、Zeplin，現在很多團隊直接用 Figma 一條龍處理。

如果你不會看 Figma，常常會出現這些問題：

切版尺寸抓錯
間距亂掉
字重看錯
顏色用錯
手機版和桌機版搞混

所以學 Figma 對前端來說，不是為了變設計師，而是為了：

把設計稿正確地做成畫面。

3. Figma 裡最常見的幾個概念

剛打開 Figma 時，新手很容易被一堆面板嚇到。其實你先懂下面幾個概念就夠了。

Frame

Frame 可以理解成一個畫板，通常代表：

一個頁面
一個區塊
一個手機畫面
一個桌機版面

你可以把它想成設計稿裡的主要容器。

Layer

每一個文字、按鈕、圖片、背景區塊，都是一個 layer。
這和你在前端裡看到的 DOM 結構有點像。

Component

設計師會把常用的按鈕、卡片、輸入框做成 Component。
這跟你在 React 或 Vue 裡寫元件的概念很像。

Auto Layout

這是 Figma 很重要的功能。
它讓元件在排列時會自動維持：

間距
對齊
內距

你可以把它想成設計稿版本的 flex。

4. 前端工程師最常怎麼用 Figma？

這一段最實際。

前端在 Figma 裡最常做的事通常不是「設計」，而是「讀設計稿」。

例如：

看容器寬度是 1200px 還是 1280px
看按鈕高度是多少
看字體大小是 16px 還是 18px
看顏色是 #2563EB 還是 #1D4ED8
看元素和元素之間的間距
看元件有沒有 hover / active / disabled 狀態

所以你不需要一開始就學會做很完整的 UI 設計，
但你一定要先學會怎麼「看懂」設計稿。

5. 用 Figma 看設計稿時，前端最該注意什麼？

很多新手只看畫面長相，卻沒注意真正會影響切版的細節。

你至少要看這幾個地方：

1. 字體

字型名稱
字體大小
字重
行高

2. 顏色

文字色
背景色
邊框色
hover 狀態色

3. 間距

padding
margin
元素和元素之間的 gap

4. 響應式版本

桌機版
平板版
手機版

5. 元件狀態

default
hover
active
disabled

這些東西如果一開始沒看清楚，後面切版常常會一直返工。

6. Figma 和前端開發的關係

這裡有一個觀念很重要：

Figma 不是程式碼，但它會直接影響你的程式碼。

因為你最後寫的 HTML、CSS、React component，很多細節都來自設計稿。

例如設計師在 Figma 裡做一個按鈕元件，前端可能就會對應做出：

Button component
size variant
color variant
disabled state

所以當你越懂 Figma，你在實作 UI 時就越容易抓到真正的結構，而不是只照著畫面硬刻。

7. Figma 和 CodePen 有什麼不同？

這兩個工具常常一起出現，但它們做的事完全不同。

Figma

偏設計
用來畫介面、看設計稿、做 prototype
重點是視覺和版面規劃

CodePen

偏實作
用來寫 HTML / CSS / JavaScript
重點是把想法快速做成真的畫面

你可以這樣記：

Figma 是先看設計
CodePen 是再動手做

兩者不是競爭關係，而是前後流程。

8. 給新手的學習建議

如果你是前端新手，我建議你先學會這些基本操作：

開啟 Figma 檔案
找到頁面和 Frame
看文字大小、顏色、間距
知道怎麼看 component 和 variant
知道桌機版和手機版切換在哪裡

你不一定要一開始就去研究很深的設計系統，
但至少要先讓自己能夠順利地「從設計稿走到切版」。

結語：前端不只是在寫程式，也是在讀設計

很多人以為前端工程師的工作只是把功能做出來，但其實不是。
前端很大一部分工作，是把設計師的想法正確地轉成可以互動的介面。

而 Figma，就是現在這個流程裡非常核心的工具。

你不需要先成為設計師，才開始學 Figma。
你只需要先學會一件事：

怎麼用它看懂設計稿。

這件事一旦打通，你的切版效率會高很多，和設計師溝通也會順很多。

接下來你可以做什麼？
如果你願意，下一篇我們可以接著寫 前端工程師怎麼看設計稿切版，把 Figma 裡的尺寸、字體、顏色、間距，真正對應到 HTML 和 CSS 的實作思路。

準備好把設計稿變成真正的網頁了嗎？下一篇見！

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這種情況：

只是想測一個按鈕 hover 效果，結果卻要先：

建資料夾
開 VS Code
建 index.html
建 style.css
建 script.js
再開 Live Server

明明只是想試 10 行程式，卻先花了 5 分鐘準備環境。

這時候，CodePen 就非常好用。

1. CodePen 是什麼？

CodePen 是一個線上前端編輯器，你可以直接在瀏覽器裡寫：

HTML
CSS
JavaScript

而且它會立刻幫你把結果顯示出來。

你可以把它想成：

前端版的線上遊樂場。

不用安裝、不用建專案、不用設定環境，只要打開網站就能開始寫。

2. CodePen 能做什麼？

很多新手以為 CodePen 只是「拿來玩玩看」的網站，其實它很好用。

你可以拿它來：

練習 HTML / CSS / JavaScript
測試一小段 UI 效果
做按鈕、卡片、導覽列等小元件
分享作品給別人看
收藏別人的範例，學習寫法

尤其是學前端初期，你常常不是要做整個網站，而是想先試一個小功能。
這時候 CodePen 比開一個完整專案快非常多。

3. CodePen 的畫面怎麼看？

CodePen 最常見的畫面分成四塊：

HTML 區：放結構
CSS 區：放樣式
JavaScript 區：放互動邏輯
Preview 區：即時預覽結果

這個設計很適合新手，因為你可以很清楚地看到：

HTML 負責骨架
CSS 負責外觀
JavaScript 負責互動

三者的角色分工會非常直觀。

4. 為什麼新手很適合先用 CodePen？

因為它把「環境成本」降到幾乎沒有。

剛開始學前端的人，最容易被兩件事打亂節奏：

程式本身還沒學懂
開發環境又一堆設定

CodePen 的好處就是：你可以先把注意力放在程式本身。

例如你今天只是想練：

flex
hover
addEventListener
fetch
一個小型卡片 UI

那你直接開 CodePen 寫，速度通常最快。

5. 一個最簡單的 CodePen 範例

假設你想做一個按一下就改文字的按鈕，CodePen 會很好上手。

HTML

1
2
3
4


<div class="card">
 <h1 id="title">你好，CodePen！</h1>
 <button id="change-btn">點我換文字</button>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #f4f7fb;
 font-family: Arial, sans-serif;
}

.card {
 background: white;
 padding: 32px;
 border-radius: 16px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 text-align: center;
}

button {
 border: none;
 background: #2563eb;
 color: white;
 padding: 12px 20px;
 border-radius: 10px;
 cursor: pointer;
}

JavaScript

1
2
3
4
5
6


const title = document.getElementById("title");
const button = document.getElementById("change-btn");

button.addEventListener("click", function () {
 title.textContent = "文字被改掉了！";
});

你把這三段分別貼到 CodePen 的區塊裡，就能立刻看到結果。

6. CodePen 和本地開發有什麼差別？

這點很重要。

CodePen 的優點

打開就能寫
適合做小範例
分享超方便
適合學習和展示

CodePen 的限制

不適合大型專案
檔案結構比較簡化
不像真正專案那樣有完整資料夾管理
有些套件和工具鏈整合沒那麼自由

所以你可以這樣理解：

CodePen 很適合「練習」和「展示」，但不適合拿來做完整產品。

7. 什麼時候該用 CodePen？

以下這幾種情況，CodePen 都很適合：

你想快速試一段 CSS 動畫
你想做一個小互動元件
你想把作品丟給朋友或面試官看
你看到別人的範例，想拆開研究
你想整理自己的前端練習作品集

尤其對新手來說，CodePen 最大的價值不是「很酷」，而是：

它讓你更容易開始動手寫。

8. 給新手的使用建議

如果你剛開始學前端，我會建議你這樣用：

小效果、小練習，用 CodePen
完整網站、小專案，用本地開發
做完一個好作品，再把它整理成可分享的 Pen

這樣你既能享受 CodePen 的快速，也不會忽略真正專案的開發流程。

結語：先把「開始寫」這件事變簡單

很多新手不是不會寫，而是每次開始前就先被環境搞得很累。

CodePen 的價值，就在於它把「開始動手」這件事變得非常輕。

你不用先想專案架構、不用先管 build tool，也不用先開很多檔案。
你只要專心回答一個問題：

「我現在想試什麼效果？」

這對前端學習初期非常有幫助。

接下來你可以做什麼？
下一篇我們可以接著介紹 Figma，因為當你開始會切版、做元件之後，你就會發現前端工程師幾乎一定會碰到設計稿，而 Figma 幾乎就是現在的業界標配。

準備好從寫畫面，進一步看懂設計稿了嗎？下一篇見！

新手第十步：Vite 入門　現代前端開發環境，快到你不敢相信！

Fri, 17 Apr 2026 00:00:00 +0000

到目前為止，我們都是用 CDN 的方式引入 Bootstrap、Tailwind、Vue，這樣雖然方便，但有幾個問題：

每次都要連網路載入套件
無法使用 npm 生態系的大量套件
沒辦法用 SCSS、TypeScript 等工具
程式碼無法優化打包，上線版本會比較大

Vite 就是解決這些問題的現代前端建置工具，而且快得離譜。

1. Vite 是什麼？

Vite（法文「快速」的意思）是由 Vue 作者尤雨溪開發的前端建置工具。它的主要功能是：

開發伺服器（Dev Server）：啟動超快，儲存檔案後頁面即時更新（HMR）
打包（Build）：把你的 JS、CSS、圖片等資源打包成最優化的上線版本
整合能力：支援 Vue、React、SCSS、TypeScript、Tailwind 等，幾乎什麼都能接

傳統的打包工具（如 Webpack）在大型專案啟動時可能要等 30~60 秒，Vite 通常在 1 秒以內。

2. 環境準備：安裝 Node.js

使用 Vite 之前，你需要安裝 Node.js（一個讓 JavaScript 能在電腦上執行的環境）。

前往 https://nodejs.org
下載 LTS 版本（長期支援版，較穩定）
安裝完畢後，打開終端機（Terminal / 命令提示字元），輸入：

1
2


node -v
npm -v

如果看到版本號就代表安裝成功！

3. 用 Vite 建立第一個專案

打開終端機，輸入以下指令：

1

npm create vite@latest my-project

接著會出現互動式選單，讓你選擇框架和語言：

1
2


✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

這裡選 Vue + JavaScript，後面的篇章也會用這個組合繼續練習。

建立完成後，跟著提示執行：

1
2
3


cd my-project
npm install
npm run dev

打開瀏覽器，連到 http://localhost:5173，你的 Vue 專案就跑起來了！

4. 專案結構解說

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


my-project/
├── public/ # 靜態資源（不會被處理的圖片、字型等）
├── src/ # 你的主要程式碼
│ ├── assets/ # 會被 Vite 處理的靜態資源
│ ├── components/ # Vue 元件
│ ├── App.vue # 根元件
│ └── main.js # 進入點
├── index.html # 主 HTML 檔案
├── package.json # 專案設定與相依套件清單
└── vite.config.js # Vite 設定檔

最重要的概念：

你寫的程式碼都放在 src/ 裡面
App.vue 是整個應用的根，從這裡開始組合所有頁面
main.js 是 Vite 的進入點，負責啟動 Vue 應用

5. 認識 `.vue` 單文件元件（SFC）

Vite + Vue 的核心是 Single File Component（SFC），每個 .vue 檔案把 HTML、CSS、JS 全部包在一起：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


<template>
 <!-- 你的 HTML 結構 -->
 <div class="card">
 <h2>{{ title }}</h2>
 <p>{{ description }}</p>
 <button @click="handleClick">按我</button>
 </div>
</template>

<script setup>
// 你的 JavaScript 邏輯
import { ref } from 'vue';

const title = ref("我的第一個元件");
const description = ref("這是一個 Vue SFC 元件");

function handleClick() {
 title.value = "你點了按鈕！";
}
</script>

<style scoped>
/* scoped 代表這些樣式只影響這個元件，不會外洩 */
.card {
 border: 1px solid #ddd;
 border-radius: 8px;
 padding: 20px;
 max-width: 400px;
}

h2 {
 color: #2c3e50;
}
</style>

<style scoped> 是個很棒的功能：裡面的 CSS 只會作用在這個元件上，不用擔心樣式衝突。

6. 在 Vite 專案中加入 Tailwind CSS

這是現代前端最流行的組合之一，設定步驟非常簡單：

第一步：安裝 Tailwind

1

npm install -D tailwindcss @tailwindcss/vite

第二步：在 vite.config.js 加入 plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
 plugins: [
 vue(),
 tailwindcss(),
 ],
})

第三步：在 CSS 入口檔加入 Tailwind 指令

在 src/style.css（或你的主 CSS 檔）最頂部加入：

1

@import "tailwindcss";

第四步：確認 main.js 有引入這個 CSS

1
2
3
4
5


import './style.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

完成！現在你的 Vue 元件裡可以直接用 Tailwind 的 class 了。

7. 在 Vite 專案中加入 SCSS

一樣很簡單，只要安裝一個套件：

1

npm install -D sass

安裝完畢後，你的 .vue 檔案就能直接用 SCSS：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<style scoped lang="scss">
$primary: #3498db;

.card {
 border-radius: 8px;
 padding: 20px;

 h2 {
 color: $primary;
 font-weight: bold;
 }

 &:hover {
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
}
</style>

只要在 <style> 標籤加上 lang="scss"，Vite 就會自動用 Sass 來編譯，不需要任何額外設定。

8. 打包上線

開發完成後，只需要一個指令就能打包：

1

npm run build

Vite 會在 dist/ 資料夾產生優化過的靜態檔案，你可以直接把這個資料夾上傳到任何靜態網站服務（GitHub Pages、Netlify、Vercel）。

結語：現在你的開發環境是真正工程化的了

從這篇開始，你的前端開發工作流程已經和業界接軌了：

工具	負責的事
Vite	開發伺服器、打包、整合各種工具
Vue.js	UI 元件化開發、響應式資料管理
Tailwind CSS	快速客製化樣式
SCSS	複雜樣式的變數、巢狀管理

你已經掌握了： HTML → CSS → Flexbox → SCSS → Bootstrap → Tailwind → JavaScript → Vue.js → Vite

這套技術組合，就是目前台灣前端職場的主流技能樹。恭喜你走到這一步！

接下來你可以做什麼？ 技術工具都有了，但工程師還少一樣關鍵技能——Git 版本控制。下一篇我們來學怎麼用 Git 管理你的程式碼，讓你的作品能放上 GitHub，讓全世界都看到！

準備好讓作品被看見了嗎？下一篇見！

新手第一步：安裝 VS Code 打造你的網頁開發環境

Sat, 27 Dec 2025 00:00:00 +0000

在開始寫 HTML 之前，你需要一個好用的「筆記本」來寫程式。目前全球開發者最推薦的工具就是 Visual Studio Code (簡稱 VS Code)。它免費、快速，而且功能非常強大。

1. 下載 VS Code

首先，請前往 VS Code 的官方網站下載安裝檔。

官方網站： https://code.visualstudio.com/

進入官網後，點擊大大的 “Download” 按鈕（系統會自動偵測你是 Windows 還是 Mac）。

2. 安裝步驟 (Windows / Mac)

Windows 使用者：

執行下載的 .exe 檔。
點選「我同意合約」。
重要： 在「選取額外工作」畫面時，建議勾選 「將 [以此 Code 開啟] 動作新增到 Windows 檔案總管內容功能表」。這樣你之後對著資料夾點右鍵就能直接開啟，非常方便。
點擊「安裝」直到完成。

Mac 使用者：

下載完成後會得到一個 .zip 檔。
解壓縮後，將 Visual Studio Code 圖示拖曳到你的 「應用程式 (Applications)」 資料夾即可。

3. 環境中文化 (繁體中文)

VS Code 預設是英文介面，新手可以先安裝中文插件來降低學習門檻。

打開 VS Code。
點擊左側圖示列最下方的 「擴充功能 (Extensions)」 圖示（長得像積木）。
在搜尋框輸入：Chinese。
找到 “Chinese (Traditional) Language Pack for Visual Studio Code” 並點擊 Install。
安裝完成後，右下角會出現重啟通知，點擊 “Restart” 即可切換為中文。

4. 建立你的第一個網頁檔案

安裝好後，我們來動手試試看：

在桌面建立一個新的資料夾，取名為 my-web。
回到 VS Code，點擊 「檔案」>「開啟資料夾」，選擇剛才建立的 my-web。
點擊左側「檔案總管」旁的新增檔案圖示，輸入檔名：index.html。
在右側空白處輸入 ! 然後按下 Tab 鍵，VS Code 會自動幫你產生標準的 HTML 骨架！

5. 推薦新手的必裝套件

除了中文化之外，這兩個套件能讓你寫網頁的效率提升 200%：

Live Server：讓你改完程式碼存檔後，瀏覽器會自動重新整理，即時看到結果。
Auto Close Tag：輸入開頭標籤後，自動幫你補上結尾標籤。

結語

恭喜你！你已經準備好開發環境了。現在你的電腦已經不是一台只能追劇的機器，而是能創造出無限可能網頁的工具。

下一步建議： 既然環境裝好了，快去學習 HTML 基礎標籤，試著在 index.html 寫下你的第一行標題吧！

前端工具 on EricChung的程式勇者村

json-server 是什麼？前端開發很常用的假 API 工具介紹

這個網站在做什麼？

json-server 的核心功能是什麼？

為什麼前端工程師會常用它？

這個 npm 頁面還透露哪些資訊？

它適合用在哪些情境？

總結

新手第七步：SCSS 入門 寫 CSS 終於不再複製貼上了！

1. SCSS 是什麼？

2. 安裝 SCSS 編譯工具

3. 變數：統一管理設計規格

4. 巢狀：讓選擇器更有層次感

5. Mixin：可重複使用的樣式積木

6. @use 與模組化：把 SCSS 拆成多個檔案

7. 給新手的實戰練習

結語：CSS 也可以很工程化

新手第九步：Tailwind CSS 入門 用 class 直接堆出你要的樣式！

1. Tailwind 和 Bootstrap 的哲學差異

2. 快速上手：用 CDN 體驗 Tailwind

3. Tailwind 的命名邏輯

間距（Spacing）

顏色（Colors）

字體（Typography）

彈性布局（Flexbox）

響應式（Responsive）

互動狀態

4. 常用的元件範例

按鈕

卡片

5. 給新手的實戰練習：用 Tailwind 重做作品集

結語：Tailwind 讓設計真的是你的設計

新手第八步：Bootstrap 5 入門 不會設計也能做出專業版面！

1. Bootstrap 5 是什麼？

2. 引入 Bootstrap 5：一行搞定

3. Grid 格線系統：響應式排版的核心

4. 最常用的元件

按鈕

導覽列（Navbar）

卡片（Card）

5. 工具類別（Utilities）：快速調整樣式

6. 給新手的實戰練習：做一個個人作品集頁面

結語：框架讓你站在巨人的肩膀上

新手第十七步：Figma 入門 前端工程師一定會碰到的設計工具

1. Figma 是什麼？

2. 為什麼前端工程師要會 Figma？

3. Figma 裡最常見的幾個概念

Frame

Layer

Component

Auto Layout

4. 前端工程師最常怎麼用 Figma？

5. 用 Figma 看設計稿時，前端最該注意什麼？

1. 字體

2. 顏色

3. 間距

4. 響應式版本

5. 元件狀態

6. Figma 和前端開發的關係

7. Figma 和 CodePen 有什麼不同？

Figma

CodePen

8. 給新手的學習建議

結語：前端不只是在寫程式，也是在讀設計

新手第十六步：CodePen 入門 不用建專案，也能立刻開始寫前端！

1. CodePen 是什麼？

2. CodePen 能做什麼？

3. CodePen 的畫面怎麼看？

4. 為什麼新手很適合先用 CodePen？

5. 一個最簡單的 CodePen 範例

HTML

CSS

JavaScript

6. CodePen 和本地開發有什麼差別？

CodePen 的優點

CodePen 的限制

7. 什麼時候該用 CodePen？

8. 給新手的使用建議

結語：先把「開始寫」這件事變簡單

新手第十步：Vite 入門 現代前端開發環境，快到你不敢相信！

新手第七步：SCSS 入門　寫 CSS 終於不再複製貼上了！

6. `@use` 與模組化：把 SCSS 拆成多個檔案

新手第九步：Tailwind CSS 入門　用 class 直接堆出你要的樣式！

新手第八步：Bootstrap 5 入門　不會設計也能做出專業版面！

新手第十七步：Figma 入門　前端工程師一定會碰到的設計工具

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

新手第十步：Vite 入門　現代前端開發環境，快到你不敢相信！

5. 認識 `.vue` 單文件元件（SFC）