在学习前端开发的过程中,难免有时会觉得力不从心。学习的资源和工具那么多,但是时间却是很有限,我们应该选择哪些资源和工具,又应该把精力集中在哪些方面呢?
我曾经在“如何在十个月内成功完成转型并拿下第一份程序员工作“一文中,分享了自己的旅程:我从一名毫无相关经验的英语教师成功转型,进入位于马德里的一家初创公司做前端。
在这篇文章中,我想更加深入地跟大家分享自己在学习中用到的各种资料和工具。
我会带着大家分析我上过的课程,介绍各自的优缺点以及上课时我做过的项目。我会把转型期间的几个里程碑事件拿出来详细讲讲,比如如何上手 GitHub,如何打造作品集,以及保持学习动力的方法。
学什么,在哪学?
我坐在电脑前盯着一张太阳的照片,我当时想尖叫,想哭又想笑。这不仅仅是一张太阳的照片而已,这是一张我从美国国家航空航天局(NASA)数据库中扒下来的照片!在漫长的尝试后,我终于学会了如何操作 NASA 的 API 了。我感觉像个顶尖黑客高手,感觉自己马上就能够控制红绿灯了!
实际上呢,我并没有能够控制红绿灯,我到现在也没做到。但我也没想到的是仅仅在几天后,我收到了第一份工作录用函。

所以,我是如何从零开始,在前端开发领域中找到自己的第一份工作的,要学什么,在哪儿学?
其实在刚开始学习前端时,我很为此焦虑,我的时间那么宝贵,我一定要把时间花在最好的资源上面。在推特上我也经常被问到这个问题,因为初学者总是最关心学什么,在哪学。
但我接下来要说的可能会让人大跌眼镜, 我想说其实在职业转型的整个过程中,这个问题是最不重要的,学什么、在哪儿学,并没有初学者想的那么关键。
不管你决定用什么资源、上什么课程,只要你有恒心有毅力,保持学习的动力,你一定会学到东西而且把它学好。
当然,课程绝对有优劣之分,找到掌握必要技能的方法和路径也至关重要。
但是,如果你半途而废,有再好的课程、再完整的学习路径也无济于事。所以,真正重要的是你找到能让你保持学习动力的方法,而不是决定上什么课程。什么才是最适合你的,这个答案因人而异。
我的建议是,在你一头扎进学习的海洋之前,花点时间了解自己的学习风格,找到适合自己的方法。在下决定之前,不妨多尝试几种不同的课程和学习风格。
我上过的课程
在十个月紧张的学习过程中,我浏览了无数的资源,我从当下的学习需求出发,选择能让我保持兴趣的资源,我在不同的课程之间进进出出,取我所需,我评价自己进度的唯一标准是我究竟学到了什么。
我只选择能让我自由选择学习时间的资源,因为我当时还是全职工作状态,而且我的财务状况也不允许我参加昂贵的训练营或者课程,我只能选择免费或打折的学习资源。在我拿到第一份工作邀请函的时候,我在课程等资源上的花费总计不到一百欧元。
我会把我用到的所有资源都列在一个表单里,并在文末分享链接。
YouTube 先行
Jake Wright 的“12 分钟内学会 HTML”教程视频是我最早的 Web 开发启蒙,然后就是他的“12 分钟内学会 CSS”。我在看完后创建了自己的第一个网页,总共下来花了很少的时间,很激励人。这套视频课程虽然很基础,甚至有点儿过时,但是对于零基础的小白来说再合适不过。
Traversy Media 和 LevelUpTuts 出品的教学视频我也经常看。
Colt Steele 的 The Web Developer Bootcamp (全栈 Web 开发训练营)课程
这是 Udemy 上最受欢迎的 Web 开发课程之一,而且经常打折。Colt 的教学水平很不错,适合小白,会带着零基础的你慢慢的打基础,到最后你会完成一系列好看的项目作品,以供展示。
这套课程涉猎范围很广,但如果你只对前端开发感兴趣,可能这套课程会有点超纲。课程采用的“照着写代码”的教学风格对初学者是有好处的,但对于初学者也要学习的解决问题的思维,这套课程却不怎么鼓励培养。
我制作了 RGB 颜色游戏和 Patatap Clone 两个项目,后来在面试的时候,这两个项目变成了很好的话题点。另外,能在学习早期就做出两个网页 App 也极大地鼓舞了我。

