认识达内从这里开始

今天小编用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。

进入正题之前先交代一下我和这张路线图的背景。过去5年我一直在进行全栈开发，目前是tajawal的首席工程师（我得有很多头衔）。关注趋势并且让其他开发者训练得当不仅是我的爱好也是我的工作职责。在如何跟上形势方面我发现有很多新手（也包括一些有经验的）都感到很困惑。2017年的时候我有很多朋友都发邮件给我寻求指导，他们想知道做这一行的话应该学些什么。所以为了避免自己老是要碰到这样的麻烦同时也是为了帮助别人，我决定一劳永逸准备这些图表，这样只要有人问我时就把这些图表的链接发给他们。所以这些图表就是这么诞生的。

一开始他们只是想要一些工具的推荐，但是昨天我决定给他们一份更加结构化一点的东西，增加了细节并且设计成步骤的形式以便你可以更好地理解该选择什么，按照什么样的次序。

同时我还在制作后端和DevOps部分的路线图，但是前端已经做好了，你可以看看下面。

在详细介绍这份路线图的不同部分之前，我先花点时间讲讲我的免责声明：

这份路线图的目的是让你了解一下整体情况并且提供指导，如果你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦的心态去学东西。你应该对为什么一项工具在一些情况下更适合有基本了解，并且要记住时髦的东西从来都不意味着就是适合你要处理的工作的。

你首先想要去做的第一件事是学习一些基础，包括学习HTML、CSS的一点基础知识，以及熟悉一下JavaScript的语法。

学习HTML基础

HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：

• 学习HTML基础，了解如何编写语义HTML

• 理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型）

任务——一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个

网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。

学点CSS

现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。

• 首先要做的是学习语法，熟悉常见的CSS属性。

• 了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局

• 一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。

任务——一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话，现在是时候应用CSS来让它的样子看起来像实际的Github资料页面一样了。前面的那5个页面都要拿来试一下。

学习JavaScript基础

JavaScript能让你的HTML页面互动性更强。比方说你在网站上看过的所有那些幻灯片、弹出窗口以及广播通知，以及在没有重载页面的情况下重载页面的特定部分，这些都是用JavaScript做的。在这一步中，你将会学习JavaScript的基础来为后面的旅程做好准备——

• 学习这门语言的语法和基本机构。

• 学习如何用JavaScript来操纵DOM，比方说如何从页面移除一些元素，如何增加一些元素，增加和移除类，通过JavaScript应用CSS样式等。

• 完成之后再学习和理解诸如范围、闭包、变量提升以及事件冒泡这样的主题。

• 学习如何用XHR或者Ajax生成HTTP调用。Ajax可以让你在不需要重载网页的情况下执行特定动作。

• 学完之后接下来就要了解ES6+的所有新特性。ES6只是JavaScript的一个版本，里面给这门语言引入了大量有趣的更新，比如类、定义变量的多种方式，给数组增加了新的方法，字符串连接等。你们在网上找到的大部分文章都会用Babel来解析ES6，这其实是个转译器，可以将这门新的JavaScript转换为旧的JavaScript，因为有一些旧版的浏览器不支持新版的JS。不过现在先不用担心Babel，只需要了解相关概念，然后用到任何一种支持ES6的新版浏览器上来练习一下就行。我们后面还会再继续讲ES6的。

现在你应该已经感觉到东西像是那么一回事了。如果你按照上面的步骤做下来的话应该鼓励一下。这些是你刚刚学到的一些重要的东西。

我应该学jQuery吗？

曾经有一段时间每个人都对jQuery疯狂，也有充分的理由；这是一个强大的库，在JavaScript基础上提供了一个封装，让你可以用兼容浏览器的方式执行任何东西。不过那些日子已经一去不复返，现在新项目用它已经不是很多了，但是仍然还有人在用。你不是一定要学它，但是这玩意儿的确很容易，如果你想看看的话还是有好处的。

练习时间

我已经说过很多次但是还是要再说一次，不练习的话你学不到任何东西。你可能随时都会感觉自己已经理解了但是如果不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽可能多地去上手实践。

继续做些响应式网站，用JavaScript增加交互性。你可以添加任何感兴趣的现有的网页上去，但记住要利用上目前学到的一切。

一旦你制作出了一些网站，接下来就是开始做真正的东西了。你可以到github上面找一些项目打开某些开源项目的pull请求。以下就是一些可以去尝试的pull请求：

• 增强UI，把任何演示页做成响应式或者改进设计

• 看看有什么开放的issue是你能够解决的

• 重构任何你认为自己可以改进的代码

就像这个repo一样，告诉他们你正在学习让他们就你的PR以及可以如何加以改进提供反馈。

尽管我愿意推荐这个Github库，但是这需要了解一点git的知识，所以这是可选的。你不必做这个但如果你做了的话，你会发现真的很有用——只要你开口你会惊讶地发现居然有那么多人愿意帮助你。那你也可以找到很多有关git的免费资源，比如试试这个。

鼓励自己一下

现在你已经学习了必要的基础了。如果一切都学得不错的话，你就可以去找份自由职业工作或者也许可以去试试能不能找份全职了。然而，如果你想有一份更好的职业的话，现在还不能停止脚步，因为还有很长一段路要走。

包管理器

在此之前，如果你要用到一些外部库比如插件或者任何外部的桌面小部件的话，你得手工下载JavaScript和CSS文件并且将它们放到项目里面，然后那些库或者插件发布新版本的时候，你又得下载更新的文件再放到你的项目里面，这是极其麻烦的事情。包管理器可以干掉这种麻烦。它们帮助你把外部库和插件放到你的项目里面，这样你就不用关心手工复制库或者费事地在它们发布新版时更新文件的事情了。现在有yarn和npm了。这两个几乎是一样的，都只是实现，你可以任选一个，一旦学会了使用其中一个，另一个自然也不成问题。

现在学以致用吧

在对包管理器有了基本了解之后，你就可以去安装一些外部库到你前面制作的一些网页上了，比如安装一些提示插件，当用户点击某个按钮时显示提示信息，或者创建一个登录表单用一些表单验证库进行表单验证，或者试试不同的选项看看如何安装不同的版本。