logo

推荐的转职前端学习资源

2022年2月24日

💎 加入 E+ 成長計畫 如果你喜歡我們的內容，歡迎加入 E+，獲得更多深入的軟體前後端內容

因为先前分享的海外求职文，有陆续收到版有询问转职的相关事宜。 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 个误区，成功转职前端工程师