freeCodeCamp.org
对每个准备上手 Web 开发的朋友,我都首推 freeCodeCamp 作为入门资源。在简单的注册后,任何人都可以立即开始写代码,准备和设置时间成本为零。你很快就会进入状态,迫不及待想要点亮那一个个绿色的勾号。
freeCodeCamp 课程体系覆盖了所有现代 Web 开发的知识点,它的背后是一个活跃的社区,而且资源完全免费!最重要的是,这个组织和它的使命是非常伟大的。
最好的部分是它的项目题。你必须从头开始构建项目,这会花一些时间,但这是你提升技能所需要的练习。当你遇到问题的时候,尽管没有直接的指导,freeCodeCamp 活跃的社区会帮你找到答案。
我为我最爱的“明星”(氢型,非红毯型)制作了一个致敬网页,还制作了个人作品集和用 React 编写的语录自动生成器。
Wes Bos 的 JavaScript 30 课程
Wes 是我最喜欢的讲师之一,每次听 Wes 讲课,我都知道我是在获取关于所讲话题最新、最深度的分析和信息。我强烈推荐他的课程。
我主要是上了他的 JavaScript 30 免费课程,毫不夸张地说,这个课程实在是太实用了。我写的每一个项目作业都变成了我日后的代码参考,我会反复的回来看我当时是怎么用代码实现各种操作的,这些课程代码项目陪我走过了技术面试,面试,以及我正式开工的最开始几个星期。就一门课程来说,这已经是我心目中的最高标准了。

Lynda.com
在网站免费试用期内,我选择了一些课程,很喜欢 Christina Truong 的教学,她的课程覆盖高级 CSS、工作流工具、网站上线等方面,我获益不少。Ray Villalobos 的课程也帮助我提升了 Git 方面的技能。
Lynda.com 的课程质量不错,但是在 Web 开发方面的课程目录并不是很全很专,内容连贯性方面也略逊于其他的专门平台。
Treehouse
说到专门平台,就不得不提到 Treehouse。我只是在免费期间浏览试用了一下,很喜欢Treehouse 课程的细分和深度。
Michael Hartl 的命令行(Learn Enough Command Line to Be Dangerous)课程
简单、简明的课程,让命令行神秘不再,让我很快就上手基本的命令行操作。
Cassidy Williams 的 JavaScript and React for Developers 课程
Cassidy 知识广博,教学风格轻松愉快,她的课程具有足够的难度,逼迫着我去钻研更深层次的概念。我是在十个月的学习期结尾、快要开始求职的时候开始上这门课程的。
在这门课程中,我学会了如何使用 API 来调用并展示返还数据,我写了一个 GitHub 用户搜索 App,是我编程学习生涯中的高点,然后我还写了文章开头提到的那个 NASA 多媒体库搜索 App。
由于收到了面试的通知,我不得不暂停 NASA 多媒体库搜索 App 的开发,去完成面试布置的一个挑战作业,而这个挑战作业覆盖的内容跟我在课程内学过的东西基本一样。
我完成了挑战作业,成功拿下了 offer。
Udacity 的 Front-End Web Developer Nanodegree (FEND) 前端开发微专业
在我开始学习前端开发几个月后,我拿到了 Udacity 前端开发课程的谷歌奖学金,不久后,我通过了第二阶段的选拔,很幸运的拿到了 Udacity 前端开发微专业(FEND)项目奖学金。
我得强调一下,就算你没有拿到奖学金,或者没有资金去上这个微专业的课程,也完全不会影响你成功的几率。虽然我在这个课程中获益良多,但这不是我成功的决定性因素,我在完成 FEND 的几个月前就已经拿下工作了。
其实在拿到奖学金的时候我心里很清楚,对于职业转型我是很认真的。哪怕没拿到奖学金,我也打算在学习资源上投入更多金钱,比如购买 Treehouse 课程或者 Udacity 的按月订阅服务等。
Udacity 的 FEND 课程标准非常高,授课老师都是行内精英,有着坚实的知识基础和实打实的行业经验。课程项目有难度,有趣味性,而且导师会对学生的项目做出非常有价值的梳理和指导。
毋庸置疑的是,课程最吸引我的一点是它背后这个活跃、积极的社区。在选择资源的时候,社区文化应该是首要考虑的要素,因为你会发现,你在同学身上学到的东西远比你在老师身上学到的东西多。

