在学习前端开发的过程中,难免有时会觉得力不从心。学习的资源和工具那么多,但是时间却是很有限,我们应该选择哪些资源和工具,又应该把精力集中在哪些方面呢?

我曾经在“如何在十个月内成功完成转型并拿下第一份程序员工作“一文中,分享了自己的旅程:我从一名毫无相关经验的英语教师成功转型,进入位于马德里的一家初创公司做前端。

在这篇文章中,我想更加深入地跟大家分享自己在学习中用到的各种资料和工具。

我会带着大家分析我上过的课程,介绍各自的优缺点以及上课时我做过的项目。我会把转型期间的几个里程碑事件拿出来详细讲讲,比如如何上手 GitHub,如何打造作品集,以及保持学习动力的方法。

学什么,在哪学?

我坐在电脑前盯着一张太阳的照片,我当时想尖叫,想哭又想笑。这不仅仅是一张太阳的照片而已,这是一张我从美国国家航空航天局(NASA)数据库中扒下来的照片!在漫长的尝试后,我终于学会了如何操作 NASA 的 API 了。我感觉像个顶尖黑客高手,感觉自己马上就能够控制红绿灯了!

实际上呢,我并没有能够控制红绿灯,我到现在也没做到。但我也没想到的是仅仅在几天后,我收到了第一份工作录用函。

1__gmlkF_JqEkxsAlvJCttFg
图片来源:NASA 多媒体数据库

所以,我是如何从零开始,在前端开发领域中找到自己的第一份工作的,要学什么,在哪儿学?

其实在刚开始学习前端时,我很为此焦虑,我的时间那么宝贵,我一定要把时间花在最好的资源上面。在推特上我也经常被问到这个问题,因为初学者总是最关心学什么,在哪学。

但我接下来要说的可能会让人大跌眼镜, 我想说其实在职业转型的整个过程中,这个问题是最不重要的,学什么、在哪儿学,并没有初学者想的那么关键。

不管你决定用什么资源、上什么课程,只要你有恒心有毅力,保持学习的动力,你一定会学到东西而且把它学好。

当然,课程绝对有优劣之分,找到掌握必要技能的方法和路径也至关重要。

但是,如果你半途而废,有再好的课程、再完整的学习路径也无济于事。所以,真正重要的是你找到能让你保持学习动力的方法,而不是决定上什么课程。什么才是最适合你的,这个答案因人而异。

我的建议是,在你一头扎进学习的海洋之前,花点时间了解自己的学习风格,找到适合自己的方法。在下决定之前,不妨多尝试几种不同的课程和学习风格。

我上过的课程

在十个月紧张的学习过程中,我浏览了无数的资源,我从当下的学习需求出发,选择能让我保持兴趣的资源,我在不同的课程之间进进出出,取我所需,我评价自己进度的唯一标准是我究竟学到了什么。

我只选择能让我自由选择学习时间的资源,因为我当时还是全职工作状态,而且我的财务状况也不允许我参加昂贵的训练营或者课程,我只能选择免费或打折的学习资源。在我拿到第一份工作邀请函的时候,我在课程等资源上的花费总计不到一百欧元。

我会把我用到的所有资源都列在一个表单里,并在文末分享链接。

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 也极大地鼓舞了我。

1_9Z1_KtDVDgitSkhMm4JiXw

freeCodeCamp.org

对每个准备上手 Web 开发的朋友,我都首推 freeCodeCamp 作为入门资源。在简单的注册后,任何人都可以立即开始写代码,准备和设置时间成本为零。你很快就会进入状态,迫不及待想要点亮那一个个绿色的勾号。

freeCodeCamp 课程体系覆盖了所有现代 Web 开发的知识点,它的背后是一个活跃的社区,而且资源完全免费!最重要的是,这个组织和它的使命是非常伟大的。

最好的部分是它的项目题。你必须从头开始构建项目,这会花一些时间,但这是你提升技能所需要的练习。当你遇到问题的时候,尽管没有直接的指导,freeCodeCamp 活跃的社区会帮你找到答案。

我为我最爱的“明星”(氢型,非红毯型)制作了一个致敬网页,还制作了个人作品集和用 React 编写的语录自动生成器

Wes Bos 的 JavaScript 30 课程

Wes 是我最喜欢的讲师之一,每次听 Wes 讲课,我都知道我是在获取关于所讲话题最新、最深度的分析和信息。我强烈推荐他的课程。

