零基礎一年轉職前端工程師：完整路徑、心得、資源全公開

相信很多想轉職前端的朋友，在網路上爬文找資料的時候，看到動輒上萬元甚至超過 10 萬元的培訓課程，心應該已經涼了一半XD

你可能會想問：非本科生如果想要轉職前端，靠自學有可能嗎？

絕對有！

因為我自己就是完全靠自學，在一年轉職成功的非本科生。

所以今天這篇文章，我整理過去自學轉職的歷程、踩過的坑和使用過的資源，希望可以幫助想轉職的你對於轉職有更完整的認識！

如何從零開始自學轉職前端？

我把轉職前端分成「準備規劃期」、「正式學習期」、「作品製作期」以及「面試準備期」四個階段。

以下就和你分享每個階段的學習路徑、資源和建議：

一、準備規劃期

如果你是剛下定決心轉職的朋友，相信你跟當初的我一樣，都是帶著既興奮又焦慮的心情開始的。

但是在你想要快點把技術學起來之前，我想請你先慢下腳步！

在開始學習前端之前，最重要的是先了解這個領域的全貌。

前端的技術是由 HTML、CSS 和 JavaScript 核心所構成。HTML 負責建立網頁的骨架，CSS 用來設計美觀的外觀，而 JavaScript 則增加了互動性。理解這些技術的角色和相互關係，能幫助你在學習時更有方向感。

對前端的技術有一個基本的認識之後，接下來最重要的事情，就是找到自己的理想職缺。你可以用 104、CakeResume、Yourator 等求職平台搜尋相關職缺，找到屬於自己的 Dream Job。

理想職缺能幫助你設定更具體的學習目標，讓你根據職缺描述（Job Description）來挑選需要學習的技能，並在求職時根據公司產品和風格製作類似的專案作為作品集。

這樣做最大的好處就是可以讓你減少很多摸索的時間、避免迷失方向，也可以讓你在學習過程中保持動力，朝著理想的目標前進。

我在一開始學習前端時，最常遇到的問題就是不清楚該從何學起，或是不知道該學什麼。

所以正式開始學習前，如果能有完整的學習地圖可以參考，就可以避免迷失方向、降低很多的焦慮感，幫助你更專注在學習上。

在前端這個領域，已經有很多前輩整理好的學習地圖。你可以上 Google 搜尋前端技能樹、Frontend Roadmap 等關鍵字，或是參考市面上一些前端課程的教學大綱，當作是初步的學習大綱。

下面我也推薦兩個學習地圖，幫助你來安排階段性目標：

• 英文：​Frontend Developer Roadmap​
• 中文：​Alphacamp - 前端技能樹

有了初步的學習地圖和階段性目標後後，接著就可以透過把大問題切成小問題的方式，把所有要學習的主題進行拆分成更小的章節。

這個步驟就像是安排自己的學習講義目錄一樣，讓你之後能夠按照章節一步步往前學習，不會迷失方向。

以學習 HTML 為例，你可以把它細分為幾個子章節，例如 HTML 的組成、巢狀結構、常見標籤、HTML5 的特性，以及語義化標籤的使用方法。

總結來說，在開始學習之前，我會建議你先花一點時間設定好目標、規劃好學習地圖後，再來進行下一步。

學習前端一直卡關很焦慮嗎？

免費領取
前端學習管理模板

這個模板能幫助你：​

1. 規劃明確轉職目標與學習地圖
2. 一鍵生成學習路徑
3. 按主題建立學習筆記
4. 視覺化追蹤學習進度

*

*

免費領取

🎉 已送出！記得檢查你的 Email 喔！

二、正式學習期

學習技術會是陪伴你轉職旅程最久的一個階段。

在這個階段，除了學會前端轉職需要的技術之外，我覺得更重要的是學會「如何學習」的心態和能力。因為前端技術不斷在更新，每隔幾個月就會有新的技術、框架和函式庫出現，現在的技術很可能在未來幾年就不適用了，所以就算你之後轉職成功，還是必須持續學習和精進自己的技術。

