在学习前端开发的过程中，难免有时会觉得力不从心。学习的资源和工具那么多，但是时间却是很有限，我们应该选择哪些资源和工具，又应该把精力集中在哪些方面呢？
我曾经在“如何在十个月内成功完成转型并拿下第一份程序员工作“一文中，分享了自己的旅程：我从一名毫无相关经验的英语教师成功转型，进入位于马德里的一家初创公司做前端。
在这篇文章中，我想更加深入地跟大家分享自己在学习中用到的各种资料和工具。
我会带着大家分析我上过的课程，介绍各自的优缺点以及上课时我做过的项目。我会把转型期间的几个里程碑事件拿出来详细讲讲，比如如何上手 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