我在 FEND 课程里完成了很多很好的项目,像素艺术只是其中的一个,也称得上是我在当时完成过最复杂的项目了。在不断拓展这个项目的功能的过程中,我得到了充分的锻炼,让我像真正的工程师一样思考问题。
跟踪学习进度
如果你想要更加清晰的看到这十个月的时间里我到底做了什么,你可以访问我的 GitHub 项目 My-Learning-Tracker,我把我上过的所有课程和相关链接都放上去了。如果你想要创建自己的学习进度跟踪项目,你也可以复刻 (fork) 这个项目到你自己的GitHub 库里。
超越课程:成功的基石
教程再好,没有其他方面的资源相助,只是上课也是远远不够的。你应该给课程以外的资源同样程度的重视。
以下,我列举一些对我转型很有帮助的资源。
保持动力
动力是首要条件。没有动力,就没有一切。我有三个锦囊帮助我渡过难关,保持动力。
第一、明确的目标。我有一个目标:就是在一年内加入初创公司,成为一名前端开发工程师。有一个明确的目标让我在自我怀疑和缺乏动力时能够保持专注,走出低谷。
第二、亲友团的支持。当时,我和我的爱人还有我一个很好的朋友都在学习,身边有人能够感同身受,一起经历着一样的事情,能够一起想办法,互相督促,互相鼓励,是很有帮助的。
第三、网络社区的支持。我从社区里的人身上学到了很多东西,而且收获了许多鼓励和支持。
保持动力绝非易事,关键在于寻找不断成长的感觉,不管项目大小都要坚持写代码,而且要把握适合自己的学习方法,不要走过去失败的老路。
社交网络
推特让我能够接触到很多专业人士和跟我一样的初学者,是我非常推荐的工具。推特帮助我掌握最新的行业信息和学习资料,帮助我拓展圈子,最后还帮到我找到工作。
我的推特活动以 freeCodeCamp、#100DaysOfCode 和 #CodeNewbie 为中心,在我编程学习路上的每一步,这些活跃的推特社区都给了我持续的支持。其中,Alexander Kallaway 的 #100DaysOfCode 背后的想法非常简单,但是非常有效:每天坚持编程一小时,并且把每天的进度都挂到网上,监督自己,激励他人。
对于那些曾经鼓励过我、监督过我的社区朋友们,在这里我要特别感谢你们,感谢你们陪我走过这段旅程。
GitHub
GitHub 是每一个入门编程的人必定很快就接触到的,对于小白来说,这是一块陌生的、甚至有点让人害怕的领地,充斥着开源、协作项目等字样,感觉跟新手完全不沾边,但相信我,GitHub 和你息息相关。
GitHub 就是你工作的基石,作为程序员,你会经常用到 Git 和 Git 服务器,其实用多几次后你就会发现 Git 很好上手。对于我来说,在过了最开始的懵懂期后,GitHub 成为我编程学习的中心点,我所有的代码都在 GitHub 上,自然而然的 GitHub 就变成了我的作品集,我利用 GitHub Pages 做了一个网页用来放置我的项目作品。除此以外,我用 GitHub 跟踪我的学习进度,用它来跟其他人协作写项目。
GitHub 对我来说尤其重要,因为像我这样没有任何相关经验的小白,GitHub 是我展示技能的唯一渠道,绝大多数的雇主都会先看 GitHub 仓库,因为在上面可以很清晰地看到我能做什么、学过什么。我会确保我的 GitHub 仓库里有着丰富的项目经验和详细的文字说明。
在学习路上有一件让我自豪的事也跟 GitHub 有关。我在上 Udacity 课程的时候,发现很多同学都害怕 GitHub,所以我就做了一个简易教程叫 Contribute-To-This-Project,帮助我的同学一步步学习如何操作 GitHub。教,是最好的学,不管你掌握的知识有多少,你总能帮助别人学点什么。
建立个人作品集