如果你剛開始學習，可以利用 w3schools、freeCodeCamp、JavaScript.info 以及 MDN 等免費資源網站，開始逐步了解網頁的結構、樣式與前端程式設計的運作方式。

對新手來說，我覺得 freeCodeCamp 的課程結構會比較適合初學者，裡面會把各種概念分解成小關卡，像打遊戲通關一樣帶著你練習；而 JavaScript Info 和 MDN 則能給你更深度的技術原理和參考資訊。

當基礎打穩之後，你可以根據你當初設定的目標公司，開始選擇一個前端框架做學習（如：React 或 Vue）。這些框架能幫助你更高效地開發大型網站，也是現在要成功轉職必須學會的技術之一。

很多新手在這個階段最常犯的學習錯誤，就是花太多時間在「學」。你可能會覺得很奇怪，正式學習期不學東西不然要幹嘛？

我剛開始學習前端的時候，每天花 5、6 個小時在看教學影片和文章，雖然看起來好像學了很多，但每次當我真的要自己寫程式的時候，卻經常不知道從何下手，需要重新再把教學翻出來看一遍。

如果學習過程中只是被動的在吸收知識，很容易會讓人產生一種「我好像會了」的錯覺，但實際上卻沒辦法實際應用。所以說，要把前端學好，比起學習，更重要的是投入時間去實作和練習。

如果你不清楚要怎麼練習，Frontend Mentor 這個網站提供非常多真實設計稿，讓你練習刻版與開發，在過程中會遇到許多實務問題，也能直接感受到業界常見的佈局困難。

另外如果你想磨練 CSS 技巧，也可以參與像 CSSBattle 這樣的比賽，用最少程式碼完成指定造型，對排版思維有相當大的幫助。透過多次嘗試、反覆練習並對照不同教學資源，你才能將斷片化的知識真正「融會貫通」。

在我開始學前端的時候，我通常會把大目標切分成幾個簡單的小階段，這樣的做法能讓我每天或每週都知道該投入多少時間，也比較不會一次就面對龐大的學習壓力。

當我遇到不懂的地方，我會先在社群或論壇發問，也會試著解答別人遇到的問題。雖然有時候擔心自己可能講錯，但透過這樣的互動，我更容易確定自己到底懂不懂那些技術；而且問問題真的沒什麼好丟臉的，很多時候只是大家熟練程度的差異而已。

除了不斷吸收新知，我也會盡量多「輸出」。像是利用 Notion 或寫部落格整理學習筆記，或者動手做點小專案，來看看自己是否真的掌握了剛學到的觀念。我也會盡可能嘗試用英文資源學習，因為可以更直接接觸到最新、最原汁原味的內容，也省去翻譯可能帶來的誤差。

至於學習心態，我自己也曾因為「東西超多永遠學不完」而覺得很挫折。這時我會稍微調整自己的節奏，提醒自己不要太苛刻。只要一直穩定地投入心力，就算過程拉得比較長，也能看得到自己的成長幅度。

說到底，我覺得「持續投入、大量實作，並維持好心態」才是關鍵。如果你能抱著這種態度走過整個正式學習期，最終一定會收穫到足夠的實力，邁向下一個階段。

三、作品製作期

轉職前端工程師，專案作品是非常重要的一部分。

作品不僅代表你掌握技術的深度與廣度，更是面試時讓面試官快速了解你能力最直接的方式。特別是對於非本科、缺乏相關工作經驗的學習者，作品集能有效填補經歷的空白，也能讓你從眾多競爭者中脫穎而出。

很多人在這個階段的迷思，就是覺得作品集就是要越豐富越好。但事實上，當你做了一堆專案，展示出來的東西卻沒有特色、重點和深度時，反而會變成扣分項目。當我轉職成功後，參與篩選履歷的工作，我發現那些脫穎而出的作品，往往不是數量最多，而是特色鮮明，而且充分展示應徵者技術深度以及解決問題能力的作品。

