推薦的轉職前端學習資源

2022年2月24日

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

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

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

不同階段適合不同資源

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

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

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

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

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

掌握基礎

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

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

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

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

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

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

很多人可能會問,是否推薦訂閱類的課程呢? 例如 treehousepluralsight 或是 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 也陸續在我們的面試詳解專區,整理常見的前端考題與擬答。正在這階段的你,歡迎到那邊逛逛。也希望這篇文章對要轉職前端工程師的你有幫助 :)

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們