超簡單！網頁設計入門指南：5分鐘打造你的第一個網站頁面
- 這篇文章直接帶你用 HTML 和 Tailwind CSS 做出一個網站。
- 先玩再說，做出來有成就感，才會想繼續研究！
1️⃣ 工具準備
做網頁就像煮飯，工具順手最重要。
推薦用 Visual Studio Code（VSCode），免費又超多人用。
👉 直接去 VSCode 官方網站 下載安裝。
2️⃣ 開始你的第一個網頁
- 打開 VSCode
- 新增一個檔案，取名
index.html - 準備開工！
3️⃣ 寫下你的第一行程式碼
把這段 HTML 貼進 index.html：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的第一個網站</title>
</head>
<body>
恭喜！你的第一個網頁誕生了！
</body>
</html>💡 這些標籤是什麼？
<html> - 這是網頁的外殼
<head> - 放設定、標題這些東西
<body> - 你看到的內容都在這
先照做，細節以後再說！
4️⃣ 用 HTML 標籤蓋網站
每次改完記得存檔（Ctrl + S），然後雙擊 index.html，瀏覽器就能看到你的網站啦！
💡 HTML 標籤像積木
<header> - 網站的招牌
<nav> - 選單
<main> - 主內容
<section> - 分區
<footer> - 頁尾
先拼出來，之後再慢慢玩細節。
把 body 裡的內容換成這樣：
<header>
<h1>我的個人網站</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">作品集</a></li>
</ul>
</nav>
</header>
<main>
<section>
<div>
<img
src="https://cdn.great-good.tw/images/6852b1a88ac48.webp"
alt="漂亮的風景照"
/>
</div>
</section>
<h2>我的作品</h2>
<section>
<div>作品 1</div>
<div>作品 2</div>
<div>作品 3</div>
<div>作品 4</div>
<div>作品 5</div>
<div>作品 6</div>
</section>
</main>
<footer>
<p>© 2025 我的網站，歡迎來逛逛</p>
</footer>5️⃣ Tailwind CSS 讓網站瞬間變美
現在網站有內容，但長得很樸素。Tailwind CSS 就像美肌濾鏡，讓你一秒變專業！
👉 Tailwind CSS 官網，我們直接用 CDN 引入。
🎨 Tailwind CSS 有多方便？
一般 CSS：寫一個藍色按鈕要十幾行
Tailwind CSS：只要
class=“bg-blue-500 text-white px-4 py-2 rounded”
下面會用 😎 標示 CSS 設定
1. 引入 Tailwind CSS
在 <head> 加這行：
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>2. 整體頁面設定
<body>
<div class="min-h-screen bg-zinc-950 text-zinc-100 space-y-8">
<!-- 內容放這裡 -->
</div>
</body>😎 div 標籤的 class 說明
min-h-screen - 最小高度佔滿整個螢幕
bg-zinc-950 - 深灰色背景
text-zinc-100 - 淺灰色文字
space-y-8 - 每個區塊之間有間距
3. 頂部選單區
<header class="flex items-center justify-between py-4 px-8 bg-zinc-800">
<h1 class="text-xl font-bold">我的個人網站</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-400 transition">首頁</a></li>
<li><a href="#" class="hover:text-blue-400 transition">作品集</a></li>
</ul>
</nav>
</header>😎 Header 標籤的 class 說明
flex - 橫向排列
items-center - 垂直置中
justify-between - 左右兩邊對齊
py-4 px-8 - 上下 1rem、左右 2rem 內距
bg-zinc-800 - 深灰色背景
text-xl font-bold - 標題字大且粗
space-x-4 - 選單項目間距
hover:text-blue-400 transition - 滑鼠移上去變藍色並有動畫
4. 主要內容區
<main class="max-w-screen-2xl mx-auto p-4 space-y-8 min-h-svh">
<!-- 內容放這裡 -->
</main>😎 main 標籤的 class 說明
max-w-screen-2xl - 最大寬度限制，畫面不會太寬
mx-auto - 左右置中
p-4 - 內距 1rem
space-y-8 - 區塊間距
min-h-svh - 最小高度佔滿螢幕可視區
5. 大圖橫幅
<section>
<div>
<img
src="https://cdn.great-good.tw/images/6852b1a88ac48.webp"
class="rounded object-cover aspect-video w-full"
alt="漂亮的風景照"
/>
</div>
</section>😎 Banner 圖片的 class 說明
rounded - 圖片四角圓弧
object-cover - 圖片自動填滿容器且不變形
aspect-video - 維持 16:9 比例
w-full - 圖片佔滿容器寬度
6. 作品展示區（九宮格）
<h2 class="font-bold text-2xl">我的作品</h2>
<section class="grid grid-cols-3 gap-4">
<div class="bg-red-400 py-10 text-center rounded text-white font-semibold">
作品 1
</div>
<div class="bg-amber-400 py-10 text-center rounded text-white font-semibold">
作品 2
</div>
<div class="bg-green-400 py-10 text-center rounded text-white font-semibold">
作品 3
</div>
<div class="bg-blue-400 py-10 text-center rounded text-white font-semibold">
作品 4
</div>
<div class="bg-slate-400 py-10 text-center rounded text-white font-semibold">
作品 5
</div>
<div class="bg-stone-400 py-10 text-center rounded text-white font-semibold">
作品 6
</div>
</section>😎 作品區的 class 說明
font-bold text-2xl - 標題粗體、字大
grid grid-cols-3 - 三欄格線排版
gap-4 - 格子間距
bg-xxx-400 - 不同顏色背景
py-10 - 上下內距
text-center - 文字置中
rounded - 圓角
text-white font-semibold - 白色粗體文字
7. 網站底部
<footer class="bg-gray-800 text-white p-4 text-center">
<p>© 2025 我的網站，歡迎來逛逛</p>
</footer>😎 Footer 標籤的 class 說明
bg-gray-800 - 深灰底
text-white - 白字
p-4 - 內距
text-center - 置中
完整美化版
<!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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="min-h-screen bg-zinc-950 text-zinc-100 space-y-8">
<header class="flex items-center justify-between py-4 px-8 bg-zinc-800">
<h1 class="text-xl font-bold">我的個人網站</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-400 transition">首頁</a></li>
<li>
<a href="#" class="hover:text-blue-400 transition">作品集</a>
</li>
</ul>
</nav>
</header>
<main class="max-w-screen-2xl mx-auto p-4 space-y-8 min-h-svh">
<section>
<div>
<img
src="https://cdn.great-good.tw/images/6852b1a88ac48.webp"
class="rounded object-cover aspect-video w-full"
alt="漂亮的風景照"
/>
</div>
</section>
<h2 class="font-bold text-2xl">我的作品</h2>
<section class="grid grid-cols-3 gap-4">
<div
class="bg-red-400 py-10 text-center rounded text-white font-semibold"
>
作品 1
</div>
<div
class="bg-amber-400 py-10 text-center rounded text-white font-semibold"
>
作品 2
</div>
<div
class="bg-green-400 py-10 text-center rounded text-white font-semibold"
>
作品 3
</div>
<div
class="bg-blue-400 py-10 text-center rounded text-white font-semibold"
>
作品 4
</div>
<div
class="bg-slate-400 py-10 text-center rounded text-white font-semibold"
>
作品 5
</div>
<div
class="bg-stone-400 py-10 text-center rounded text-white font-semibold"
>
作品 6
</div>
</section>
</main>
<footer class="bg-gray-800 text-white p-4 text-center">
<p>© 2025 我的網站，歡迎來逛逛</p>
</footer>
</div>
</body>
</html>🎉 你已經做出一個網站了！
存檔後刷新瀏覽器，你會看到：
- • 酷酷的深色主題
- • 水平選單
- • 圖片橫幅
- • 九宮格排版
- • 配色和間距都很協調
6️⃣ 讓網站在手機上也好看（響應式設計）
現在網站在電腦好看，但在手機上可能會有問題。
用 Tailwind 增加網站的響應式，手機平板都不是問題！
📱 什麼是響應式設計？
就是讓網站在不同螢幕大小都好看：
• 電腦：寬螢幕，可以並排
• 平板：中等螢幕，適度調整
• 手機：窄螢幕，改成直排
Tailwind 響應式前綴
📏 螢幕尺寸代號
sm: - 手機以上 (640px+)
md: - 平板以上 (768px+)
lg: - 電腦以上 (1024px+)
xl: - 大螢幕 (1280px+)
修正頂部選單
手機螢幕窄，選單要改成直排：
<header
class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4 px-4 sm:px-8 bg-zinc-800 space-y-2 sm:space-y-0"
>
<h1 class="text-lg sm:text-xl font-bold text-center sm:text-left">
我的個人網站
</h1>
<nav>
<ul
class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 text-center"
>
<li><a href="#" class="block hover:text-blue-400 transition">首頁</a></li>
<li>
<a href="#" class="block hover:text-blue-400 transition">作品集</a>
</li>
</ul>
</nav>
</header>😎 響應式選單說明
flex-col sm:flex-row - 手機直排，平板以上橫排
sm:items-center sm:justify-between - 平板以上才置中對齊
px-4 sm:px-8 - 手機內距小，大螢幕內距大
text-center sm:text-left - 手機置中，大螢幕靠左
space-y-2 sm:space-y-0 sm:space-x-4 -
手機上下間距，大螢幕左右間距
修正主要內容區
<main
class="max-w-screen-2xl mx-auto p-2 sm:p-4 space-y-4 sm:space-y-8 min-h-svh"
>
<!-- 內容放這裡 -->
</main>修正作品展示區（最重要！）
九宮格在手機上會太擠，改成響應式：
<h2 class="font-bold text-xl sm:text-2xl px-2 sm:px-0">我的作品</h2>
<section
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 px-2 sm:px-0"
>
<div
class="bg-red-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 1
</div>
<div
class="bg-amber-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 2
</div>
<div
class="bg-green-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 3
</div>
<div
class="bg-blue-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 4
</div>
<div
class="bg-slate-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 5
</div>
<div
class="bg-stone-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 6
</div>
</section>😎 響應式格線說明
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 -
手機1欄、平板2欄、電腦3欄
gap-2 sm:gap-4 - 手機間距小，大螢幕間距大
py-8 sm:py-10 - 手機內距小，大螢幕內距大
px-2 sm:px-0 - 手機加左右間距，大螢幕不用
修正底部
<footer class="bg-gray-800 text-white p-2 sm:p-4 text-center">
<p class="text-sm sm:text-base">© 2025 我的網站，歡迎來逛逛</p>
</footer>測試響應式效果
🔍 怎麼測試？
方法1：調整瀏覽器視窗大小
拖拽瀏覽器邊緣，看網站如何變化
方法2：開發者工具
按 F12 → 點手機圖示 → 選不同裝置
方法3：實際用手機開啟
最真實的測試方法
完整響應式版本
<!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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="min-h-screen bg-zinc-950 text-zinc-100">
<header
class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4 px-4 sm:px-8 bg-zinc-800 space-y-2 sm:space-y-0"
>
<h1 class="text-lg sm:text-xl font-bold text-center sm:text-left">
我的個人網站
</h1>
<nav>
<ul
class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 text-center"
>
<li>
<a href="#" class="block hover:text-blue-400 transition">首頁</a>
</li>
<li>
<a href="#" class="block hover:text-blue-400 transition"
>作品集</a
>
</li>
</ul>
</nav>
</header>
<main
class="max-w-screen-2xl mx-auto p-2 sm:p-4 space-y-4 sm:space-y-8 min-h-svh"
>
<section class="px-2 sm:px-0">
<div>
<img
src="https://cdn.great-good.tw/images/6852b1a88ac48.webp"
class="rounded object-cover aspect-video w-full"
alt="漂亮的風景照"
/>
</div>
</section>
<h2 class="font-bold text-xl sm:text-2xl px-2 sm:px-0">我的作品</h2>
<section
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 px-2 sm:px-0"
>
<div
class="bg-red-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 1
</div>
<div
class="bg-amber-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 2
</div>
<div
class="bg-green-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 3
</div>
<div
class="bg-blue-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 4
</div>
<div
class="bg-slate-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 5
</div>
<div
class="bg-stone-400 py-8 sm:py-10 text-center rounded text-white font-semibold"
>
作品 6
</div>
</section>
</main>
<footer class="bg-gray-800 text-white p-2 sm:p-4 text-center">
<p class="text-sm sm:text-base">© 2025 我的網站，歡迎來逛逛</p>
</footer>
</div>
</body>
</html>🎉 恭喜！你的網站現在是響應式的了！
現在你的網站會根據螢幕大小自動調整：
- 📱 手機：單欄、較小間距、直排選單
- 📟 平板：雙欄、適中間距、橫排選單
- 💻 電腦：三欄、較大間距、完整版面
🚀 把網站放到網路上
網站做好了，當然要讓大家都看得到！
Cloudflare Pages（免費又快）
1️⃣ 註冊帳號
2️⃣ 上傳網站
• 點「Create a project」
• 選「Upload assets」
• 把 index.html 拖進去
• 等幾秒鐘上傳完成
3️⃣ 網站上線
• 系統會給你一個網址
• 像是：your-awesome-site.pages.dev
• 全世界都能看到你的網站
🎉 你已經有自己的網站了！
現在你可以：
- • 跟朋友分享
- • 在履歷上寫「有個人網站」
- • 隨時修改內容再上傳
💡 更新網站很簡單
想改內容？
1. 在 VSCode 修改 index.html
2. 重新上傳到 Cloudflare Pages
3. 幾秒鐘後網站自動更新
🎯 下一步怎麼玩？
你已經做出響應式網站，接下來可以選有興趣的方向繼續玩：
📱 進階響應式技巧
🔥 你已經會基礎了，可以挑戰：
• 更複雜的斷點設計（2xl:、3xl:）
• 不同裝置的圖片優化
• 觸控友善的按鈕設計
• 橫向/直向模式適配
⚡ 加入互動效果（用 Alpine.js）
🎮 可以玩什麼？
像是：按鈕 hover、圖片輪播、表單檢查錯誤等
• 按鈕動畫
• 圖片輪播
• 聯絡表單
🎨 進階美化
✨ 讓網站更有質感
可以學：
• CSS 動畫
• 自訂顏色和字體
• 深色/淺色模式切換
🔧 專業開發工具
🚀 進階技能
像是：
• Git 版本控制
• 自動化部署
• 效能優化
• SEO 優化
🌟 現代框架（進階挑戰）
🎓 可以挑戰這些
等熟悉基礎後，可以玩：
• React / Vue.js
• Next.js / Nuxt.js
• TypeScript
• Node.js
🎯 學習建議
不要一次學太多！建議順序：
1️⃣ 先把 Tailwind CSS 玩熟
2️⃣ 練習更多響應式設計
3️⃣ 加入 Alpine.js 互動
4️⃣ 學 Git 和專業工具
5️⃣ 最後挑戰現代框架
每個階段都做出作品，邊做邊學最有效。
💪 你已經踏出第一步！
每個網頁設計師都是從這裡開始的。
有了基礎，剩下就是多練習、多嘗試。
建議：試著改顏色、換文字，多玩不同組合。
加油！
📚 推薦資源
🎨 設計靈感
💡 先做出來再說，邊做邊學最有效！