一个活跃的 GitHub 库也是不够的,你还需要作品集来充分展示自己的编程技能。建立网站本身也是一个很好的锻炼机会,就算你目前没有项目,你也应该先建站,然后在你写项目的过程中逐渐地把作品添加进去。
我很早就建站作为个人作品集的想法,我当时觉得自己离真正有能力建立网站还有很大距离,所以我先是在一张纸上画下了心目中想要的网站的样子。实际上呢,我很快就开始着手建站了,开始的早是件好事,因为初稿总不是完美的。
在当时,这是我做过的最复杂的从零开始的项目,推动我去深入学习,对我帮助极大。我花了无数的时间翻阅 MDN 文档和 Stack Overflow 论坛,一边做网站,一边不断搜索实现一些我不懂的操作的方法。我曾经花了若干小时去排查问题,最后发现就是一个小小的拼写错误,但在这个过程中,我学习如何面对挫折。
学习编程的精髓其实就在这里。这些技能是我每天工作中都会用到的:如何搜索,如何排查,如何解决问题,如何面对挫折,都是程序员的必修课。
网站建好的时候我特别激动 —— 这是我的创造!—— 这网站完完全全就是按照我想要的样子建好的!但是,我很快就意识到,作为一个作品集,这个网站完全不达标。所以第二天,我深呼了一口气,开始推翻重来。这次我决定建立一个简单的网站,强调功能性,能够跨越不同设备正常显示,用来展示作品和一点点的个人信息,并不需要做的花里胡哨。
这正好引出了下面我要说的。
独立开发

独立自己开发项目让很多初学者望而却步,但我的经验告诉我,就算项目没有做的很好,也对编程学习很有帮助。我独立编写的两个作品为我打下了坚实的编程基础,过程中虽然遇到很多挫折和问题,在我刚开始工作的时候这些挫折中收获的经验变成了无价之宝。
我绝不否认教程和例子实践的价值,但我想强调独立开发的价值:自己写项目的时候,我被推动者去思考添加新的功能,如何优化,如何突破自己。
做什么项目不重要,重要的是你的收获。举个例子,我做了一个很简单的温度换算器,虽然不是什么很炫的项目,但是我的的确确得从零开始,把所有点都落实清楚,当我完成这个换算器并测试正常时,那种自豪感油然而生。
播客、文章、对话、活动
初学者的学习之路漫漫,有大块的主动学习时间也是不够的,因此,我把平时的碎片时间也调用起来,创造更多机会去获取信息,更深入的去了解程序员的世界。
阅读文章、看视频、听播客,都是我利用碎片时间的方式,让我在语法语义之外对编程概念有更深入的理解。
线下活动也是很好的资源,我在住的小城市组织了一个线下编程小组活动,如果你有类似的机会千万不要害怕。相信我,没有人会在活动上拦住你,逼着你向他们证明自己的资历。
我最喜欢的学习资源(部分):
- 播客:Command Line Heroes — Red Hat Podcast
- 播客:Base.cs — Computer science podcast with Vaidehi Joshi
- 播客:Syntax.fm — Wes Bos and Scott Tolinski podcast
- 播客:CodeNewbie — Saron Yitbarek podcast
- 文章:FreeCodeCamp Medium publication
- 文章:Hacker Noon articles
- CSS 文章:Smashing Magazine — CSS articles
- CSS 文章:CSS-Tricks
- 邮箱订阅:JavaScript Weekly and Frontend Focus
- 油管视频系列:Crash Course: Computer Science
- 油管视频:CS50 — YouTube videos of CS Harvard lectures
- 其他相关油管播主,我把我最喜欢的几个列出来放在这里
祝你好运!

学习之路紧张充实,避免“透支”非常重要。因此,我很重视休息、饮食、锻炼。当我在无法负荷的边缘时,我会给自己放个半天或者一天的假。
在这十个月的时间里,我放弃了很多,也投入了很多,但这过程中的每一分每一秒都很值,我对我的新职业 —— 前端工程师 —— 很满意。为转型付出的努力,我丝毫不后悔。
请谨记,每一个人学习的过程和遇到的问题都不尽相同,请不要对自己太苛刻,只要保持前进的方向就可以了。
原文链接:The tools and resources that landed me a front-end developer job,作者:Syk Houdeib