如何从零开始 Web 前端学习之路？

工具篇

工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。
最后，如果大家如果在自学遇到困难，想找一个前端的学习环境，可以加入我们的前端学习圈，点击我加入吧，会节约很多时间，减少很多在学习中遇到的难题。

1. WebStorm

不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。

WebStorm 官网下载地址：https://www.jetbrains.com/web...。
WebStorm 有哪些过人之处？（https://www.zhihu.com/questio...）
激活 WebStorm2018（https://blog.csdn.net/qq_3213...）

1. Visual Studio Code

微软开源免费产品，受到非常多技术人员的喜爱，基本上成为前端开发者的必备编辑器，强大的插件扩展，可以灵活的打造自己喜欢的风格。给你们送上常用插件列表拿走不谢。

Visual Studio Code 官网下载地址：https://code.visualstudio.com/。
VSCode 拓展推荐：https://github.com/varHarrie/...
使用顶级 VSCode 扩展来加快开发 JavaScript：https://www.html.cn/archives/...
vscode 插件推荐：https://segmentfault.com/a/11...

1. atom

也是一款免费开源的编辑器，受到很多人的喜爱，但是我本人用的较少，所以插件方面就不推荐了，大家可以按照自己的爱好去寻找。

1. 科学上网

每个程序员都应该具备的工具和能力，否则很多事情都无法办到，至于怎么做，你可以自己查阅资料，这里不就不在多说了。而且下面推荐的很多资源都是需要科学上网之后才能访问，所以一定要学会。

1. Google

在使用「Google」之前必须学会科学上网，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。

1. Github

全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。

1. Stack Overflow

国外著名的技术问答交流社区，开发时碰到的很多问题在这里都能找到答案。

1. SegmentFault

对应的国内版的技术问答交流社区，如果你英文不好，也可以在这里找找答案。

1. Markdown

Markdown 轻量级标记语言，简洁的语法，让作者专注内容而非复杂的格式要求，我认为人人都应该掌握，特别是经常写博客的人。想想你在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。

Markdown 中文文档：https://markdown-zh.readthedo...
HTML 篇

一些准备就绪之后，开始我们的学习之旅，首先我们先从 HTML 开始。

HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。

1. 基础

w3school 在线教程（http://www.w3school.com.cn/h.asp）：内容非常的基础，适合小白学习，对 HTML 有一个入门了解。
freeCodeCamp（https://www.freecodecamp.cn/）：一个非常好的入门学习网站，采用闯关的模式，就像游戏打怪升级一样，非常的有乐趣，准备自学的小伙伴不妨试试。

1. 进阶

MDN HTML（https://developer.mozilla.org...）：这里的内容质量更好，错误更少，内容也更加的全面。
HTML 和 CSS 编码规范（https://codeguide.bootcss.com/）：掌握一些代码技巧，写出更好，更高质量的代码。
CSS 篇

HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。

1. 基础

学习 CSS 布局（http://zh.learnlayout.com/）：带你一步一步的完成 CSS 的学习。
CSS 参考手册（https://css.doyoe.com/）：对CSS可以有一个全面入门的学习。
w3school CSS 参考手册（http://www.w3school.com.cn/cs...）：同上也是非常基础的知识，适合入门。

1. 进阶

书籍：

《CSS揭秘》（https://book.douban.com/subje...）：非常推荐的一本 CSS 书籍，可以学到很多鲜为人知的技巧。

在线系列：

MDN CSS（https://developer.mozilla.org...）：和 HTML 都是 MDN 社区文档，质量保障。
HTML和CSS编码规范（https://codeguide.bootcss.com/）：掌握一些代码技巧，写出更好，更高质量的代码。
大漠老师的CSS系列（https://www.w3cplus.com/CSS3）：大漠老师对CSS有非常深入的认识和丰富的实践经验，《图解CSS3：核心技术与案例实战》的作者。
大漠老师的SASS系列（https://www.w3cplus.com/blog/...）：大漠老师的 sass 文章系列。
SASS中文网（https://www.sasscss.com/）：成熟、稳定、强大的 CSS 扩展语言解析器，它可以让你使用变量，条件语句等书写 CSS。
Stylus官网（https://stylus.bootcss.com/）：同样是 CSS 预编译器，但它省去了一些符号，让 CSS 写起来更加的简洁，清爽。
HTML5和CSS3（https://github.com/qianguyiha...）：详解HTML5 和 CSS3。
知识点：

