logo

推薦的轉職前端學習資源

2022年2月24日

💎 加入 E+ 成長計畫 與超過 500+ 位軟體工程師一同在社群中成長，並且獲得更多的軟體工程學習資源

因為先前分享的海外求職文，有陸續收到版有詢問轉職的相關事宜。ExplainThis 共筆的三個共同發起人中，其中一個是高中開始自學寫程式，後來本科系一路讀到台大資工碩士；一個是大學文組科系畢業後幾年轉職，另一個則是理工科系研究所畢業後轉職。剛好我們是在人生不同階段接觸程式、往工程師之路邁進，因此希望透過這篇文章，彙整我們在自學程式、轉職路上覺得不錯的資源。

也因為我們接觸程式與轉職的人生階段非常不同，我們相信不論你現在處於什麼人生階段，不論是個高中生，或是已經進入社會好一段時間，只要願意投入努力與付出，都將有機會成功轉職前後端軟體工程師。

不同階段適合不同資源

在實際分享資源前，想先談一個重要的概念，在不同階段選擇適合該階段的學習資源，是非常重要的。舉例來說，在剛開始接觸程式時，如果就去讀高深的演算法書，反而可能因為看不懂，造成挫折，導致最後放棄。又或者說，在有了一定基礎，沒有花時間去實作，只專注在知識的累積，可能因為缺乏實務經驗，讀不到知識的精髓，這樣可能事倍功半。

因此，在本篇的資源分享中，我們會切成三個階段，前面是基礎掌握，接著是實作相關的資源，最後是要準備轉職面試的資源。版友們可以針對自己目前在的階段，決定要讀哪一段落，這樣能最大化個人的時間利用。

我該去程式培訓班嗎? 要去的話該選哪一家?

在選擇轉職資源時，許多人可能會考慮，該完全透過線上資源自學? 還是該去程式培訓班? 剛好 ExplainThis 共筆的三個共同發起人，一個是透過書與線上免費資源自學，一個是透過 Alpha Camp (線上程式培訓班)，以及另一個是去 AppWorks School (實體程式培訓班)，三個不同路線成為軟體工程師。所以我們也整理了一篇文章，分析該不該去程式培訓班? 以及該選哪一家? 可以點此前往該文章唷～

當然就算不去程式培訓班，網路上的學習資源，在知識含量上，絕對足夠轉職資淺的軟體工程師。因此如果你最後決定完全靠網路資源學習，那麼可以繼續往下讀我們推薦的學習資源。

掌握基礎

如果要往前端工程發展，HTML, CSS, JavaScript 是必學的，在掌握這三個基礎前，可以不用先急著選框架。在前面掌握基礎的階段，推薦不用先花大錢上昂貴的課程 (不論是實體或線上的)，畢竟在還沒真的那麼確定轉職前端工程師是不是自己要走的路，花了大錢最後放棄，那錢會是花的冤枉 (例如這個例子或這個例子)。

網路上有不少免費基礎課程，以下推薦這幾個：

假如你是需要有伴一起學，或是有問題時身邊沒有工程師朋友可以問。那麼或許可以考慮 Alpha Camp 或是六角學院 的基礎課程。雖然會需要一千到三千台幣不等，但比起幾萬塊的課程，是個相當適合試水溫的選擇。

假如英文程度還不錯的話，會推薦 Udemy 這個平台，上面的課程內容豐富，且價位在三百到四百台幣不等。基本上 Udemy 上面熱門的全端開發課程，就知識含量，是完全足夠到初階工程師的需求。Udemy 的好處是有很多不同老師在上面開課，而且還有三十天退款保證，所以等於可以試聽不同的老師，直到找到合拍的。同樣的概念，每個人可能適合不同老師的講解方式。雖然這邊推薦了下面三個我們試聽過後覺得講得不錯的，還是建議大家自己先多聽幾個不同的，再選一個自己喜歡的。

切記，學習程式就想學運動，不能只是讀概念，一定要搭配實作，在未來真的要工作時，才實作得好。當然這邊不是要你真的打造一個完整產品。而是當學 CSS 時，就要真的實際練習切版；當學習 JavaScript 時，就要實際去練習寫一些小邏輯 (例如常見的 Fizz buzz 問題)。

因此有另一類學習資源是頗推薦的，是互動學習類的資源。互動學習類最有名的免費資源莫過於 freeCodeCamp。另外也有 codecademy (基礎課程都免費，進階內容才有收費)。這類課程的好處是，每學習一個概念，就會馬上有實作來驗收對概念的理解。目前 freeCodeCamp 也有簡體中文的版本，會推薦在買任何課之前，先把 freeCodeCamp 的單元都玩過一次吧。

很多人可能會問，是否推薦訂閱類的課程呢? 例如 treehouse、pluralsight 或是 egghead。這點會因人而異。如果要訂閱的話，可能要先確保自己時間充足，不然通常一個月的訂閱費，可以在 Udemy 買一門課，除非能在一個月大量的看內容、實作，不然用訂閱的費用通常會比較高，特別是因為初學階段學的進度通常會稍慢一點。當然假如你能在訂閱平臺找到自己上的很滿意的老師，那即使費用多一點，也算是值得。

實作是最重要的

在有了最基礎的程式概念後，下一步我們推薦專注在「實作」上，這是非常關鍵的一點！如同上面提到，就像運動，看再多理論影片，沒有練習實作，在真正要上場時，通常很難做好。就像球員不能只看影片不練球，工程師也不能只看教學影片不實際寫。

