Front End 前端入門

一句話：Front End（前端）負責使用者在瀏覽器「看得到、點得到」的一切——結構（HTML）、樣式（CSS）、互動（JavaScript），再接到設計與框架。

本課是獨立前端入門（比 Full Stack 路線圖更細）。建議與 UX／UI、React 搭配。

1. 什麼是 Front End？

• Front End：瀏覽器端 UI——頁面、表單、動畫、呼叫 API 顯示資料。
• Back End：伺服器端——資料庫、權限、商業邏輯（見 Back End 入門）。
• Full Stack：前後端都會；可走 Full Stack 路線圖。

2. HTML（結構）

• 語意標籤：header、nav、main、section、article、footer。
• 表單：label＋input；按鈕用 button；連結用 a。
• 圖片要有有意義的 alt；標題層級不要亂跳（h1→h2→h3）。
• 練習：寫一頁履歷／作品集骨架（尚不需漂亮 CSS）。

3. CSS（樣式與版面）

• 盒模型：content／padding／border／margin；先搞懂再調版面。
• Flexbox／Grid：一維列／二維網格；現代版面主力。
• 變數：:root { --cyan: ... } 方便主題一致。
• 練習：同一 HTML 做成手機單欄＋桌面雙欄。

4. JavaScript（互動）

• 基礎：變數、陣列、物件、函式、if／迴圈。
• DOM：選取元素、改文字／class、監聽 click／submit。
• fetch：向 API 取 JSON 再渲染列表（前後端銜接起點）。
• 練習：待辦清單或主題切換（亮／暗）小專案。

5. 響應式與無障礙

• Viewport meta＋媒體查詢；先手機再放大（mobile-first）。
• 對比足夠、鍵盤可操作、可見 focus；語意 HTML 是無障礙基礎。
• 詳見 UX／UI 無障礙章節與 WCAG。

6. 工具與框架路線

• 編輯器：VS Code；版本控管 GitHub。
• 設計：先 UX／UI，再寫碼。
• 框架：HTML/CSS/JS 穩了再學 React（或 Vue）；之後可 Next.js。
• 上線：零成本建站（Pages／Vercel）。
• 可選 TypeScript：型別減少前端錯誤；框架專案常見。

7. 官方與優質連結