别说你懂CSS相对单位（http://wuyuying.com/blog/arch...）：深入了解 CSS 的相对单位rem，em区别。
CSS 进阶内容（https://github.com/coconilu/B...）：常见知识点的深入了解。
Flex 布局教程：语法篇（http://www.ruanyifeng.com/blo...）：阮一峰老师的flex讲解。
Flex 布局教程：实例篇（http://www.ruanyifeng.com/blo...）：阮一峰老师的flex讲解。
“CSS相关”目录存档（https://www.zhangxinxu.com/wo...）：张鑫旭大佬的CSS系列文章，深入浅出，《CSS世界》作者。
CSS绘制的40种形状和图形（http://www.open-open.com/lib/...）：利用CSS绘制出的40各种图形形状。
CSS-大前端（http://www.daqianduan.com/tag...）：一些 CSS 的知识点。
JavaScript 篇

有了 HTML 与 CSS，网页也就有了内容和样式，但是会缺少与用户的互动，所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力，但如果又唱歌，又跳舞，还向你抛媚眼，那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。

Javascript 简史（https://blog.csdn.net/qq_3213...）：可以简单了解下，JavaScript 发展由来。

1. 基础

书籍

《JavaScript权威指南 （第6版）》（https://book.douban.com/subje...）：俗称「犀牛书」，JS 的经典之作，提升JS技能的必备书籍，我的JS基础知识全都是啃这本书啃下来的，刚开始读时可能有会有些吃力，但是只要坚持下来收获满满。
《JavaScript高级程序设计（第3版）》（https://book.douban.com/subje...）：俗称「红宝书」，JavaScript 超级畅销书，全书阐述了JavaScript语言实现的各个组成部分，ECMAScript，DOM，BOM，事件，面向对象等等，随时拿出来翻翻，更加深入了学习 JS。
在线系列

除了书籍之外，也有很多优秀的在线教程，可以帮助我们更好的学习。

现代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 学习教程，从基础到高阶，非常详细，相信你会爱上它的。
廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/w...）：廖雪峰系列教程。
JavaScript 标准参考教程（alpha）（https://javascript.ruanyifeng...）：阮一峰老师的系列教程，通俗易懂，案例丰富。

1. 进阶

JavaScript语言精粹（https://github.com/qibaoguang...）：揭示JavaScript中的精华。
JavaScript 秘密花园（http://bonsaiden.github.io/Ja...）：对 JS 一些的核心知识点进行梳理讲解，例如：this，闭包/作用域，构造函数，原型等等，都是面试必考知识点。
ECMAScript 6 入门（http://es6.ruanyifeng.com/）：阮一峰老师ES6入门书籍，全面介绍 ECMAScript 6 新引入的语法特性。
JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以认识到一些你平时没有接触过的小技巧。
深入理解javascript原型和闭包系列（http://www.cnblogs.com/wangfu...）：详细解释了原型和闭包，看完之后对原型与闭包让你彻底明白。
大漠老师的JavaScript系列（https://www.w3cplus.com/JavaS...）：大漠老师的JavaScript系列文章。
JavaScript 算法与数据结构（https://github.com/trekhleb/j...）：基于 JavaScript 的算法与数据结构，让你愉快的学习。
JavaScript中的正则表达式（https://blog.csdn.net/qq_3213...）：我自己的一篇正则表达式的文章，希望对你有帮助。
30分钟掌握ES6/ES2015核心内容（上）（https://segmentfault.com/a/11...）
30分钟掌握ES6/ES2015核心内容（下）（https://segmentfault.com/a/11...）：阐述了一些常用的ES6的知识点。
学用 JavaScript 设计模式（https://www.oschina.net/trans...）：阐述JavaScript编程语言中经典和现代的设计模式。
你不懂JS（系列丛书）（https://github.com/getify/You...）
InterviewMap（https://yuchengkai.cn/docs/fr...）：聚集了很多知识点，包括JS，浏览器，性能等。
30 秒就能理解的 JavaScript 代码片段（https://www.html.cn/30-second...）：让你更好的理解一些有用的JS代码片段。
TypeScript篇

ES6 的超集扩展，严格的数据类型，带来更好的维护，适合大型项目的开发工作，有人说它是未来的发展趋势，你说要不要了解？

TypeScript 中文手册（https://typescript.bootcss.com/）：官网翻译版。
TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/t...）：中文版。
RxJS 中文文档（https://cn.rx.js.org/）：中文官网。
30 天精通 RxJS (01)：認識 RxJS（https://ithelp.ithome.com.tw/...）：繁体字可能阅读起来并没有那么顺畅。
Jquery篇

