自學的現實：有人成功，有人繞了很多彎路
自學網頁設計是可行的——大量的職業設計師和前端工程師都是自學起家。但「自學可行」和「所有人路徑都一樣」是兩件事。
很多人的學習路徑是這樣的：找到一本書或一個課程，學了一段時間，遇到卡關；然後換另一個資源；在選擇下一個學什麼的時候花了很多時間；最終對自己能不能從事這個職業沒有清楚的概念。
這篇試圖提供一個更有結構的路徑，讓你在有限的注意力和時間下，把精力用在最重要的地方。
先確定：你想往哪個方向走？
網頁設計有幾個不同的方向，學習路徑有所不同：
UI/UX 設計師：專注視覺設計和用戶體驗，主要工具是 Figma，不一定需要深入學寫程式。
前端開發者：把設計實現成運作的網頁，核心技能是 HTML/CSS/JavaScript，後期學框架（React/Next.js）。
獨立接案者（Full-stack Light）：能獨立完成一個客戶的官網，從設計到上線。目前最實用的路線是學會 Figma + Next.js + Tailwind CSS，再利用 AI 工具補強薄弱環節。
這篇主要針對「獨立接案者 / 全端輕量」路線，因為這個路線在台灣市場的接案需求最直接。
Phase 1：基礎（6–8 週）
HTML & CSS 基礎
不需要很深入，但需要能理解基本結構：Block vs Inline 元素、Box Model、Flexbox、Grid、基本的 CSS 選擇器。
推薦資源：
- freeCodeCamp（英文，免費）：Responsive Web Design 認證課程
- TheOdinProject（英文，免費）：更完整的結構化路徑
- MDN Web Docs（英文，最全的參考文件）
學到感覺：自己能從零寫一個多區塊的靜態 HTML 頁面，會調整佈局和樣式。
Figma 基礎
學 Figma 的目的：能在寫程式之前先用 Figma 規劃版面，而不是邊寫程式邊想設計。
Figma 官方有免費的教學課程（figma.com/resources/learn-design），是最好的起點。
學到感覺：能用 Figma 設計一個 3–5 頁的官網 wireframe / mockup。
Phase 2：核心技能（8–12 週）
JavaScript 基礎
不需要很深入，但需要理解：變數、函式、陣列、物件、DOM 操作、事件監聽、async/await 和 Fetch API 的概念。
推薦資源：
- javascript.info（英文，深度但清晰）
- freeCodeCamp 的 JavaScript Algorithms 課程
學到可以感覺：能用原生 JS 做一些互動效果（toggle 選單、表單驗證、簡單的 API 呼叫）。
React 基礎 + Tailwind CSS
React 是目前最主流的 UI 框架，學 Next.js 前要先有 React 的概念。Tailwind CSS 讓你的 CSS 工作更有效率。
推薦：Next.js 官方教學（nextjs.org/learn）——免費，循序漸進，直接帶你建立一個功能完整的應用。
Phase 3：建立作品（貫穿整個學習過程）
學習的同時，持續用所學建立實際的作品。
每個 Phase 的學習結束後，建立一個「展示這個階段技能」的專案，放到 GitHub 和版本控制平台。
最終建立一個「自己的個人網站 / 作品集頁面」——這個頁面本身就是你最重要的作品。
Phase 4：接觸實際接案
作品集有 2–3 個相對完整的作品後，開始接觸實際接案。
台灣常見的自由工作者平台：TASKER（技客）、104 自由工作、Worklife。
接到第一個案子不需要很完美——從小案子開始，學習如何和客戶溝通、管理時程、交付完整的成果。
這個「實戰循環」的學習效率，往往高過繼續學習另一個你沒有機會實際應用的技能。
關於 AI 工具的使用
現在的自學環境和過去不同：GitHub Copilot、v0、Cursor 等 AI 輔助工具讓「不懂」的東西更快有第一個可以運作的版本。
建議：先建立基礎理解，再善用 AI 工具加速。如果跳過基礎直接依賴 AI，遇到 bug 時你不知道從哪裡除錯，遇到特殊需求時你不知道如何改寫 AI 的輸出。