如何系统的学习 web 前端开发？

因为许多前端新人自学一段时间之后，就迷茫了，不知道学到了什么阶段，也不清楚接下来该往哪个方向学习。

要知道前端开发的方向非常的多，相互之间的知识分叉也非常的多。

但是总体来讲，是这样，

html->
css->
JavaScript->
jQuery（目前不太火热了，可以学也可以跳过）
vue->
react->
nodeJs->
webpack->

从全局来讲，大的脉络就是这样。

学习就要看书啊，看资料啊，根据上面的大方向，给大家列出资料如下，

前端知识体系
https://www.cnblogs.com/sb19871023/p/3894452.html

前端知识结构
https://github.com/JacksonTian/fks

智能社 - 精通 JavaScript 开发
https://study.163.com/course/introduction/224014.htm

前端入门教程
https://www.cnblogs.com/jikey/p/3613082.html

瘳雪峰的 Javascript 教程
https://www.liaoxuefeng.com/wiki/1022910821149312

前端工程师必备的 PS 技能
http://www.imooc.com/learn/506

菜鸟教程
https://www.runoob.com/

react.js 中文论坛
http://www.react-china.org/

React 入门实例教程 - 阮一峰
http://www.ruanyifeng.com/blog/2015/03/react.html

基于 webpack 搭建前端工程解决方案探索
https://segmentfault.com/a/1190000003499526

HTTP API 设计指南
https://segmentfault.com/bookmark/1230000002521721

Vue.js 的一些资源索引
https://segmentfault.com/a/1190000000411057

前端编码规范之 js
https://www.cnblogs.com/hustskyking/p/javascript-spec.html

什么是前端工程化
https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#

Node 初学者入门，一本全面的 NodeJS 教程
http://ourjs.com/detail/529ca5950cb6498814000005

公开课【JavaScript 核心与实例】视频
https://study.163.com/instructor/525305.htm?_trace_c_p_k2_=5bace1ea6dd8410ab5eca603fea78e46

也不用更多的，自学的话能把上面这些都看明白，也就差不多了，再列出更多教程也都是些重复的知识内容了。

前端开发按学科来分，我个人认为应该算工科，所以必须要写，只看资料是不够的。也就是说，你看上面那些资料的时候，应该是一边看一边写。哪怕不懂，也要写。而不是看懂了再写。