階段 1 網頁基礎

前端部署工程師的第一站:把 HTML、CSS、JavaScript 三本柱練到能徒手刻出響應式頁面 — 這是之後所有框架與部署功力的地基。

這一階段學什麼

• HTML 語意化:用對結構標籤(header、nav、article 這類),讓瀏覽器、搜尋引擎與螢幕閱讀器都讀得懂,而不是滿頁 div。
• CSS 排版:主攻 Flexbox 與 Grid 兩套排版系統,搞懂盒模型(Box Model)與選擇器權重,版面才不會「調一處、壞三處」。
• JavaScript 基礎:變數、函式、DOM 操作與事件監聽,讓按鈕點得動、選單展得開。
• 響應式設計(RWD):用 media query 與彈性單位,讓同一份頁面在手機、平板、桌機都好看。

為什麼是現在學

階段 2 的 React/Vue 元件,拆開來還是 HTML、CSS、JS;基礎不穩,學框架會變成「照抄範例但不知道為什麼會動」。而階段 4 部署上線的,也正是這些檔案。

怎麼練(具體行動)

1. 挑一個喜歡的網站,不看原始碼,徒手仿刻它的首頁版面。
2. 做一個個人介紹或作品集靜態頁:至少三個區塊、一個導覽列、一個聯絡區。
3. 用開發者工具把視窗拉窄,逐段修到手機版不跑版。
4. 學基本 Git 指令,把成果推上 GitHub 並開啟 GitHub Pages。

完成標準

• 手刻出一個響應式靜態網站,桌機與手機瀏覽都正常,且已推上 GitHub。
• 能解釋每個區塊為什麼用這個標籤、這種排版方式。

⚠️ 常見誤區:急著學框架、跳過手刻 CSS — 之後每次版面跑掉都只能瞎猜。

前端是 AI 應用離使用者最近的一層;之後替 AI 服務做介面與部署,都從這裡起步。