我主要是上了他的 JavaScript 30 免费课程,毫不夸张地说,这个课程实在是太实用了。我写的每一个项目作业都变成了我日后的代码参考,我会反复的回来看我当时是怎么用代码实现各种操作的,这些课程代码项目陪我走过了技术面试,面试,以及我正式开工的最开始几个星期。就一门课程来说,这已经是我心目中的最高标准了。

我写的项目有时钟电子鼓搜索器

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 课程标准非常高,授课老师都是行内精英,有着坚实的知识基础和实打实的行业经验。课程项目有难度,有趣味性,而且导师会对学生的项目做出非常有价值的梳理和指导。

毋庸置疑的是,课程最吸引我的一点是它背后这个活跃、积极的社区。在选择资源的时候,社区文化应该是首要考虑的要素,因为你会发现,你在同学身上学到的东西远比你在老师身上学到的东西多。

Pixel Art Maker

我在 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。教,是最好的学,不管你掌握的知识有多少,你总能帮助别人学点什么。

建立个人作品集

image-4

一个活跃的 GitHub 库也是不够的,你还需要作品集来充分展示自己的编程技能。建立网站本身也是一个很好的锻炼机会,就算你目前没有项目,你也应该先建站,然后在你写项目的过程中逐渐地把作品添加进去。

我很早就建站作为个人作品集的想法,我当时觉得自己离真正有能力建立网站还有很大距离,所以我先是在一张纸上画下了心目中想要的网站的样子。实际上呢,我很快就开始着手建站了,开始的早是件好事,因为初稿总不是完美的。

在当时,这是我做过的最复杂的从零开始的项目,推动我去深入学习,对我帮助极大。我花了无数的时间翻阅 MDN 文档和 Stack Overflow 论坛,一边做网站,一边不断搜索实现一些我不懂的操作的方法。我曾经花了若干小时去排查问题,最后发现就是一个小小的拼写错误,但在这个过程中,我学习如何面对挫折。

学习编程的精髓其实就在这里。这些技能是我每天工作中都会用到的:如何搜索,如何排查,如何解决问题,如何面对挫折,都是程序员的必修课。

网站建好的时候我特别激动 —— 这是我的创造!—— 这网站完完全全就是按照我想要的样子建好的!但是,我很快就意识到,作为一个作品集,这个网站完全不达标。所以第二天,我深呼了一口气,开始推翻重来。这次我决定建立一个简单的网站,强调功能性,能够跨越不同设备正常显示,用来展示作品和一点点的个人信息,并不需要做的花里胡哨。

这正好引出了下面我要说的。

独立开发

image

独立自己开发项目让很多初学者望而却步,但我的经验告诉我,就算项目没有做的很好,也对编程学习很有帮助。我独立编写的两个作品为我打下了坚实的编程基础,过程中虽然遇到很多挫折和问题,在我刚开始工作的时候这些挫折中收获的经验变成了无价之宝。

我绝不否认教程和例子实践的价值,但我想强调独立开发的价值:自己写项目的时候,我被推动者去思考添加新的功能,如何优化,如何突破自己。

做什么项目不重要,重要的是你的收获。举个例子,我做了一个很简单的温度换算器,虽然不是什么很炫的项目,但是我的的确确得从零开始,把所有点都落实清楚,当我完成这个换算器并测试正常时,那种自豪感油然而生。

播客、文章、对话、活动

初学者的学习之路漫漫,有大块的主动学习时间也是不够的,因此,我把平时的碎片时间也调用起来,创造更多机会去获取信息,更深入的去了解程序员的世界。

阅读文章、看视频、听播客,都是我利用碎片时间的方式,让我在语法语义之外对编程概念有更深入的理解。

线下活动也是很好的资源,我在住的小城市组织了一个线下编程小组活动,如果你有类似的机会千万不要害怕。相信我,没有人会在活动上拦住你,逼着你向他们证明自己的资历。

我最喜欢的学习资源(部分):

  • 播客: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
  • 其他相关油管播主,我把我最喜欢的几个列出来放在这里

祝你好运!

image-3

学习之路紧张充实,避免“透支”非常重要。因此,我很重视休息、饮食、锻炼。当我在无法负荷的边缘时,我会给自己放个半天或者一天的假。

在这十个月的时间里,我放弃了很多,也投入了很多,但这过程中的每一分每一秒都很值,我对我的新职业 —— 前端工程师 —— 很满意。为转型付出的努力,我丝毫不后悔。

请谨记,每一个人学习的过程和遇到的问题都不尽相同,请不要对自己太苛刻,只要保持前进的方向就可以了。

原文链接:The tools and resources that landed me a front-end developer job,作者:Syk Houdeib