如何学习前端？看这篇就够了

引子

作为一个前端工作多年的老鸟，见过各种各样的萌新入行前端，正好有些时间，把心里的一些话写一写，实在是不吐不快。

我见过入职之后不明白什么是前端是做什么的“中级前端”。

我见过工作了两年不会写页面的“初级前端”。

我见过不知道什么是HTTP协议，只会用jQuery发送AJAX的“高级前端”。

…

讲真的，我不明白他们是怎么个情况，所以我希望每一个入行前端的小伙伴在学习前端之前能看一看这篇文章，可以帮助少走很多弯路。当初自己摸索没有人带的痛苦，给我遗留了很大的问题，也浪费了很多的时间，当然好处就是自己学到的印象非常深刻就是了！

点题

如何学习前端？

正确的说法应该是如何学习？

不论学习任何内容，首先要做的就是了解这是个什么东西，然后再确定这个东西是干什么用的，最后才是这个东西怎么使用。

就好比你玩英雄联盟，你要先确定这是一个游戏（这个游戏里面有叫做英雄的角色，可以互相打来打去），然后再确定这个游戏的玩法有哪些（比如极地大乱斗，比如召唤师峡谷，比如克隆模式），最后才是了解这个游戏的每一个英雄的技能和释放技能的顺序及技巧。

回到前端

第一点：前端是什么？

关于这一点网上的说法有很多，很笼统，比如：一切与用户直接接触的都可以叫做前端。这个说法很正确，没有半点毛病，但是对于一个新手来说你告诉他这个他能不晕？什么叫与用户直接接触？有哪些？就算展开了讲，小白同学能不晕？对于知识点，尤其是新手来说，简单明确是最重要的，所以我对于新手的回答就是： 前端就是网站。至于微信小程序、手机app等他以后学完了再告诉他也不迟嘛。

第二点：前端是干什么的？

基于前面的结论，前端就是网站。那么这个问题就可以转化成：网站是干什么的？小白同学再怎么没经验，没写过网站也用过网站，所以这个问题就相对好理解。网站就是用来展示信息的。此时，小白同学就明白了，当他学完前端之后，要做的就是这方面的内容。

第三点：前端是怎么写出来的？

一个网站是如何写出来的？首先我们要明白网站的组成，一个网站显示的内容有很多，以淘宝为例，我们可以引导小白同学让他看这个网站，点这里显示首页、点这里显示商品列表、点这里显示商品的详细信息、点这里加入购物车、点这里结算、点这里…

至此我们可以引导出"一个网站是由多个网页组成"这样的结论

然后我们明确，只要写出一个网页，就能够写出多个网页，就能够完成一个网站。

接下来让我们把目标转向：如何写好一个网页。

准备

让我们先把工具准备好，工欲善其事必先利其器。接下来是我们的工具清单：

一台完全属于你自己的电脑
最好是新买一台电脑，或者找一台旧电脑重新装一遍系统，如果非要使用别人的电脑，请准备好迎接各种有可能出现的"意外情况"吧
一具你自己的健康的身体
好的身体是做一切事情的本钱，本钱都没有，万事休提。
每天充足的学习时间
碎片化学习会让人精神分散，不容易集中。记住了，集中力量才能办大事。精神力量也是力量。
一套完整的教学视频
现在各大网站上都有免费的教学视频。找一个口碑好，规模大，师资力量强的机构的免费视频。跟着学起来。这里推荐千锋教育的浠浠呀老师视频课程,人美声甜，造型百变，内容干货，强力推荐！

路线

HTML

想要搭建一个页面，就需要知道页面的组成，经过简单的学习你将会了解到HTML、CSS、JS。

HTML部分最为简单，大概1~2天就可以学完主要知识。剩下拿出一天来练习即可。

学习方式：这个阶段没有别的花哨的，只能水磨工夫，将每一个标签，属性记住。

合格标准：能够熟练使用各种标签，写出一个整体的页面结构且标签使用合理即可。

学习时长：3~4天。

CSS

当你学完了HTML之后，会发现页面只有内容，干巴巴的。于是你会开始CSS的学习，大体内容就是选择器加样式，外加一部分动画。这段时间大概会花费你3周左右。

学习方式：同上，记住每一个常见的CSS属性名和属性值。

合格标准：能够熟练使用各种布局，自己完成一个静态页面，且标签语义化。

学习时长：3周左右。

JavaScript

当你学完了CSS，看着你做出来的页面，发现有内容又漂亮，但是还缺点什么。于是你开始学习JavaScript。从数据类型、变量、语句、判定、循环、函数、作用域、数组、对象、定时器、延时器、DOM操作、事件、面向对象、AJAX、设计模式、闭包、垃圾回收机制、ES5、ES6、ES7、ES8…等等。

这里要提醒一下，JavaScript是整个前端体系的重中之重。务必把基础夯实，后续才有更进一步的可能，否则很可能成为只会使用框架的程序员。

学习方式：这个阶段与前两个阶段不同，重点在于逻辑思维能力。多听一听，多看一看别人对于代码是如何理解的。多读代码，了解代码的执行顺序。重复是技能之母。

也可以读一读以下书籍，会对你有很大的帮助。

JavaScript权威指南(第6版)
Head First HTML5 Programming（中文版）
你不知道的JavaScript上/中/下
JavaScript高级程序设计（第4版）

合格标准：熟练编写业务代码，封装简单的库和函数，能修改第三方库或者函数的源码。

学习时长：1.5到2个月。

至此，HTML、CSS、JavaScript已经全部学习完毕。如果有后端支持你甚至可以开始写一个完整的网站了。

不过，现在的前端开发早已经不是把代码写完就可以跑的“远古时代”。所以接下来进入一个新的世界。

前端工程化

代码已经学习完了，现在要面临的就是整个项目，所以接下来的话题就是“前端工程化”

Gulp、Grunt、Fis、WebPack等工具及插件。

以及与CSS配套的Sass、Less。

与JS配套的TypeScript、Babel。

负责规范代码的ESlint。

这些都是现代化开发必不可少的东西

这些工具的学习视情况而定。

学习方式：重点在于掌握使用方式。并了解解决了用户的什么痛点。

预估学习时长：1个月左右。

框架

框架的学习是重中之重，可以说拿到多少工资的上限就靠它了。

现阶段的两大主流框架是Vue和React。

这里推荐先学习Vue，后学习React。因为Vue上手简单，使用方便，开发快速。

主要内容有：

1. Vue思想（MVVM、单向数据流等）
2. Vue基础（基础使用及各种指令）
3. Vue高级（组件、通信、自定义指令、路由等）
4. 脚手架（单文件组件开发模式、Vuex、SSR等）

学习方式：重点在于掌握使用方式,在掌握了使用方式的基础之上，尝试了解并思考代码为何会这样运行，框架为何会如此设计。

预计学习时长：1个月左右。

总结

到目前为止，我们已经学习了前端的绝大部分内容。可以这么说，学习了上面的内容之后就可以去找工作了。前提是多写几个项目，最好是复杂一点的。如果你是在一线城市(北上广深)或者新一线城市(杭成西南武)，找一个15K左右或者12K左右的工作不成问题。如果是其它城市，或许会比这要低一点点。

好了，小伙伴们，前端路漫漫，有缘自会相见，我们来日方长，祝大家早日找到一个适合自己的工作。