從 Android 到 HTML + CSS：工程師自學 Web 的撞牆與轉念

起因：想學 Vue 結果發現我根本連 Web 都不懂

寫 Android 寫了五六年，最近開始對日常開發提不起勁。為了找點新鮮感，我跑去 B 站看了部 SpringBoot3 + Vue3 的全端教學影片。SpringBoot 看得還算順，畢竟是 Java。但 Vue 一出現，直接當機。

我試著去補 Vue 的教學，結果看了四集還是一樣霧煞煞。這才發現，原來我根本還沒碰過 HTML、CSS、JS 這三件套。沒打地基，當然蓋不起房。

於是我找了一套最基礎的教學，來自「尚硅谷」，總共 200 集、51 小時，內容從 HTML4 到 CSS3，一路慢慢講，完全零基礎。

教學連結：尚硅谷 HTML+CSS 零基礎課程（B站）

教學內容概覽：50 小時在學什麼？

• 1～56 集：HTML4 基礎 各種標籤像是 div、span、img、表單、表格... 基本打底。
• 57～147 集：CSS2 核心 各種選擇器（class、id、偽類等）、定位、float、margin/padding、盒模型。
• 148～159 集：實戰練習 把 HTML + CSS 綜合應用，實際刻網頁。
• 160～170 集：HTML5 新的語意標籤（video、article、section）、input 新屬性。
• 171～200 集：CSS3 動畫、過渡、flexbox、media query 響應式等現代 Web 技術。

影片風格超級細，真的零基礎也能跟得上。老師會截圖教你快捷鍵、講話節奏很慢，我開 1.5 倍速看剛好。

Android 開發背景下學 Web：有熟悉感也有撞牆感

熟悉的部分

• CSS 選擇器 ≈ Android 的 theme + style + xml
• Flexbox ≈ LinearLayout 的 weight 概念
• CSS animation/transition ≈ Android 動畫屬性
• media query ≈ sw600dp / dimens 的感覺

只要你寫過 UI，大概都能抓到概念。

撞牆的地方

• **padding 行為不同** Android 的 TextView 沒寬高時加 padding 會撐開；但在 Web 裡，padding 是「佔原本寬高空間」，如果沒設 box-sizing: border-box，你就會發現東西都被壓縮了。
• float 是地獄 比起 Android 的 layout_margin 邏輯，float 簡直像是打怪一樣，還好現在已經不太推 float 了，改用 flex。
• div 沒有 ViewGroup 的感覺 所有東西都是 div，你要怎麼包、排版、切版，全靠你自己，初期真的會迷路。
• 初學者完全搞不懂排版邏輯 剛開始學 HTML 的時候，我一直用 Android 的腦袋去思考，「為什麼不能這樣包？」「為什麼這樣會跑掉？」但學完後再回頭看就會發現：Web 排版邏輯其實有它一套，跟 Android 沒得比。

建議：真的，別一開始就跳 Vue 或 React

很多人一開始就跳 Vue、React，結果看不懂語法、不知道 template 在幹嘛、不知道 style scoped 是什麼。就像沒學 Kotlin 就上 Jetpack Compose，完全看天書。

我現在回頭去看 Vue，就清楚很多了：

• 看得懂 HTML 架構
• CSS 怎麼寫
• 原來這些資料是綁在哪裡
• 原來這邊是綁 class，是要去套 CSS…

學前端框架前，把 HTML、CSS、JS 學好，不是浪費時間，是節省未來的時間。

結語

如果你是 Android 工程師、想轉往前端或單純學學 Web，我很推薦這部教學影片。很細，很慢，很基本，但這種內容才最難找。

學 HTML + CSS 就像重學排版邏輯，前期會有點撞牆，但撐過去，後面才會輕鬆。不然你每次看框架、UI 都只會問：「這是在哪裡定義的？」「為什麼這樣會跑掉？」那就是基礎沒打好。

練習時可能會需要用到的鏈結，因為台灣這邊要用QQ之類的去拿教學資料有點麻煩，所以有人放到Github上面。 https://github.com/vectorxxxx/NOTE_HTML5 https://github.com/H0308/Gmall