前端工程師學習路線圖
☀️ 初級階段：打好基礎（1~3 個月）
🎯 目標：能做出靜態響應式網頁，理解前端基礎語言
✅ 學習內容：
1. HTML + CSS
- 認識常用標籤、表單、連結、圖片、表格
- CSS 選擇器、文字樣式、顏色、盒模型
- Flexbox、Grid 排版
- RWD 響應式設計（Media Queries）
- 使用 SCSS（可選，幫助組織樣式）
2. JavaScript（基礎）
- 基本語法（變數、陣列、物件、函式）
- 條件語句與迴圈
- DOM 操作（改變網頁上的元素、監聽事件）
- 基本事件處理（點擊、輸入等）
3. 工具熟悉
- 開發工具：VS Code、Live Server
- 瀏覽器開發者工具（Chrome DevTools）
- Git 版本控制（基本指令）
🎨 練習建議：
- 切版練習：模仿 Behance / Dribbble 上的網頁設計稿
- 自製作品：設計一個個人簡歷頁、作品集頁面
🌱 中級階段：進入互動式網頁（3~6 個月）
🎯 目標：能串接 API、具備模組化與小型專案開發能力
✅ 學習內容：
1. JavaScript（進階）
- 事件委派、表單驗證
- 非同步處理（fetch、Promise、async/await）
- JavaScript 模組化（import/export）
- 瀏覽器本地儲存（localStorage）
2. 前端框架：React（或 Vue）
- JSX 語法、Component 組件概念
- Props、State、事件處理
- React Router（頁面切換）
- 簡單狀態管理（Context 或 useReducer）
3. API 串接實作
- 串接天氣、電影、圖片搜尋等公開 API
- 顯示、篩選、搜尋資料
4. CSS Framework（可選）
- Tailwind CSS（實用、適合設計師）
- 或 Bootstrap（快速套用元件）
⚙️ 練習建議：
- 製作 To-do App / 天氣查詢工具 / 購物清單
- 重新製作你的設計作品集，用 React 架構呈現
🚀 進階階段：工程化與專業開發（6 個月以上）
🎯 目標：具備業界實作能力，能開發大型前端專案
✅ 學習內容：
1. TypeScript：型別系統、界面 Interface、泛型
2. React 進階 / 狀態管理
- Redux / Zustand / Jotai 等
- React Query（伺服器狀態管理）
3. 測試基礎
- 單元測試（Jest）
- E2E 測試（Playwright 或 Cypress）
4. 前端建構流程
- Webpack / Vite 打包器
- Babel、ESLint、Prettier 等工具
5. 部署與 CI/CD
- Netlify、Vercel 自動部署
- GitHub Actions 簡單工作流程
🔧 專案實作：
- 電商網站前台
- 部落格系統（含後台登入）
- 多頁應用（SPA + Router）
🎁 附加建議
- 每完成一個階段，就做一個完整的作品集頁面
- 將設計技能結合進開發中（客製 UI / 動畫 / 視差特效）
- 可以開始用 Figma 設計 UI，並自己開發成網頁，從設計到程式一條龍
