【班級特色】

隨著前端開發領域的標準提升，僅具備 HTML 與 CSS 基礎已難以滿足現今的職場需求。現代企業更傾向尋求具備設計概念、熟練框架並能高效協作的開發人才。因此，本課程架構依據業界實務進行調整，重點涵蓋 Figma 設計協作、Tailwind CSS 樣式開發、TypeScript 型別系統以及 Next.js 框架應用，協助學習者掌握符合市場期待的技術棧。

1️⃣ 專案規劃 × UI 介面設計：掌握業界標準流程，從規劃到設計圖產出

         •  網站規劃：架構邏輯與動線設計

         •  網站 UI 介面設計工具 - Figma：

             ╴Style 系統（色彩／字體／元件庫）

             ╴RWD 響應式設計規範

👉 結合 Figma AI 協作，加速版面生成與元件迭代，讓設計流程更高效。

2️⃣ 網頁核心基礎 × TypeScript 加持：穩固程式根基，導入強型別語言

         •  開發環境：Visual Studio Code 實戰入門

         •  CSS 進階排版：CSS3 + Flexbox

         •  JavaScript 網頁程式設計 & HTML5 JS APIs

         •  TypeScript 程式設計（業界必備）：

👉 基礎扎實並掌握 TS，讓程式碼更嚴謹，善用 AI 工具輔助學習原理，為框架鋪路。

3️⃣ 前端框架應用 × 響應式切版：主流技術全制霸，打造現代化網站

         •  Tailwind CSS：打造高效率響應式網站

         •  React.js：JavaScript Library 核心應用

         •  Next.js：JavaScript Framework 伺服器渲染

         •  Vue.js：JavaScript Framework 輕量框架

👉 同時掌握三大主流生態系，運用 AI 協作解決開發瓶頸，大幅提升競爭力。

4️⃣ 伺服器開發 × 資料庫建置：具備全端思維，不僅懂前端，更懂資料流

         •  Node.js + Express 伺服器建置

         •  MySQL 資料庫系統建置與管理

         •  RESTful API 實作與 ORM 資料庫存取

         •  前後端開發整合實務

👉 成為能與後端順暢溝通的前端工程師，是企業最愛的即戰力。

5️⃣ 實作專題 × 版本控管：從實習到產出，累積真實開發經驗

         •  Git 版本控管基礎

         •  實習操作 & 專題指導

         •  期中／期末專題製作

👉 透過 Git 協作與完整專案洗禮，累積屬於你的 GitHub 綠格子與作品集。

6️⃣ 就業輔導 × 職涯接軌（其它項目）：不只學技術，更要順利進入職場

         •  職場講座 / 模擬面試

         •  專題觀摩 / 專題預演

         •  專題發表暨結訓典禮 / 就業媒合活動

👉 專題作品與就業媒合活動，將是你職涯最強的敲門磚。

UI 與網頁視覺設計

• 設計思維與使用者體驗基礎
• 網頁排版、構圖設計
• Figma / Photoshop 操作與實作

網頁排版與基礎前端開發

• HTML5 + CSS3 + RWD 響應式設計
• Flexbox 與 Grid 網格排版
• JavaScript 程式語言核心應用

前端進階技術

• Vue.js 與 React.js 開發流程
• Ajax 與 API 串接應用實作

後端技術整合

• MySQL 基礎開發
• JavaScript 與 Node.js 後端應用
• RESTful API 架構與設計實作

專題製作 x 團隊協作

• 學 Git / GitHub 打團戰
• 團隊做網站，練溝通、練開發流程
• 作品集完成度 = 求職競爭力 UP！