所以說，在準備作品階段，切記不要為了追求作品的數量，而犧牲品質。

許多人會選擇製作響應式個人網站、API 串接專案或電商網站的雛形，這些不同類型的作品能展現你對 HTML、CSS、JavaScript 以至於前端框架的熟練度與運用能力。

另外，建議在過程中融入自己的個人風格與想法，讓每個專案都能有特色，並能反映你的興趣與專業。此外，若你對全端發展有興趣，也可嘗試實作 Node.js、MongoDB 或其他後端技術，以展現更完整的技術堆疊。

準備作品集時，最忌諱的就是「不熟悉自己的程式碼」。很多人在面試時無法清楚解釋關鍵的開發過程與技術細節，這會讓面試官懷疑你專案的真實性。

只有對作品集非常熟悉，你才能應付面試官的任何刁鑽提問，甚至在現場被要求修改或新增功能時也能應對自如。遇到的困難與解決方式、遇到哪些漏洞或瓶頸、以及如何測試都是面試官可能關心的重點。不要只是一味追求視覺上的完整度，而是要同時思考到程式的易讀性、效能與實際應用價值。

在選擇作品集主題方面，建議先從基礎開始練習，例如以 HTML、CSS 完成靜態的頁面，再逐步加入 JavaScript 與框架的功能。當你有一定的基礎後，可以開始挑戰更複雜的專案，例如個人網站、部落格系統或小型電商網站等，讓自己熟悉 API 串接、RWD 設計，以及前端開發在真實場景下的需求。

如果你對改善作品的整體風格與開發流程有興趣，也能透過使用 CSS 預處理器（像是 SASS）、UI library 或版本控制工具（Git）來學習更成熟的團隊協作模式。

在實作專案時，無論是遇到 BUG 或學到新的概念，都建議把學習心得和解決方法做紀錄。這些紀錄在面試時可以變成有力的證據，展現你解決問題的能力，以及對學習與開發的熱忱。若資源允許，也可以參加網路上的程式挑戰或黑客松來積累實戰經驗；在這些競賽中，你能感受更多真實情境並結交同好。

完成專案後，將作品部署到像 Vercel 或 Netlify 這樣的平台，並在 GitHub 上提供完整且有註解的程式碼，能讓面試官更加放心，同時也讓你更容易獲得社群或夥伴的建議與反饋。

別忘了在作品集展示時，最好把重點功能、技術細節、難點與解決方案都呈現在 README 或簡介中，如此一來，不僅能大幅提升面試效率，也能讓作品更有說服力。

整體來說，在作品準備期所需要兼顧的方向不少，包含基礎技術的紮實度、可重複維護的程式結構、個人風格以及對自己專案的熟悉度。

千萬不要只在意視覺效果而忽略了程式可讀性與功能可行性，也不要一味囤積作品而忘記提升作品的深度與品質。記得在每個作品完成後，持續優化與更新，因為這些日積月累的磨練，才是能幫助你成功轉職的最大關鍵！

四、面試準備期

在面試準備階段，大致上會分成「履歷」和「面試」兩個部分。

履歷準備

在寫履歷的階段，一定要根據不同公司和職位進行客製化，並強調你和這個職位最相關的技能與經驗。如果你是非本科系轉職，切記突出自學歷程與成果，包含你使用過的學習資源、完成的專案以及學到的新技術。

同時，作品集是履歷中最能吸引面試官目光的部分，因此要仔細呈現專案的技術選擇、功能特色和開發過程。

除此之外，保持履歷格式的簡潔明瞭也很重要，因為公司沒有時間仔細看每個人的履歷，所以過多不相關的細節反而會分散焦點；如果能量化個人成果，如專案數量或團隊合作經驗，也能讓履歷更具說服力。

為了方便面試官檢視你的程式碼，建議在履歷中附上 GitHub 連結，並提供個人網站或部落格讓對方進一步了解你的作品風格。最後，不要使用一成不變的履歷範本，適度展現個人特色，才能在眾多求職者中脫穎而出。

