如果我重新轉職前端，我會如何學好 HTML、CSS 和 JavaScript

最近在 Threads 上，看到許多人為了轉職前端工程師，每天分享自己的學習進度。這讓我想起大約兩年前，身為一名非程式相關科系的我，也是一步步透過自學，最終成功轉職。

今天我想和你分享我的學習經驗，尤其是我犯過的錯誤，以及意外幫助我成功的做法，希望能讓想轉職的你更有方向學習！

HTML

學習 HTML 是前端開發的第一步，但不要因為它很基礎簡單就掉以輕心，學會如何運用好標籤、表單等功能，對未來實作時幫助很大。

但也要注意在前期，不要在 HTML 花太多心力，浪費寶貴的轉職時間。

學習時 HTML 沒有做好的部分：

花太多時間在 HTML

當初我在學 HTML 基礎時，花了過多時間在一些簡單的細節上，比如重複複習已學過的 tag，而不是迅速轉移重心到 CSS。

轉職的時間非常珍貴，如果我能重來，我會快速進入 CSS 的學習，並結合 HTML 進行練習，來最大化學習效率。

沒有學好表單元素

我在學習表單元素時，只停留在基本的 input 和 textarea，後來才發現 HTML5 提供了不少強大的表單元素（如 email、tel、date 等），這些元素可以內建驗證，減少 JavaScript 的使用。

當初覺得表單驗證很麻煩，寫了一堆 JS，後來發現若熟練這些元素，就可以省略掉很多寫 JS 的時間，加快學習速度。

不清楚 HTML 數據屬性（Data Attributes）

HTML 的 data-* 屬性可以存儲客製化的數據，以便 JavaScript 讀取和操作，當初我忽略了這個屬性，導致後期做專案時，又花了很多時間回去學習。

熟練掌握這個特性，也能讓你在開發互動性功能時更加得心應手。

學習 HTML 有做到的地方

學好語義化標籤的使用

當初覺得這些語義化標籤很酷，例如 header、footer、main、aside、nav、article，所以早期就開始練習使用語義化標籤，後來發現，寫好結構化標籤，不僅可以讓程式結構更清晰，幫助團隊更容易理解架構以外，對 SEO 也有很大的好處

使用 Emmet 快捷語法

因為覺得用快捷與法很帥，就花了一點時間了解 Emmet 快捷鍵語法，大大提升了我撰寫 HTML 的速度，這點到現在都對我非常有幫助。

CSS

CSS 是讓網站美觀和易用的關鍵。在學習 CSS 時，一定要了解如何熟練使用各種屬性，並理解怎麼讓樣式更一致、更容易維護。

學習時 CSS 沒有做好的部分：

沒有統一 CSS 屬性順序

起初我都隨意排列 CSS 屬性，結果導致後續維護困難，每次找屬性要更改都找很久。所以統一屬性書寫順序，除了可以讓你的樣式更有邏輯，維護起來也更輕鬆。

目前我寫 CSS 屬性順序的習慣是：

1. css 變數
2. 排版相關：position / top / right / bottom / left
3. 盒模型相關： width / height / margin / padding
4. 字體：font / line-height / text-align
5. 其他視覺效果：color / background / box-shadow
6. z-index
7. Transition & Animation

不理解 z-index 和層級優先權

一開始學習時，因為覺得很複雜，就沒有特別深入理解 z-index 和層級優先權，結果在處理第一個專案的時候花了大量時間。建議你早期就深入理解這些屬性，尤其是在複雜的佈局和交互中更能體會到其重要性。

沒有學習用 CSS 管理變數

當時我不知道可以使用 CSS 變數（如 --primary-color）來統一管理樣式，導致我在專案中花了很多時間在修改重複的屬性。

統一管理樣式的好處很多，像是重複使用加快開發效率、幫助團隊迅速理解 CSS 架構和基本設定、更易於維護和修改 ... 等等。

學習 CSS 有做到的地方

多利用範本練習

轉職時我找了許多範本或網路 CSS 教學來練習，讓我非常熟練常用的 CSS 屬性，也探索不同風格的設計和的實現方式。

這讓我在面對麻煩的排版設計時，能夠快速想出解法，不必在這邊花太多時間。

嘗試不同解法

除了找範本練習，我也會嘗試用不同的 CSS 方法解決相同的問題，讓我更深入理解排版的概念，像是知道 flex、grid、position、float 各自適合應用的場景，若在早期掌握這些基礎佈局工具，就能輕鬆應對不同的版面需求。

跟進最新的 CSS 特性

因為有興趣，我經常 follow 最新的 CSS 屬性和選擇器，讓我能用更新更簡單的屬性，解決相同的場景。

例如用 grid-template-row 來做 accordion，或是用 grid-area: 1/1/2/2 來重疊置中元素，這幾個小技巧都讓我在在專案上開發更快。

JavaScript

學習 JS 不僅僅只是掌握語法，更是要練習解決問題的能力，理解如何透過程式來解決實際問題。

學習時 JS 沒有做好的部分：

沒有通過專案練習 JS 知識

一開始學習網頁時，以為網頁只是在排版，所以忽略了很多操作 JS 的技術，也耽誤了我學框架的時間。

如果一開始就自己發想各種小工具來練習，就能更快理解 DOM 的操作或運用，也能理解框架的意義。

不了解 Dev Tools

除了查看 HTML、CSS 以外，Dev Tools 還有其他很強大的功能，像 network、performance 等等，記得實習時找一個 bug 找很久，結果主管一看 network 就找到問題了。

學習 JS 有做到的地方

安排學習計畫

在感到迷茫時，我習慣為自己制定了學習計畫，沒想到這樣幫助我更有效率地學習 JavaScript，也不容易被過多資訊分散精力。

掌握數組、字串與物件的常用方法

為了練習 JS 的語法，我在 codewars 上花了不少時間在刷題，讓我對例如 map、filter、reduce 等方法更熟練，所以我在處理數據時更有效率，程式碼也更易讀簡潔。

主動學習進階特性

雖然我沒有花很多時間在實作 JS 專案，但我花了不少時間在學習閉包、this、類別等進階特性，主要是我當初覺得很有趣，如果你去翻我舊文章，會發現有很多這方面的內容。 上面兩點讓我在學習 React 時更輕鬆，要實現某些比較複雜的功能時，也能快速想到大致的解決方法。

總結

以上是我學習 HTML、CSS、JS 的經驗分享，總結來說，如果讓我重來，我會特別注重以下四點：

1. 系統化學習： 制定學習計劃，循序漸進地掌握知識。
2. 注重實踐： 學習與實踐相結合，通過專案來鞏固知識。
3. 保持好奇心： 持續關注最新消息，學習新技術幫我開發和保持競爭力。
4. 反思總結： 定期回顧學習成果，總結經驗教訓，調整學習策略。