在實作階段，會建議以目標導向出發。你可能會問，是什麼樣的目標呢? 因為要轉職，目標當然是能讓你獲得面試機會。那該如何獲得面試機會呢? 你會需要一個能證明自己有寫前端程式能力的「作品集」。白話來說，就是要真的寫出一個產品。當然還在初學階段不可能寫得多精緻，但如果實作越完整、技術深度越高，那作品能在履歷海中脫穎而出的機會自然也越大。

如果對作品集沒概念，或許可以參考 AppWorks School 的歷屆學員作品集。基本上能做到這樣程度的作品，不用是一個真的是推到市面上的產品，要獲得面試機會不會是太大問題。

在這個階段，會推薦可以同步開始學前端的框架，目前主流的 React 與 Vue，會是求職市場比較熱門的選擇。如果要往歐美找海外工作，React 的機會多了些；而大中華地區 Vue 也是很熱門。此外也有逐漸式微的 Angular，或是正在崛起 Svelte 也是熱門的前端框架；不過這兩個目前有的工作機會相對少了些。

以 React 跟 Vue 來說，官方文件都非常完整，所以推薦可以從那邊開始學。這邊建議了解框架的基礎，就開始實作自己的作品集。因為框架很多東西，其實可以深入到很細節，但假如在這段時間一直鑽研那些細節，導致沒有實作，對「求職」這目標，反而幫助沒那麼大；因為沒有作品，就難以證明自己是即戰力。假如要鑽研框架細節，可以等作品集完成後再說。

官方文件外，要學框架其實不太用在額外花錢買課程。以 React 來說，YouTube 上有的內容已經太足夠了。以下推薦幾個不錯的頻道

這裡特別提一個點，在選學習資源時，如果是 HTML, CSS, JavaScript，假如是三、五年前的內容，多半到現在也都還很適用。不過框架相關的，會推薦能的話，盡量看近兩年的。因為框架通常更新比較快與頻繁。以 React 來說，剛出來那幾年都是 Class Component，搭配生命週期的 componentDidMount 之類的方法；但在 React Hook 出現後，大家都轉成 Function Component 搭配 Hook。可能有一些比較久遠的程式碼還會有 Class Component，但現在要學的話，一定是以 Function Component 為主。

這時如果你還是看以 Class Component 為主的課程，也沒有不好，只是可能會跟不太上趨勢。這在面試時會相對吃虧 (假如被問一句「為什麼不用 Function Component」，若沒有很好的理由回答，那肯定是個大傷)。

選定主題與稍微了解框架後，就是開始實作。在這階段可能會遇到很多挫折。例如想寫某個東西但不知該怎麼寫，或是寫出很多 bugs 的東西。這都是非常常見的，所以不要氣餒。當遇到問題，就善用 Google 或 Stack Overflow。你遇到的問題別人很可能早就問過了，多半是找得到前人的分享的。

進到面試階段

上一段有提到，在實作階段，可以先不用花太多時間在知識深度，以邊做邊學的方式，一邊實作，遇到問題時再查就好。不過當完成作品後，接下來進到面試準備階段，會需要不同的策略。在這個階段，深入技術知識的細節會是有必要的。

會推薦這個階段，開始讀一些深度的技術文章，同時做筆記。更好的方式是，除了做筆記外，還要練習講。很多人其實知道某個知識點，只是因為沒有練習講，導致在面試的時候講得不順，這可能會讓面試官誤以為是對知識點不熟。因此練習講出來 (think aloud) 會是很有幫助的練習。

對於前端工程師來說，要準備的知識包含 HTML, CSS, JavaScript，以及所使用的框架 (例如 React 或 Vue 的知識點)。此外，瀏覽器、網路 (networking) 也是很常會被問的，畢竟前端工程師每天與他們打交道。如果是面試大廠，則會有不小部分是考資料結構與演算法，那部分則是跟其他類別的軟體工程師差不多。

這邊推薦一些有詳細深入知識的前端相關內容，推薦要準備時可以讀這些內容。

英文的內容則會推薦

  • MDN： 幾乎可說是 JavaScript 最完整的資訊來源，有部分有被翻譯成中文
  • javascript.info 也是非常完整的資訊，涵蓋 JavaScript 與瀏覽器
  • web.dev 由 Google 推出的，內有非常多跟網頁相關的技術文
  • Kent Dodds 部落格：有非常多關於 JavaScript 與 React 的精華內容

演算法相關

上面提到如果是面試大公司，那麼前端跟其他職位一樣，會被問到資料結構與演算法。這部分要準備基本上就是多刷 LeetCode。如果要了解資料結構基礎，有許多大學的公開課可以看，推薦從哈佛的 CS50 開始，然後看柏克萊的 CS61B。如果是要看精華摘要，會推薦 CS Dojo 這系列影片，講得很白話。HackerRank 這系列搭配圖解也很推薦。

至於演算法刷題，最推薦的莫過於 NeetCode，是由一位 Google 工程師好心上傳的 LeetCode 講解影片。他的專長是用非常好懂的方式來講解如何解一個題目。對轉職人來說，非常非常友善。

ExplainThis 面試詳解

除了上面推薦的那些資源，ExplainThis 也陸續在我們的面試詳解專區，整理常見的前端考題與擬答。正在這階段的你，歡迎到那邊逛逛。也希望這篇文章對要轉職前端工程師的你有幫助 :)

🧵 如果你想收到最即時的內容更新，可以在 Facebook、Instagram 上追蹤我們
下篇
小心 5 個誤區，成功轉職前端工程師