面試準備

在正式面試前，先準備一段約三到五分鐘的自我介紹，內容可涵蓋背景、上一份工作經驗、轉職原因及未來規劃，同時強調你對前端的熱情、學習成果與動機。

如果你已經累積了一定數量的作品，務必針對每個專案的技術選擇、框架應用、遇到的困難以及解決過程都熟記在心；面試官很可能會要求你當場示範如何增修功能或解釋關鍵程式碼段落，因此你對作品的熟悉度要非常高。

技術問題的準備則離不開大量練習前端面試題，並深入理解每道題背後的原理，切勿死記答案。常見的 CSS、JavaScript 以及框架（如 React）的概念題都是考核重點，建議先掌握像是 display 屬性的行為、非同步程式設計觀念、React Hook 的原理等，確保遇到相關提問時能自然流暢地回答。

另外也要對常見的 Git 版本控制知識、HTTP/HTTPS 安全機制、CORS 原理等網路基礎概念有所理解，因為這些範疇會影響到前端開發在真實專案中的運用。面試時，除了技術題，情境題也是考核應用能力與溝通能力的重要機會，記得真實表達想法並展現你具備解決問題的邏輯。

如果你已經熟練上面的內容，建議你可以進行模擬面試，請朋友、前輩甚至是 GPT 扮演面試官進行問答，模擬真實情境來檢驗自己的應對表現。

也可以事先準備一些關於公司產品、文化或技術堆疊的問題，用來提問面試官，展現你對該公司和職位的興趣。

總結來說，履歷和面試的準備過程需要投入相當多的時間與精力，但只要能在此階段紮實地展現你的實力、熱情和潛力，就能大大提升轉職成功的機會。

自學轉職常見問題

轉職前端一定要花錢上課嗎？

轉職能不能成功，和你有沒有花錢上課其實沒有絕對的關係。

我當初就是利用網路上的免費資源自學轉職前端的，雖然中間有一度因為學習卡關，忍不住跑去培訓班諮詢，但一問之後發現他們的學費要將近 15 萬！沒錢的我只好回家繼續爬文學習XD

所以我覺得要不要上課，取決於你自己的學習需求和考量。以過來人的角度來看，我覺得現在網路上的免費資源已經非常充足，只要有足夠得決心和毅力，自學也是完全可以達到轉職目標的。

另外，因為自學過程中都需要自己解決問題，過程中可以培養你解決問題的能力，同時也能提高你使用技術文件的熟練度，讓你建立起扎實的應變能力。這也是我在開始工作後，發現自己相對於那些培訓出來的同事一個獨特的優勢。

不過付費課程當然也有它的優勢，可以幫助你提供更系統化的學習方向，幫你減少很多摸索時間。

如果你正在考慮是否要花錢上課，建議先嘗試用免費資源學習，確認自己對前端技術是不是真的有興趣，並測試自己的學習動力與節奏。

當你發現自學過程中遇到瓶頸時，可以再考慮付費課程作為補充。有些課程平台會提供試閱內容，你可以看看是不是真的對你有幫助，再來決定要不要花錢上課。

新手轉職前端最容易忽略的誤區

轉職過程中，我們一定都會踩到一些雷，除了技術本身的盲點，有些則是學習上容易忽略，卻會影響學習成效的誤區。

我下面就分享幾個我過去曾經陷入的誤區，希望幫助你及早意識並避開，在轉職路上走得更順利。

1. 只有學沒有做

很多新手剛接觸前端時，容易急於學會技術，而過度偏重在吸收知識，卻缺乏練習，導致消化不良，學習成效反而不好。

我剛開始學前端時，也是把大部分時間花在看網路教學和文章，每次看完以為學會了，等到要實作時卻經常發現不知道從何下手。

這就像學生時期讀書只有死記硬背，卻沒有寫練習題，等到考試題目一出現變化就寫不出來了。所以說，寫程式除了學會知識和理論，更重要的是大量練習。

