新手如何系统地学习前端开发

借用一段话来开头：古代小说里，高手如云，人们为了生存，要掌握一套保命武功。其中，我最喜欢的是轻功，毕竟三十六计走为上策（狡诈的一笑）。说到底，武功和技术一样，都是为了生存。问题是，现实一点来说，一个武者，很难掌握所有的武功秘籍，因为臣妾做不到啊；所以如果有一种武功，能够远攻和近攻，能逃跑能单挑，那就极好了。

玩“农药”也一样，我发现英雄们各有优缺点，但你又不可能什么英雄都练，因为臣妾也做不到啊，毕竟上场时就一个英雄，所以就需要选择，我选择的是吕布和赵云，他俩在游戏故事设定中是情敌，其实貂蝉喜欢的是赵云，我之所以选这两个情敌成为基友，是因为符文一样，这点很重要，五级符文真mde难攒，吕布和赵云战斗力都很棒，我基本就练这两个，现在的级别是永久钻石，虽然不是最厉害的，但在王者的世界，确有一席之地。

技术也是一样，我通过一套技术，每天用这套技术开发，不断磨练，好过啥都学，啥都不深入，因为之所以深入，是因为你不断去用，很多时候，一个技术名出来，就买书学，其实很傻很天真，因为技术是手段，目的是解决开发问题，如果用不上，就毫无意义。明白了学习技术的意义，我们来扯扯怎么系统的来学习前端。

学习前端是个很庞杂的工程。一定要学会分析，每个阶段怎样去学习不能一股脑的看别人是怎么样你就怎么样。

把前端学习分为三部分来学习：

一、HTML和CSS

注重学习的是布局方式，锻炼基本思维。

1. HTML基础，CSS基础，CSS核心属性

2. CSS样式层叠，继承，盒模型

3. 容器，溢出及元素类型

4. 浏览器兼容与宽高自适应

5. 定位，锚点与透明

6. 图片整合

7. 表格，CSS属性与滤镜

8. HTML5新增的元素与属性

9. 表单域增强元素

10. CSS3选择器

11. 文字字体相关样式

12. CSS3位移与变形处理

13. CSS3 2D转换与过度动画

14. CSS3 3D转换与关键帧动画

15. 弹性盒模型

16. 媒体查询

17. 响应式设计

开始对于有些人来说，可能有点儿困难，但随着不断的重复性的练习，和对常用布局结构的熟悉和常用CSS属性的熟悉，慢慢就好了。这部分知识贵在坚持。

二、JavaScript

主要锻炼的是逻辑能力，和对基础知识的掌握程度。千万不要想当然觉得自己会了，结果过几天就什么都忘记。写一个效果，要看之前代码好几遍。

1. 基本语法、循环语句、函数与数组

2. String与Date、BOM与DOM、事件、cookie存储

3. 正则表达式、Ajax、面向对象基础、运动与游戏开发、Promise/A+

4. 设计模式（观察者模式等）、原型链、构造函数、执行上下文栈与执行上下文、变量对象与活动对象

5. 作用域链、闭包、this、ES5、ES6、ajax大概先列举这么多吧！这个里面重点学习的是面向对象和设计模式。最后找个例子来练习，比如微信打飞机等等。

三、工具类的学习和常用框架

1. Gulp

2. Webpack

3. NPM

4. Git/SVN

这些东西，是工作中必不可少的，所以必须要学习

Vue.js的学习里面重点学习以下知识点：

1) Vue.js基础、模块化、单文件组件

2) 路由、服务器通信、状态管理

3) 单元测试与生产发布、服务端渲染SSR与Nuxt.js、Mint UI, Element UI

其实还有很多，不一一列举了，框架的学习只要认真掌握一个，其他的上手非常快。最后，还有就是微信小程序、node.js这块多看看。

来源：千锋HTML5