虽说现在已经是单页面应用时代，有React，Vue 这种强大的框架可以使用，但也不缺乏一些老的项目需要维护，而且在学习之初，可以用它做两个简单的应用还是不错的，可以相对了解下基本用法，它可以让你更好，更方便的操作DOM。但不建议再深度学习。

《锋利的jQuery(第2版)》（https://book.douban.com/subje...）：一本很不错的 Jquery 学习书籍。
jQuery API中文文档（https://www.jquery123.com/）：JQuery 中文教程。
Ajax篇

掌握了的HTML、CSS、JavaScript时，这时候可以尝试自己做一些项目了，而项目中肯定会有数据的交互，这时候就是 Ajax 的用武之地了。

廖雪峰AJAX（https://www.liaoxuefeng.com/w...）：廖雪峰大佬的博客知识。
XMLHttpRequest 对象（https://wangdoc.com/javascrip...）：阮一峰老师的AJAX详解。
JSON风格指南（https://github.com/liuxiaoden...）：前后端的交互数据通常都是 JSON 格式，所以了解 JSON 是必要的。
NodeJS与模块化

NodeJs 的出现让前端发展进入了一个新的领域，并且滋生出专业的 Node 工程师，不仅如此 Node 在前端模块化，工程化起到很重要的作用，所以了解是必须的，如果感兴趣的可以深入学习，可以向全栈工程师发展。

Javascript模块化编程（一）（http://www.ruanyifeng.com/blo...）：模块的写法
Javascript模块化编程（二）：AMD规范
Javascript模块化编程（三）：require.js的用法
前端模块化开发那点历史（https://github.com/seajs/seaj...）：了解下，前端模块化的发展。
Node.js 官方（https://nodejs.org/zh-cn/）
狼叔：如何正确的学习Node.js（https://github.com/i5ting/How...）：狼叔江湖地位颇高，《更了不起的 Node.js》的作者。
全栈工程师之路-Node.js（http://i5ting.github.io/nodej...）
框架篇

随着日益复杂的用户需求，与系统的复杂度上升，传统的开发模式日渐的很难满足，此时的三大框架孕育而生，让开发者更加高效，可复用，把关注点都放在数据层的操作，免去那些繁琐而又重复的视图操作。

现在框架的能力已经是前端开发人员必备的技能之一也是趋势，三大框架的「最终目的」都是一致的，我认为开发者不必纠结于到底应该选择哪一个学习，可以选择其中的两个是最好的。对于刚入门的人来说，建议选择 Vue 入手，比较简单，灵活。

MVC，MVP 和 MVVM 的图示（http://www.ruanyifeng.com/blo...）：在学习框架之前，你应该了解下MVVM的设计思想。
框架原理（https://yuchengkai.cn/docs/fr...）：了解一些框架的基本原理。

1. Angular

Angular（https://angular.cn/）：Angular官方社区。
Angular开发者（http://www.ngfans.net/）：大漠穷秋老师维护的站点，Angular中国布道者。
NG-ZORRO（https://ng.ant.design/docs/in...）：Angular UI 组件库，阿里巴巴出品。

1. Vue

Vue（https://cn.vuejs.org/index.html）：官网，最好的学习资料。
我的Vue进阶之路（https://blog.csdn.net/qq_3213...）
使用vue全家桶制作博客网站（https://www.cnblogs.com/xiaoh...）
Element（http://element-cn.eleme.io/#/...）：一个高质量的 Vue UI 组件库。饿了么前端团队出品。
Vue 项目里戳中你痛点的问题及解决办法（更新）（https://juejin.im/post/5b174d...）：做项目难免回去到坑，这里你或许可以找到答案。

1. React

React我了解不多，所以就没什么好推荐的了，大家可自行学习。

React官网（https://www.reactjscn.com/）
图形可视化

随着日益增长的数据，如何利用高效的利用数据，是每个企业都考虑的问题，而人的眼睛看到的东西要胜过阅读的问题，俗话说「一图胜千言」就是这个道理，所以数据的可视化就会格外的重要，以下都是我常看的一些技术，书籍，和关注的可视化开源库。

《HTML5 Canvas核心技术》（https://book.douban.com/subje...）：学习 Canvas 比较好的一本书籍。
Canvas系列（https://www.w3cplus.com/searc...）：大漠老师的 Canvas 系列。
Echarts（https://www.echartsjs.com/ind...）
D3（https://d3js.org/）
Highcharts（https://www.highcharts.com.cn/）
AntV（https://antv.alipay.com/zh-cn...）
Mapv（https://mapv.baidu.com/）
工程化与版本控制篇

1. Git