2. 實作只顧著照做

網路上有很多帶你做出整個專案的教學，例如做出一個 Landing Page 或登入後台等等，但如果只是照著步驟做而沒有理解背後的細節，那麽即使做完，你還是不會知道它是怎麼做出來的。

我曾經看著教學做出一個 message clone，做完當下雖然很有成就感，但回過頭來看，我對程式的架構和實現邏輯還是很模糊，結果到頭來還是要重新學一遍。

3. 沒有規劃進度

轉職初期，我因為缺乏明確的進度規劃，經常一天捕魚，三天曬網，起床後不知道該學什麼，或是看到什麼學什麼，進度很不穩定，所以容易感到迷茫和焦慮。

轉職不是短跑衝刺，而是一場長跑馬拉松，重點不在一天學了多少，而是能不能每天持續進步，所以規劃進度非常重要。

4. 專案太像練習作品

很多新手在建立作品集時，誤以為作品要很豐富才能在求職時脫穎而出，所以做了一堆專案，但展示出來的卻都是一些簡單的練習作品，沒辦法讓公司看到你的硬實力和創意。

所以說，作品集重質不重量，三個完整的專案就足以讓你轉職成功，太多反而會讓人看得眼花撩亂，難以掌握你的專長和特色。

5. 一個人埋頭苦幹

我先說，我就是完全獨自一人學習和轉職的（因為我比較內向XD），所以並不是一個人埋頭苦幹就沒辦法轉職成功。

但我在經營自媒體後，開始和許多人交流，才發現社群對我軟硬實力的提升非常有幫助。交流過程中，我經常能夠發現自己的盲點，或是重新複習自己不熟悉的觀念。除此之外，遇到瓶頸時也能從有經驗的人獲得受用的提點。

回想起來，要是我轉職初期就開始參加相關社團，應該就能更快轉職成功，也不會那麼煎熬。

英文不好有辦法學會前端嗎？

因為程式語言本身就是以英文為基礎，學習前端時不可避免地需要接觸大量的英文內容，包括程式語法、技術文件和學習資源，所以英文能力對學習前端開發有一定的影響。

不過這並不代表英文不好就無法學會前端。我當初自學時，英文底子就不是太好，讀英文資源會比較吃力，不過最後還是順利轉職成功，甚至進到外商公司上班。

如果你和當初的我一樣，對英文比較沒自信，在剛起步時選擇中文資源可以幫助你比較快入門。中文資源方面，大陸的內容還是相對台灣前端圈完整，Bilibili 上就有非常多免費的完整技術課程，如果你英文真的聽不懂，非常推薦你去上面學習。

雖然如此，還是建議你嘗試慢慢過渡到利用英文資源學習，因為因為大多數最新的技術資訊和文件還是以英文為主。

現在有 ChatGPT 和其他 AI 工具後，翻譯文件已經變得非常容易。透過多看技術文件、多聽英文教學影片以及實際用英文撰寫程式碼，其實很快就可以熟悉英文專業術語和表達方式。所以就算你現在英文沒有很好，也不用太擔心自己學不會前端！

非本科生轉職會影響薪水嗎？

對於很多非本科的朋友來說，轉職前端是否會影響薪資是許多人好奇的問題。

就我自己的經驗來說，薪水的高低還是取決於能力與經驗，而非學歷。尤其因為前端領域很多人都是透過轉職入行的，所以比起你的學歷，大部分公司會更看重你的軟硬實力。

技術能力是否扎實，專案經驗是否豐富，這些都會直接影響你能否勝任工作，以及起薪的高低。所以作品集的展示非常重要，因為它是企業評估你能力的重要依據。

其他影響薪資的因素還包括公司規模、產業別、地區及市場行情等，所以非本科生的背景也不是唯一的取決因素。

只要你能夠持續學習，不斷提升實力，並以實際成果展現價值，就能突破學歷的限制，獲得理想的薪資。