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

找免費圖片不用再怕版權：Unsplash 是前端工程師最好的朋友

Mon, 20 Apr 2026 00:10:00 +0800

做 side project 的時候，有一個地方很容易卡住：

圖片要從哪裡來？

自己拍？沒那個美學和器材。

隨便去 Google 圖片抓？小心被版權找上門。

買付費圖庫？一張動輒好幾百塊，side project 根本不划算。

這個問題困擾我很久，直到我認真開始用 Unsplash。

Unsplash 是什麼？

一個完全免費的高品質圖片網站。

特色：

免費下載 — 不用付錢、不用訂閱
可以商用 — 做產品、做網站、印刷品都可以
不用標示來源（但標了攝影師會很開心）
畫質超高 — 隨便一張都是幾千像素寬
量大 — 幾百萬張照片，幾乎什麼主題都找得到

簡單說，就是一群專業攝影師把自己的作品無償釋出來給大家用。

怎麼用？

1. 直接到 unsplash.com 搜尋

輸入關鍵字，例如 coffee、mountain、code，結果會出來一堆高品質照片。

2. 下載你喜歡的圖

點進去之後，右上角有「Download free」按鈕，可以選不同尺寸。

3. 透過網址直接嵌入（進階）

Unsplash 有一個很讚的功能：每張圖都有穩定的 CDN 網址。

你不一定要把圖下載下來再上傳到自己的伺服器，可以直接 hotlink：

1

<img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=1200&q=80" />

網址後面可以加參數控制：

w=1200 — 寬度 1200px
q=80 — 壓縮品質 80%
fit=crop — 裁切模式
auto=format — 自動選擇最佳格式（WebP 之類）

這個部落格大部分的封面圖，就是直接用 Unsplash 的 CDN 網址。

前端工程師怎麼用最順？

情境 1：部落格封面圖

每篇文章都要一張封面？去 Unsplash 找，貼 URL，搞定。

情境 2：Landing page 英雄區

需要一張有氛圍的 hero image？Unsplash 的攝影作品比很多付費圖庫還有質感。

情境 3：Mockup 假資料

做 demo 時要放使用者頭像、產品圖？Unsplash 有 Unsplash Source API：

1
2


<!-- 隨機一張分類為 nature 的圖 -->
<img src="https://source.unsplash.com/800x600/?nature" />

每次重新整理都會換一張，做 mockup 很方便。

情境 4：直接整合進設計工具

Figma、Canva、Notion 都有 Unsplash 外掛，不用離開工具就能插圖。

使用前要注意的事

雖然 Unsplash 非常寬鬆，但還是有一些不能做的事情：

不能把 Unsplash 的圖原封不動重新打包成圖庫販售
不能用來做明顯詆毀照片中人物的內容
不能用來暗示照片中的人物代言你的產品（除非你有模特兒授權）

講白一點：只要你是把圖拿來用在自己的作品裡，基本上都 OK。

完整條款在這裡：Unsplash License

其他類似的網站

如果在 Unsplash 找不到你要的風格，可以試試這幾個：

網站	特色
Unsplash	攝影感強，氛圍照最多
Pexels	同時有照片和影片
Pixabay	照片、插畫、向量、音樂都有
Burst	Shopify 出的，電商產品圖多

我自己是以 Unsplash 為主，Pexels 當備援。

小結

Unsplash 解決了獨立開發者和小團隊最煩的問題之一：找圖不用再怕版權。

如果你還在 Google 圖片右鍵存檔，或是怕被告不敢放圖，趕快換個習慣：

👉 unsplash.com

把時間花在寫 code、做產品，不是花在煩惱圖片授權。

新手第七步：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——現代前端的建置工具，讓你的開發環境真正「工程化」起來！

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

新手第十七步：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，讓全世界都看到！

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

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

找免費圖片不用再怕版權：Unsplash 是前端工程師最好的朋友

Unsplash 是什麼？

怎麼用？

1. 直接到 unsplash.com 搜尋

2. 下載你喜歡的圖

3. 透過網址直接嵌入（進階）

前端工程師怎麼用最順？

情境 1：部落格封面圖

情境 2：Landing page 英雄區

情境 3：Mockup 假資料

情境 4：直接整合進設計工具

使用前要注意的事

其他類似的網站

小結

新手第七步：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 讓設計真的是你的設計

新手第十七步：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 入門 現代前端開發環境，快到你不敢相信！

1. Vite 是什麼？

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

3. 用 Vite 建立第一個專案

4. 專案結構解說

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

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

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

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

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

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

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