推荐的转职前端学习资源

2022年2月24日

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

因为先前分享的海外求职文,有陆续收到版有询问转职的相关事宜。 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 上追蹤我們