随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！
那么对于零基础的一个学员该怎么学习前端呢？
一、工具篇
工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。
1.WebStorm
不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。
2.Google
在使用「Google」之前必须学会***，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。
3.Github
全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。4.Stack Overflow
国外著名的技术问答交流社区，开发时碰到的很多问题在这里都能找到答案。
5.SegmentFault
对应的国内版的技术问答交流社区，如果你英文不好，也可以在这里找找答案。
6.MarkdownMarkdown
轻量级标记语言，简洁的语法，让作者专注内容而非复杂的格式要求，我认为人人都应该掌握，特别是经常写博客的人。想想你在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。·
Markdown 中文文档·
有道云笔记：我自己一直在用的在线 Markdown 编辑器。
我自己是一名从事了多年开发的web前端老程序员，前段时间我花了一个月整理了一份最适合学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以添加下面的QQ群，即可免费获取。
二、HTML 篇
一些准备就绪之后，开始我们的学习之旅，首先我们先从 HTML 开始。HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。
1.基础
w3school在线教程：内容非常的基础，适合小白学习，对 HTML 有一个入门了解。
freeCodeCamp：一个非常好的入门学习网站，采用闯关的模式，就像游戏打怪升级一样，非常的有乐趣，准备自学的小伙伴不妨试试。
2.进阶
MDN HTML：这里的内容质量更好，错误更少，内容也更加的全面。
HTML和CSS编码规范：掌握一些代码技巧，写出更好，更高质量的代码。
三、CSS 篇
HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。
1.基础
学习CSS布局：带你一步一步的完成 CSS 的学习。
CSS参考手册：对CSS可以有一个全面入门的学习。
w3school CSS 参考手册：同上也是非常基础的知识，适合入门。
2.进阶
书籍：
《CSS揭秘》：非常推荐的一本 CSS 书籍，可以学到很多鲜为人知的技巧。
在线系列：· MDN CSS：和 HTML 都是 MDN 社区文档，质量保障。
HTML和CSS编码规范：掌握一些代码技巧，写出更好，更高质量的代码。
大漠老师的CSS系列：大漠老师对CSS有非常深入的认识和丰富的实践经验，《图解CSS3：核心技术与案例实战》的作者。
大漠老师的SASS系列：大漠老师的 sass 文章系列。
SASS中文网：成熟、稳定、强大的 CSS 扩展语言解析器，它可以让你使用变量，条件语句等书写 CSS。
Stylus官网：同样是 CSS 预编译器，但它省去了一些符号，让 CSS 写起来更加的简洁，清爽。
HTML5和CSS3：详解HTML5 和 CSS3。
知识点： 别说你懂CSS相对单位：深入了解 CSS 的相对单位rem，em区别
CSS 进阶内容：常见知识点的深入了解。
Flex 布局教程：语法篇：阮一峰老师的flex讲解。
Flex 布局教程：实例篇：阮一峰老师的flex讲解。
“CSS相关”目录存档：张鑫旭大佬的CSS系列文章，深入浅出，《CSS世界》作者。
·CSS绘制的40种形状和图形：利用CSS绘制出的40各种图形形状。
CSS-大前端：一些 CSS 的知识点。
3.进阶
JavaScript语言精粹：揭示·JavaScript中的精华。
JavaScript秘密花园：对 JS 一些的核心知识点进行梳理讲解，例如：this，闭包/作用域，构造函数，原型等等，都是面试必考知识点。
ECMA 6 入门：阮一峰老师ES6入门书籍，全面介绍 ECMA 6 新引入的语法特性。
JavaScript使用技巧：可以认识到一些你平时没有接触过的小技巧。
深入理解·JavaScript原型和闭包系列：详细解释了原型和闭包，看完之后对原型与闭包让你彻底明白。
大漠老师的·JavaScript系列：大漠老师的·JavaScript系列文章。
JavaScript算法与数据结构：基于·JavaScript的算法与数据结构，让你愉快的学习。
JavaScript中的正则表达式：我自己的一篇正则表达式的文章，希望对你有帮助。
30分钟掌握ES6/ES2015核心内容（上）
30分钟掌握ES6/ES2015核心内容（下）：阐述了一些常用的ES6的知识点。
学用 ·JavaScript设计模式：阐述·JavaScript编程语言中经典和现代的设计模式。
你不懂JS（系列丛书）· InterviewMap：聚集了很多知识点，包括JS，浏览器，性能等。
30 秒就能理解的·JavaScript代码片段：让你更好的理解一些有用的JS代码片段。
四、Type篇
ES6 的超集扩展，严格的数据类型，带来更好的维护，适合大型项目的开发工作，有人说它是未来的发展趋势，你说要不要了解？
Type 中文手册：官网翻译版。
Type Handbook（中文版）：中文版。
RxJS 中文文档：中文官网。
30 天精通 RxJS (01)：認識 RxJS ：繁体字可能阅读起来并没有那么顺畅。Jquery篇虽说现在已经是单页面应用时代，有React，Vue 这种强大的框架可以使用，但也不缺乏一些老的项目需要维护，而且在学习之初，可以用它做两个简单的应用还是不错的，可以相对了解下基本用法，它可以让你更好，更方便的操作DOM。但不建议再深度学习。
《锋利的jQuery(第2版)》：一本很不错的 Jquery 学习书籍。· jQuery API中文文档：JQuery 中文教程。Ajax篇掌握了的HTML、CSS、Java时，这时候可以尝试自己做一些项目了，而项目中肯定会有数据的交互，这时候就是 Ajax 的用武之地了。
廖雪峰AJAX：廖雪峰大佬的博客知识。· 对象：阮一峰老师的AJAX详解。
JSON风格指南：前后端的交互数据通常都是 JSON 格式，所以了解 JSON 是必要的。NodeJS与模块化NodeJs 的出现让前端发展进入了一个新的领域，并且滋生出专业的 Node 工程师，不仅如此 Node 在前端模块化，工程化起到很重要的作用，所以了解是必须的，如果感兴趣的可以深入学习，可以向全栈工程师发展。
JavaScript模块化编程（一）：模块的写法·JavaScript模块化编程（二）：AMD规范·JavaScript模块化编程（三）：require.js的用法· 前端模块化开发那点历史：了解下，前端模块化的发展。
Node.js 官方· 狼叔：如何正确的学习Node.js：狼叔江湖地位颇高，《更了不起的 Node.js》的作者。
全栈工程师之路-Node.js
五、框架篇
随着日益复杂的用户需求，与系统的复杂度上升，传统的开发模式日渐的很难满足，此时的三大框架孕育而生，让开发者更加高效，可复用，把关注点都放在数据层的操作，免去那些繁琐而又重复的视图操作。
现在框架的能力已经是前端开发人员必备的技能之一也是趋势，三大框架的「最终目的」都是一致的，我认为开发者不必纠结于到底应该选择哪一个学习，可以选择其中的两个是最好的。对于刚入门的人来说，建议选择 Vue 入手，比较简单，灵活。
MVC，MVP 和 MVVM 的图示：在学习框架之前，你应该了解下MVVM的设计思想。
框架原理：了解一些框架的基本原理。
1.Angular
Angular：Angular官方社区。
Angular开发者：大漠穷秋老师维护的站点，Angular中国布道者。
NG-ZORRO：Angular UI 组件库，阿里巴巴出品。
2.Vue
Vue：官网，最好的学习资料。
我的Vue进阶之路：厚着脸皮贴出来，自己的一些学习总结，希望对你有所收获，哪怕一点点。
使用vue全家桶制作博客网站· Element：一个高质量的 Vue UI 组件库。饿了吗前端团队出品。
Vue 项目里戳中你痛点的问题及解决办法（更新）：做项目难免回去到坑，这里你或许可以找到答案。
3.React
React我了解不多，所以就没什么好推荐的了，大家可自行学习。
React官网