學程式的路徑從 HTML/CSS 開始，經過 JavaScript、前端框架、後端開發、資料庫，到 Git 版本控制和部署。每個階段大約 1-3 個月，從零到能面試大約需要 6-12 個月的密集學習。這篇把部落格裡分散在 fundamentals、frontend、backend、git、design-pattern、algorithms 六個系列的文章串成一條學習路線。
重點不是「學完所有東西」，而是知道自己現在在哪、下一步該去哪。
Level 0：全景圖
flowchart TD A[基礎觀念] --> B[HTML / CSS] B --> C[JavaScript] C --> D{選方向} D -->|前端| E[前端框架] D -->|後端| F[後端開發] D -->|全端| E & F E --> G[Git & 協作] F --> G F --> H[資料庫] G --> I[設計模式] I --> J[演算法] J --> K[面試 & 作品集] style A fill:#e3f2fd,stroke:#1976d2 style B fill:#e3f2fd,stroke:#1976d2 style C fill:#e3f2fd,stroke:#1976d2 style D fill:#ede7f6,stroke:#5e35b1 style E fill:#e8f5e9,stroke:#388e3c style F fill:#e8f5e9,stroke:#388e3c style G fill:#fff3e0,stroke:#f57c00 style H fill:#fff3e0,stroke:#f57c00 style I fill:#f3e5f5,stroke:#8e24aa style J fill:#f3e5f5,stroke:#8e24aa style K fill:#e0f7fa,stroke:#00838f
從基礎觀念到 HTML/CSS → JavaScript → 選前端或後端 → Git → 設計模式 → 演算法 → 面試。每個階段都可以回頭補強，不是線性的單行道。
Level 1：基礎觀念
在寫任何程式之前，先搞懂軟體開發的全貌——前端是什麼、後端是什麼、它們怎麼溝通、一個 App 的架構長什麼樣。
軟體工程全貌 — 不是語法，是「軟體是怎麼運作的」。 → 軟體工程概論：工程師到底在做什麼 → 軟體架構概論：單體、微服務、Serverless → 技術演進（一）：從靜態網頁到 SPA → 技術演進（二）：框架與工具鏈的演化 → 技術演進（三）：現代開發的全貌
前後端分工 — 餐廳的外場和廚房，搞懂了才知道自己想做哪邊。 → 前後端分離入門：為什麼要分離 → 前後端分離的歷史：從 MVC 到 SPA → 前後端架構：通訊方式與資料流 → 前後端資料傳遞：JSON、Form Data、GraphQL
Level 1：HTML / CSS
網頁的骨架和皮膚。HTML 決定「有什麼」，CSS 決定「長什麼樣」。
→ HTML 結構：語義化標籤、SEO 基礎 → DOM 操作：JavaScript 怎麼跟 HTML 互動 → BOM：瀏覽器提供的 API（window、location、navigator） → 瀏覽器機制：渲染流程、重繪與回流
Level 1：JavaScript
網頁的靈魂。按鈕能按、表單能送、動畫能動，都靠它。
核心概念 — 變數、函式、非同步、模組化。 → Framework 概念：為什麼需要框架 → 為什麼需要 Bundler：Webpack、Vite 背後的問題 → npm 常用指令：套件管理基礎
TypeScript — JavaScript 的強型別版本，大型專案必備。 → TypeScript 實戰模式（一） → TypeScript 實戰模式（二） → TypeScript 實戰模式（三）
Level 1：前端框架（React / Vue）
學完 JS，你能做東西了。但專案一大就會亂——框架幫你管理狀態和 UI。
→ React Hooks：函式元件的狀態管理 → MVC 架構：框架背後的設計思想 → 前端 MVP 設計：最小可行的前端架構 → 前端面試：常見考題與準備方向 → 前端 API 串接方式：Fetch、Axios、SWR
Level 1：後端開發
使用者看不到的那一半。處理資料、驗證權限、回傳結果。
API 設計 — 前後端溝通的介面。 → API 概念：什麼是 API → RESTful API：設計原則與實務 → OpenAPI：API 文件化 → CRUD：Create、Read、Update、Delete → OAuth 指南：認證與授權
後端架構 — 從路由到 Controller 到 Service。 → 後端初始化：專案結構設計 → ESLint + Typing + Tests：程式碼品質基礎 → ESLint + Typing + Tests（二） → Base Controller 設計：通用 Controller 抽象 → 通用 Log 設計：結構化日誌 → 後端 MVP 設計：最小可行的後端架構
Level 1：Git & 版本控制
Git 是遊戲的存檔功能。寫壞了可以回到上一版，多人合作也不會互踩。
→ 為什麼要用 Git：版本控制的價值 → Git 基礎指令：add、commit、push、pull → Git 進階指令（一）：rebase、cherry-pick、stash → Git 進階指令（二） → Merge vs Rebase：什麼時候該用哪個 → Git Flow：經典分支策略 → GitHub Flow：簡化版分支策略 → GitLab Flow：結合 CI/CD 的策略 → Release 策略：版號、changelog、tag
Level 1：設計模式
程式碼能動不夠，要能維護、能擴展。設計模式是前人踩過的坑整理出來的解法。
常用模式（先學這些）： → Singleton：全域唯一實例 → Factory：動態建立物件 → Strategy：抽換演算法 → Observer：事件監聽 → Decorator：動態加功能 → Facade：簡化複雜介面
進階模式（需要時再學）： → Proxy、Adapter、Template Method、Command、State、Builder、Chain of Responsibility → 全部 23 個模式見 設計模式系列
Level 1：演算法與資料結構
面試必考，但日常開發也需要。不是要你背題，而是培養「用什麼資料結構解什麼問題」的直覺。
資料結構（基礎）： → Array、Linked List、Stack、Queue、Hash Table、Tree
資料結構（進階）： → Heap、Graph、Trie、AVL Tree、LRU Cache
演算法（常見類型）： → 搜尋、排序、DP、遞迴、雙指標、滑動視窗
→ 完整系列見 演算法與資料結構系列
閱讀路徑
完全零基礎（非理工背景）
先看 軟體工程概論，再從 HTML 開始。不要急著學框架，先把 HTML + CSS + JS 的基礎打穩。目標：2 個月內做出一個靜態網頁。
有一點基礎（會寫簡單程式）
跳過基礎觀念，直接從 React Hooks 或後端框架開始。同時學 Git 基礎。目標：1 個月內用框架做出一個 CRUD 應用。
準備面試
先掃 前端面試 看考什麼，然後針對弱點補。演算法從 Hash Table 和 DP 開始。設計模式看前五個。目標：每天刷 1-2 題 LeetCode。
知識缺口
| 缺口 | 為什麼重要 | 建議放在哪 |
|---|---|---|
| ⚠️ CSS 深入篇 | Flexbox、Grid、RWD 的系統化教學 | frontend/ |
| ⚠️ JavaScript 非同步 | Promise、async/await、Event Loop | fundamentals/ |
| ⚠️ React / Vue 完整教學 | 從元件到狀態管理到路由 | frontend/ |
| ⚠️ Node.js 後端實戰 | Express / Fastify 完整專案 | backend/ |
| ⚠️ 部署篇 | 從本機到 Vercel / AWS 上線 | infra/ 或 fundamentals/ |
| ⚠️ 測試入門 | Unit Test、Integration Test 的基礎觀念 | process/ |
FAQ
Q: 要先學前端還是後端？ A: 如果你喜歡看到畫面、注重細節，先學前端。如果你喜歡邏輯推理、處理資料，先學後端。不確定的話，先學前端——成就感來得比較快，HTML + CSS 改了馬上看到結果。
Q: 需要學演算法嗎？ A: 面試需要，日常開發偶爾需要。建議在學完框架、能做完整專案之後再開始刷。先搞懂 Hash Table、排序、DP，這三個涵蓋了大部分面試題。
Q: 多久能找到工作？ A: 全職學習 6-12 個月，兼職學習 12-18 個月。前提是你有作品（至少 2 個完整專案）和基本的 Git 使用能力。不要等「學完」再找工作——你永遠學不完。
Q: 需要學 TypeScript 嗎？ A: 現在大部分公司都在用 TypeScript。建議在 JavaScript 基礎打穩後就切過去，不用等太久。TypeScript 不難，它只是在 JS 上加了型別檢查。看 TypeScript 實戰模式。
Q: 設計模式什麼時候要學？ A: 寫過一個完整專案之後。如果你還沒體會過「程式碼改不動」的痛苦，設計模式學了也記不住。先從 Singleton、Strategy、Observer 三個開始。
Q: 自學跟上課差在哪？ A: 課程的好處是有人幫你排好學習順序。自學的好處是可以按自己的速度來，而且免費資源非常多。這張地圖就是在幫你排順序——你不需要花錢上課也能有清楚的路徑。