版本控制工具，很多新手往往把 git 与 github 傻傻分不清楚，二者是不同的东西，一定要去区分清楚。

Git教程（https://www.liaoxuefeng.com/w...）：廖雪峰老师的教程。
Learn Git Branching（https://learngitbranching.js....）：一种有趣的学习 Git 的方式。
GitHub 漫游指南（https://github.com/phodal/github）：作者是一个极客。
git - 简易指南：http://www.bootcss.com/p/git-...

1. Gulp

自动化构建工具，项目打包部署前的压缩合并，节省时间，提高开发效率。

Gulp 中文网（https://www.gulpjs.com.cn/）：官方教程。
gulp详细入门教程（http://www.ydcss.com/archives/18）：非常详细的实现步骤。

1. Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

Webpack中文文档：https://www.webpackjs.com/
webpack原理：https://juejin.im/entry/5b0e3...
Webpack揭秘——走向高阶前端的必经之路：https://juejin.im/post/5badd0...
Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/...
webpack 热加载原理探索：http://shepherdwind.com/2017/...

1. Babel

JavaScript代码编译器，可以让ES6及以上语法转换成浏览器支持的语法，一般会在框架的脚手架中自行配置。

Babel（https://babel.bootcss.com/）：官网教程。

1. 代码质量

ESLint（https://eslint.bootcss.com/）：javascript代码检测工具帮助我们写出更规范的代码。
浏览器与HTTP

浏览器的常见知识点（https://yuchengkai.cn/docs/fr...）：需要我们了解的常见知识。
网站安全（https://yuchengkai.cn/docs/fr...）：几种常见安全问题。
同源限制（https://wangdoc.com/javascrip...）
从URL输入到页面展现到底发生什么？（https://github.com/ljianshu/B...）
深入理解浏览器的缓存机制（https://github.com/ljianshu/B...）
网页性能管理详解（http://www.ruanyifeng.com/blo...）
关于Http协议，你必须要知道的（https://github.com/ljianshu/B...）
HTTP 协议（https://github.com/coconilu/B...）
HTTP2 协议（https://github.com/coconilu/B...）
浏览器同源政策及其规避方法（http://www.ruanyifeng.com/blo...）
跨域资源共享 CORS 详解（http://www.ruanyifeng.com/blo...）
总结 XSS 与 CSRF 两种跨站攻击（https://segmentfault.com/a/11...）
性能优化

性能优化（https://yuchengkai.cn/docs/fr...）：常见性能优化。
前端性能优化的七大手段（https://www.cnblogs.com/xiaoh...）
延迟加载(Lazyload)三种实现方式（https://zhuanlan.zhihu.com/p/...）
详解懒加载和预加载（https://www.geekjc.com/post/5...）
前端优化带来的思考，浅谈前端工程化（http://www.cnblogs.com/yexiao...）
推荐几本与Web性能优化有关的书籍（https://w3ctech.com/topic/108）
vue + webpack 前端性能优化（https://juejin.im/post/5bc5c1...）
SEO

SEO优化实战（https://imweb.io/topic/568293...）

项目资源

前端技能汇总（http://html5ify.com/fks/）：一个前端工程师需要的技能点和学习资料。
You-need-to-know-css（https://lhammer.cn/You-need-t...）：一个CSS的优质项目，纯 CSS 实现我们项目中很多常用，不常用的样式。
JavaScript libraries（https://www.javascripting.com/）：一些优秀的JavaScript 开源库。
awesome-web-dev-books（https://github.com/jobbole/aw...）：前端经典学习书单。
前端 TOP 100（https://www.awesomes.cn/rank）：基本涵盖了所有前端在用的开源项目，我觉得收藏这一个就够了。
常用工具

CSS Sprites Generator（https://www.toptal.com/develo...）：雪碧图的在线制作工具。
Lorem Picsum（https://picsum.photos/）：好用的图片临时占位符。
Md2All（http://md.aclickall.com/）：优秀的现在 Markdown 编辑器。
优波设计（https://ubuuk.com/）：优秀的设计导航网站，帮助你更好的寻找资料。
搬书匠（http://www.banshujiang.cn/）：书籍搜索下载。
史莱姆导航（http://www.slimegps.cn/）：资源搜索。
codePen（https://codepen.io/）：在线代码编辑工具。
Iconfont（https://www.iconfont.cn/）：阿里的字体图标库，支持多种格式，下载图片，在线使用，SVG等等。
Can I use（https://www.caniuse.com/）：可以查看浏览器兼容 CSS 情况。
在线工具（https://tool.lu/）：工具资源导航。