如何系统地学习前端？
目前入门前端的人群分类
1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。
优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。
缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。
2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。
优点：自学能力比较强，能够根据自己的兴趣规划学习内容。
缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。
门前端时的一些困境
1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。
2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习node开发 ，在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用node 的api 。
3、前端整体体系架构没有做过深入思考。
导致用会用，但不知道为什么用，用另外一个有什么区别。
4、学习环境中无高手。
没有高手能够指导自己进入下一个层次。
5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了 。
如何系统学习前端
网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。如果你现在是零基础学员，大致可以按如下思路学习系统学习：
基础部分
1、HTML + CSS 这部分学习，可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Java 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议马上看《Java语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
进阶部分
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Java。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用 Codecademy 学习 Java，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Java 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Java不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Java的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《Object Oriented Java》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。
c） Java 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Java语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Java》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
升级部分
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
可测性。
高性能。必读《高性能Java》
低流量。移动端关注比较多。
额外补充部分
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
2、后端。
应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。
如何才能快速入门前端
1、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。
2、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。
第一：HTML基础。HTML是学习前端开发首先要学习的内容，HTML本身还是比较容易学习的，而且实验也很容易完成。由于HTML本身的语法结构比较简单清晰，所以在学习HTML的过程中，一定要注重多做实验。
第二：JavaScript基础。JavaScript对于前端开发人员是比较重要的，相对于HTML来说，JavaScript在学习的过程中还是具有一定难度的，基于JavaScript可以写出比较复杂的程序片，而且JavaScript的内容也相对比较多。
第三：Nodejs基础。随着Nodejs的应用越来越多，前端开发人员掌握Nodejs能够明显拓展自身的开发边界，也会促使前端开发人员走向全栈开发路线
零基础想要系统的学习，最好的 方式就是找一个专业的学习系统的去学习
首先，要多记多背，再就是加上多练习，这样时间长了，就自然会了。
入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后，也就算真正地入门前端了。
学完前端三大件，打好了大树的根基，就可以开始扩展技能树了，开始学习前端框架。
前端的主流框架目前主要为 React，Vue 和 Angular。选择哪个框架呢？你可以去Github或者其他网站搜一搜，然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。
React 的开发体验更类似于写原生的 JavaScript，要求你有较好的JavaScript 基础。Vue 则引入了模版，将很多实现封装成了 API，你需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，只是编程的感觉稍微弱了一些。
这两个都是非常优秀的框架，新人不必纠结于选择哪个框架，学了一个，另一个也很容易学。
