前端大牛学习路径和资源集合，小白入门必看（超级长，建议收藏）

GitHub 上有一个很有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmap

想成为一名前端大牛，按照这个路线学习，足以帮助你快速成长。

从一名小白开始入门前端，到前端进阶，再到成长为技术大牛。

首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识：

W3school：http://www.w3school.com.cn/

MDN 官方教程：https://developer.mozilla.org/zh-CN/

W3C 官方文档：https://www.w3.org/

freecodecamp 学习网站：https://www.freecodecamp.com/

之后你就需要学习一些包管理，包括 npm，yarn 等等。

接下来学习 CSS 预处理，CSS 的一些框架的使用，最常见的就是 Bootstrap 等。以及 CSS Architecture。

这里推荐一些好用的前端库：

• Sass: CSS的扩展，可以声明变量，引入模块，嵌套属性等等。
• Less: 为CSS添加声明变量，样式模块，命名空间，继承等特性。
• Stylus: 写CSS再也不用写烦人的括号啦～
• Bootstrap: 全世界最流行的响应式前端框架。
• Foundation: 提供了很多模版，针对网站、移动端、邮件提供了很多好用的模块和样式。
• Semantic UI: 个人非常喜欢的一个前端框架，样式非常好看，更重要的是就像它语义UI的名称一样，类命名特别友好，写网页就像和人说话一样。
• uikit: 漂亮、可定制，即将发布uikit3版本，感兴趣可以试试看。

之后学习一些构建工具及其他工具的使用，并尽量明确其原理。包括但不限于以下工具：

• Grunt: JavaScript自动化工具。
• Gulp: 个人感觉是最好用的自动化构建工具。
• webpack：模块化加载构建一切，CSS/JS连图片都可以
• npm: NPM虽好，不要太依赖袄。
• Bower: 前端框架包管理工具，各类框架和库一键安装。

之后进行前端框架的选择和学习，包括但不限于以下框架：

• Vue：广泛使用的前端框架，认真学。
• React：也是一个广泛使用的前端框架，最好把这个和 Vue 都认真学习好。
• jQuery: 方便快捷，功能强大全面，居家旅行必备，近乎JS的替代品，你可以不会js，但是不能不会jQuery。
• BackBoneJS: 模型、视图、集合、事件，让你的前端代码更有框架感。
• D3.js: 数据可视化必学必会，只有你想不出来的，没有D3画不出来的。
• React: 学会React，再学学React-native，你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……
• jQuery UI: 几行代码就能写一个带动画带ajax的Web应用。
• jQuery Mobile: 移动端专用js开发框架，和上面的类似袄。
• Underscore.js: 非入侵式框架，提供了众多有用的函数方法，弥补jQuery的不足。
• Moment.js: 原生的JS显示输出日期时间真的很痛苦，Moment为你解决了一切啦～
• Lodash: 模块化且高效，lodash和underscore很相似。
• Ruby on Rails: Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架，github就是用它写的！
• AngularJS: Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。
• Ember.js: 用来开发单页Web应用的JS前端MVC框架。
• Express: Node.js上的Web框架，搭建网站或API服务只要一秒钟！
• Meteor: JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。
• Django: Python的Web框架，人生苦短，请用Python.
• Flask: Python的Web框架，据说只要学好flask就能随意找到好工作？
• ASP.net: 老一辈人的最爱。
• Laravel: 最优雅性感的PHP Web框架，好用到不能再好用，优雅到不能再优雅，毕竟PHP是全世界最好的语言嘛。
• Phalcon: 用C语言扩展的，据说是最快的PHP框架。

框架和知识学习好了，要学习如何进行测试，主要包括这部分内容：

之后要学习 PWA，这是以后的发展趋势：

之后学习一些更深入的内容：

下面是学习路线和学习资源，有需要的请自取。

入门类

• 前端入门教程
• 瘳雪峰的Javascript教程
• 前端工程师必备的PS技能——切图篇
• 结合个人经历总结的前端入门方法
• 作者的简书地址
• 作者的CSDN地址
• HTML 修真录------初识"异界"
• HTML 修真录------"深渊三君王"
• HTML 基础入门
• HTML 基础提升
• CSS 基础入门
• CSS 盒模型
• CSS 浮动
• CSS 定位

HTML 5 部分

• 深入理解HTML5标签
• 如何写出高效率的HTML
• HTML meta标签总结与属性使用介绍
• 戏说HTML5
• 编写高质量的 HTML 代码
• 如何解决 img 标签上下出现的间隙
• 五分钟学会 Canvas 基础（一）
• 五分钟学会 Canvas 基础（二）
• 模仿 LED 灯的滚动文字效果
• 关于 Canvas 的兄弟 SVG 的基础教程
• HTML 5 动态效果制作方法整理
• Canvas 效果实例
• 细数前端中的一些黑科技
• 前端 Meta 用法大汇总
• HTML5新特性

CSS 3 部分

• CSS 语法参考
• 如何编写可维护的CSS
• CSS3动画手册
• 腾讯css3动画制作工具
• 志爷css小工具集合
• css3 js 移动大杂烩
• bouncejs 触摸库
• animate.css
• 全局CSS的终结
• browserhacks
• CSS3其他属性
• 弹性盒模型详解
• CSS3动画
• 2D变形&3D变形
• 蒙版mask

JQuery

• YOU MIGHT NOT NEED JQUERY
• jQuery API 中文文档
• hemin 在线版
• css88 jq api
• css88 jqui api
• 学习jquery
• jquery 源码查找
• Web前端资源汇总(jQuery,Js,Css3等)

Angular JS

• Angular.js 的一些学习资源
• angularjs中文社区
• Angularjs源码学习
• Angularjs源码学习
• angular对bootstrap的封装
• angularjs + nodejs
• 吕大豹 Angularjs
• AngularJS 最佳实践
• Angular的一些扩展指令
• Angular数据绑定原理
• 一些扩展Angular UI组件
• Ember和AngularJS的性能测试
• 带你走近AngularJS - 基本功能介绍
• Angularjs开发指南
• Angularjs学习
• 不要带着jQuery的思维去学习AngularJS
• angularjs 学习笔记
• angularjs 开发指南
• angularjs 英文资料
• angular bootstrap
• angular jq mobile
• angular ui
• 整合jQuery Mobile+AngularJS经验谈
• 有jQuery背景，该如何用AngularJS编程思想
• AngularJS在线教程
• angular学习笔记

React

• react.js中文论坛
• react.js官方网址
• react.js官方文档
• react.jsmaterialUI
• react.jsTouchstoneJSUI
• react.jsamazeuiUI
• React入门实例教程-阮一峰
• ReactNative中文版
• Webpack和React小书-前端乱炖
• Webpack和React小书-gitbook
• webpack
• Webpack，101入门体验
• webpack入门教程
• 基于webpack搭建前端工程解决方案探索

Vue

• Vue2.0
• Vue
• Vue Router
• Vuex
• Vue-Cli
• Vue 论坛
• Vue 聊天室
• Vue 入门指南
• Vue 的一些资源索引
• awesome-vue
• vue-syntax-highlight

Node JS

• Node.js 包教不包会
• 一个nodejs博客
• 【NodeJS 学习笔记04】新闻发布系统
• 过年7天乐，学nodejs 也快乐
• 七天学会NodeJS
• Nodejs学习笔记（二）— 事件模块
• nodejs入门
• angularjs nodejs
• 从零开始nodejs系列文章
• 理解nodejs
• nodejs事件轮询
• node入门
• nodejs cms
• Node初学者入门，一本全面的NodeJS教程
• NodeJS的代码调试和性能调优

JS Template

• template-chooser
• artTemplate
• tomdjs
• 淘宝模板juicer模板
• Fxtpl v1.0 繁星前端模板引擎
• laytpl
• mozilla - nunjucks
• Juicer
• dustjs
• etpl

移动端

• fastclick
• no-click-delay
• 【敏捷开发】Android团队开发规范
• Android 开发规范与应用
• ionic

移动端 API

• 99移动端知识集合
• 移动端前端开发知识库
• 移动前端的一些坑和解决方法（外观表现）
• 【原】移动web资源整理
• zepto 1.0 中文手册
• zepto 1.0 中文手册
• zepto 1.1.2
• zepto 中文注释
• jqmobile 手册
• 移动浏览器开发集合
• 移动开发大杂烩

综合 API

• javascripting
• 各种流行库搜索
• runoob.com-包含各种API集合
• 开源中国在线API文档合集
• devdocs(英文综合API网站)

其他 API

• HTTP API 设计指南
• javascript流行库汇总
• 验证api
• underscore 中文手册
• underscore源码分析
• underscore源码分析-亚里士朱德的博客
• underscrejs en api
• lodash - underscore的代替品
• ext4api
• qwrap手册
• 缓动函数
• svg 中文参考
• svg mdn参考
• svg 导出 canvas
• svg 导出 png
• ai-to-svg
• localStorage 库

服务器端

• Nodejs
• Node入门
• 7天学会NodeJS
• MongoDB
• NodeJS与MongoDB交互

技能图谱

• StuQ技能图谱
• Frontend Knowledge Structure

在线资源

• 大前端导航
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

在线书籍

• Front-end Developer HandBook
• Front-end Database
• Frontend Notebook

推荐书目

• 基础

• 深入浅出HTML与CSS、XHTML

• HTML & CSS设计与构建网站

• Pro Git中文版

• 鸟哥的linux私房菜

• 中级

• Head First HTML5 Programming

• JavaScript权威指南

• JavaScript语言精粹

• JavaScript & jQuery交互式Web前端开发

• 深入浅出Ajax

• 高级

• JavaScript高级程序设计

• HTML5高级程序设计

• CSS权威指南

• 深入浅出Node.js

开发工具

设计软件

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。

• Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下

• 前端工程师必备的PS技能——切图篇

• Sketch 轻量且功能强大，切图迅速高效，为UI设计而生的Mac App

• Sketch切图教程

编辑器

工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的两个。

• Sublime text 最性感的编辑器，搭配插件各种好用

• 配置和使用方法

• Webstorm 功能强大，学生可以免费用的前端开发IDE

代码管理

不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。

• Linux 你需要学会在命令行打开移动复制文件等最基本的操作

• Linux最常用的20条命令

• 鸟哥的linux私房菜——基础篇

• Git 写代码一定会用到的版本控制软件，入门很快就能学会

• 猴子都能懂的Git入门

测试工具

预览和调试必不可少，编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。

• Chrome Dev Tools 谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里啦

最后

说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

我可以将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在持续整理更新中，希望大家都能找到心仪的工作。

有需要的朋友点击这里免费领取题目+解析PDF。

篇幅有限，仅展示部分截图

篇幅有限，仅展示部分截图

篇幅有限，仅展示部分截图

点击这里免费领取题目+解析PDF。

GitHub 上有一个很有名的 Roadmap：[https://github.com/kamranahmedse/developer-roadmap](https://link.zhihu.com/?target=https%3A//github.com/kamranahmedse/developer-roadmap)
想成为一名前端大牛，按照这个路线学习，足以帮助你快速成长。
从一名小白开始入门前端，到前端进阶，再到成长为技术大牛。
首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识：
**W3school：**[http://www.w3school.com.cn/](https://link.zhihu.com/?target=http%3A//www.w3school.com.cn/)
**MDN 官方教程：**[https://developer.mozilla.org/zh-CN/](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/zh-CN/)
**W3C 官方文档：**[https://www.w3.org/](https://link.zhihu.com/?target=https%3A//www.w3.org/)
**freecodecamp 学习网站：**[https://www.freecodecamp.com/](https://link.zhihu.com/?target=https%3A//www.freecodecamp.com/)
之后你就需要学习一些包管理，包括 npm，yarn 等等。
接下来学习 CSS 预处理，CSS 的一些框架的使用，最常见的就是 Bootstrap 等。以及 CSS Architecture。
这里推荐一些好用的前端库：
*   [Sass](https://link.zhihu.com/?target=http%3A//sass-lang.com/): CSS的扩展，可以声明变量，引入模块，嵌套属性等等。*   [Less](https://link.zhihu.com/?target=http%3A//lesscss.org/): 为CSS添加声明变量，样式模块，命名空间，继承等特性。*   [Stylus](https://link.zhihu.com/?target=http%3A//stylus-lang.com/): 写CSS再也不用写烦人的括号啦～*   [Bootstrap](https://link.zhihu.com/?target=http%3A//getbootstrap.com/): 全世界最流行的响应式前端框架。*   [Foundation](https://link.zhihu.com/?target=http%3A//foundation.zurb.com/): 提供了很多模版，针对网站、移动端、邮件提供了很多好用的模块和样式。*   [Semantic UI](https://link.zhihu.com/?target=http%3A//semantic-ui.com/): 个人非常喜欢的一个前端框架，样式非常好看，更重要的是就像它语义UI的名称一样，类命名特别友好，写网页就像和人说话一样。*   [uikit](https://link.zhihu.com/?target=http%3A//getuikit.com/): 漂亮、可定制，即将发布uikit3版本，感兴趣可以试试看。
之后学习一些构建工具及其他工具的使用，并尽量明确其原理。包括但不限于以下工具：
*   [Grunt](https://link.zhihu.com/?target=http%3A//gruntjs.com/): JavaScript自动化工具。*   [Gulp](https://link.zhihu.com/?target=http%3A//gulpjs.com/): 个人感觉是最好用的自动化构建工具。*   [webpack](https://link.zhihu.com/?target=http%3A//webpack.github.io/)：模块化加载构建一切，CSS/JS连图片都可以*   [npm](https://link.zhihu.com/?target=https%3A//www.npmjs.com/): NPM虽好，不要太依赖袄。*   [Bower](https://link.zhihu.com/?target=http%3A//bower.io/): 前端框架包管理工具，各类框架和库一键安装。
之后进行前端框架的选择和学习，包括但不限于以下框架：
*   Vue：广泛使用的前端框架，认真学。*   React：也是一个广泛使用的前端框架，最好把这个和 Vue 都认真学习好。*   [jQuery](https://link.zhihu.com/?target=http%3A//jquery.com/): 方便快捷，功能强大全面，居家旅行必备，近乎JS的替代品，你可以不会js，但是不能不会jQuery。*   [BackBoneJS](https://link.zhihu.com/?target=http%3A//backbonejs.org/): 模型、视图、集合、事件，让你的前端代码更有框架感。*   [D3.js](https://link.zhihu.com/?target=http%3A//d3js.org/): 数据可视化必学必会，只有你想不出来的，没有D3画不出来的。*   [React:](https://link.zhihu.com/?target=https%3A//facebook.github.io/react/) 学会React，再学学React-native，你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……*   [jQuery UI](https://link.zhihu.com/?target=http%3A//jqueryui.com/): 几行代码就能写一个带动画带ajax的Web应用。*   [jQuery Mobile](https://link.zhihu.com/?target=http%3A//jquerymobile.com/): 移动端专用js开发框架，和上面的类似袄。*   [Underscore.js](https://link.zhihu.com/?target=http%3A//underscorejs.org/): 非入侵式框架，提供了众多有用的函数方法，弥补jQuery的不足。*   [Moment.js](https://link.zhihu.com/?target=http%3A//momentjs.com/): 原生的JS显示输出日期时间真的很痛苦，Moment为你解决了一切啦～*   [Lodash](https://link.zhihu.com/?target=https%3A//lodash.com/): 模块化且高效，lodash和underscore很相似。*   [Ruby on Rails](https://link.zhihu.com/?target=http%3A//rubyonrails.org/): Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架，github就是用它写的！*   [AngularJS](https://link.zhihu.com/?target=https%3A//angularjs.org/): Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。*   [Ember.js](https://link.zhihu.com/?target=http%3A//emberjs.com/): 用来开发单页Web应用的JS前端MVC框架。*   [Express](https://link.zhihu.com/?target=http%3A//expressjs.com/): Node.js上的Web框架，搭建网站或API服务只要一秒钟！*   [Meteor](https://link.zhihu.com/?target=https%3A//www.meteor.com/): JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。*   [Django](https://link.zhihu.com/?target=https%3A//www.djangoproject.com/): Python的Web框架，人生苦短，请用Python.*   [Flask](https://link.zhihu.com/?target=http%3A//flask.pocoo.org/): Python的Web框架，据说只要学好flask就能随意找到好工作？*   [ASP.net](https://link.zhihu.com/?target=https%3A//www.microsoft.com/web/platform/framework.aspx): 老一辈人的最爱。*   [Laravel](https://link.zhihu.com/?target=https%3A//laravel.com/): 最优雅性感的PHP Web框架，好用到不能再好用，优雅到不能再优雅，毕竟PHP是全世界最好的语言嘛。*   [Phalcon](https://link.zhihu.com/?target=https%3A//phalconphp.com/en/): 用C语言扩展的，据说是最快的PHP框架。
框架和知识学习好了，要学习如何进行测试，主要包括这部分内容：
之后要学习 PWA，这是以后的发展趋势：
之后学习一些更深入的内容：
## 下面是学习路线和学习资源，有需要的请自取。
## 入门类
*   [前端入门教程](https://link.jianshu.com?t=http://www.cnblogs.com/jikey/p/3613082.html)*   [瘳雪峰的Javascript教程](https://link.jianshu.com?t=http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)*   [前端工程师必备的PS技能——切图篇](https://link.jianshu.com?t=http://www.imooc.com/view/506)*   [结合个人经历总结的前端入门方法](https://link.jianshu.com?t=https://github.com/qiu-deqing/FE-learning)*   [作者的简书地址](https://www.jianshu.com/u/5a2fd0b8fb30)*   [作者的CSDN地址](https://link.jianshu.com?t=http://blog.csdn.net/mr_lp?viewmode=contents)*   [HTML 修真录------初识"异界"](https://www.jianshu.com/p/08c7eb2669f7)*   [HTML 修真录------"深渊三君王"](https://www.jianshu.com/p/100bda3f045e)*   [HTML 基础入门](https://www.jianshu.com/p/bec0e2df1b52)*   [HTML 基础提升](https://www.jianshu.com/p/f624b2999a1d)*   [CSS 基础入门](https://www.jianshu.com/p/715a9013871f)*   [CSS 盒模型](https://www.jianshu.com/p/54376ba7c28a)*   [CSS 浮动](https://www.jianshu.com/p/e358d77373c3)*   [CSS 定位](https://www.jianshu.com/p/d465583a9ebe)
## HTML 5 部分
*   [深入理解HTML5标签](https://link.jianshu.com?t=https://segmentfault.com/a/1190000002695791)*   [如何写出高效率的HTML](https://link.jianshu.com?t=https://segmentfault.com/a/1190000002680822)*   [HTML meta标签总结与属性使用介绍](https://link.jianshu.com?t=https://segmentfault.com/a/1190000004279791)*   [戏说HTML5](https://link.jianshu.com?t=http://www.cnblogs.com/dojo-lzz/p/5059316.html)*   [编写高质量的 HTML 代码](https://www.jianshu.com/p/6f6c64abab2a)*   [如何解决 img 标签上下出现的间隙](https://www.jianshu.com/p/796de6ac0943)*   [五分钟学会 Canvas 基础（一）](https://www.jianshu.com/p/d9ec1ef9c1e8)*   [五分钟学会 Canvas 基础（二）](https://www.jianshu.com/p/2f79c3d8f9d0)*   [模仿 LED 灯的滚动文字效果](https://www.jianshu.com/p/d4a1d4acf68a)*   [关于 Canvas 的兄弟 SVG 的基础教程](https://www.jianshu.com/p/597da90a6c89)*   [HTML 5 动态效果制作方法整理](https://www.jianshu.com/p/f4da2e878874)*   [Canvas 效果实例](https://www.jianshu.com/p/322c7188cbbd)*   [细数前端中的一些黑科技](https://www.jianshu.com/p/3a0ff7ac34a0)*   [前端 Meta 用法大汇总](https://www.jianshu.com/p/850d2a209ba8)*   [HTML5新特性](https://www.jianshu.com/p/830321c3666d)
## CSS 3 部分
*   [CSS 语法参考](https://link.jianshu.com?t=http://tympanus.net/codrops/css_reference)*   [如何编写可维护的CSS](https://link.jianshu.com?t=https://github.com/chadluo/CSS-Guidelines/blob/master/README.md)*   [CSS3动画手册](https://link.jianshu.com?t=http://isux.tencent.com/css3/index.html)*   [腾讯css3动画制作工具](https://link.jianshu.com?t=http://isux.tencent.com/css3/tools.html)*   [志爷css小工具集合](https://link.jianshu.com?t=http://linxz.github.io/tianyizone)*   [css3 js 移动大杂烩](https://link.jianshu.com?t=http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb)*   [bouncejs 触摸库](https://link.jianshu.com?t=http://bouncejs.com)*   [animate.css](https://link.jianshu.com?t=http://daneden.github.io/animate.css)*   [全局CSS的终结](https://link.jianshu.com?t=http://www.alloyteam.com/2015/10/8536)*   [browserhacks](https://link.jianshu.com?t=http://browserhacks.com)*   [CSS3其他属性](https://www.jianshu.com/p/d19bd3a34edd)*   [弹性盒模型详解](https://www.jianshu.com/p/74525dbe7f33)*   [CSS3动画](https://www.jianshu.com/p/57ba5da7f9f6)*   [2D变形&3D变形](https://www.jianshu.com/p/1ea95cdba9df)*   [蒙版mask](https://www.jianshu.com/p/88d62bbdaaf5)
## JQuery
*   [YOU MIGHT NOT NEED JQUERY](https://link.jianshu.com?t=http://youmightnotneedjquery.com/)*   [jQuery API 中文文档](https://link.jianshu.com?t=http://www.jquery123.com)*   [hemin 在线版](https://link.jianshu.com?t=http://hemin.cn/jq)*   [css88 jq api](https://link.jianshu.com?t=http://www.css88.com/jqapi-1.9/on)*   [css88 jqui api](https://link.jianshu.com?t=http://www.css88.com/jquery-ui-api)*   [学习jquery](https://link.jianshu.com?t=http://learn.jquery.com)*   [jquery 源码查找](https://link.jianshu.com?t=http://james.padolsey.com/jquery)*   [Web前端资源汇总(jQuery,Js,Css3等)](https://link.jianshu.com?t=http://www.cnblogs.com/jihua/p/webfront.html)
## Angular JS
*   [Angular.js 的一些学习资源](https://link.jianshu.com?t=https://github.com/dolymood/AngularLearning)*   [angularjs中文社区](https://link.jianshu.com?t=http://angularjs.cn)*   [Angularjs源码学习](https://link.jianshu.com?t=http://www.cnblogs.com/xuwenmin888/p/3739096.html)*   [Angularjs源码学习](https://link.jianshu.com?t=http://www.ifeenan.com/?c=AngularJS)*   [angular对bootstrap的封装](https://link.jianshu.com?t=http://angular-ui.github.io/bootstrap)*   [angularjs + nodejs](https://link.jianshu.com?t=https://cnodejs.org/topic/51404e0f069911196d2e3923)*   [吕大豹 Angularjs](https://link.jianshu.com?t=http://www.cnblogs.com/lvdabao/tag/AngularJs)*   [AngularJS 最佳实践](https://link.jianshu.com?t=http://www.infoq.com/cn/news/2013/02/angular-web-app)*   [Angular的一些扩展指令](https://link.jianshu.com?t=http://www.lovelucy.info/angularjs-best-practices.html)*   [Angular数据绑定原理](https://link.jianshu.com?t=https://github.com/Pasvaz/bindonce)*   [一些扩展Angular UI组件](https://link.jianshu.com?t=https://github.com/angular-ui)*   [Ember和AngularJS的性能测试](https://link.jianshu.com?t=http://voidcanvas.com/emberjs-vs-angularjs-performance-testing)*   [带你走近AngularJS - 基本功能介绍](https://link.jianshu.com?t=http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html)*   [Angularjs开发指南](https://link.jianshu.com?t=http://angular.duapp.com/docs/guide)*   [Angularjs学习](https://link.jianshu.com?t=http://www.cnblogs.com/amosli/p/3710648.html)*   [不要带着jQuery的思维去学习AngularJS](https://link.jianshu.com?t=http://www.rainweb.cn/article/angularjs-jquery.html)*   [angularjs 学习笔记](https://link.jianshu.com?t=http://wangjiatao.diandian.com/?tag=angularjs)*   [angularjs 开发指南](https://link.jianshu.com?t=http://www.angularjs.cn/T008)*   [angularjs 英文资料](https://link.jianshu.com?t=https://github.com/jmcunningham/AngularJS-Learning)*   [angular bootstrap](https://link.jianshu.com?t=http://angular-ui.github.io/bootstrap)*   [angular jq mobile](https://link.jianshu.com?t=https://github.com/opitzconsulting/jquery-mobile-angular-adapter)*   [angular ui](https://link.jianshu.com?t=http://mgcrea.github.io/angular-strap)*   [整合jQuery Mobile+AngularJS经验谈](https://link.jianshu.com?t=http://www.tuicool.com/articles/7ZZVr2)*   [有jQuery背景，该如何用AngularJS编程思想](https://link.jianshu.com?t=http://blog.jobbole.com/46589/)*   [AngularJS在线教程](https://link.jianshu.com?t=http://each.sinaapp.com/angular)*   [angular学习笔记](https://link.jianshu.com?t=http://www.zouyesheng.com/angular.html)
## React
*   [react.js中文论坛](https://link.jianshu.com?t=http://www.react-china.org)*   [react.js官方网址](https://link.jianshu.com?t=https://facebook.github.io/react/index.html)*   [react.js官方文档](https://link.jianshu.com?t=https://facebook.github.io/react/docs/getting-started.html)*   [react.jsmaterialUI](https://link.jianshu.com?t=http://material-ui.com/#)*   [react.jsTouchstoneJSUI](https://link.jianshu.com?t=http://touchstonejs.io)*   [react.jsamazeuiUI](https://link.jianshu.com?t=http://amazeui.org/react)*   [React入门实例教程-阮一峰](https://link.jianshu.com?t=http://www.ruanyifeng.com/blog/2015/03/react.html)*   [ReactNative中文版](https://link.jianshu.com?t=http://wiki.jikexueyuan.com/project/react-native)*   [Webpack和React小书-前端乱炖](https://link.jianshu.com?t=http://www.html-js.com/article/Fakefish%203053)*   [Webpack和React小书-gitbook](https://link.jianshu.com?t=https://fakefish.github.io/react-webpack-cookbook)*   [webpack](https://link.jianshu.com?t=https://github.com/webpack/webpack)*   [Webpack，101入门体验](https://link.jianshu.com?t=http://html-js.com/article/3009)*   [webpack入门教程](https://link.jianshu.com?t=http://html-js.com/article/3113)*   [基于webpack搭建前端工程解决方案探索](https://link.jianshu.com?t=http://segmentfault.com/a/1190000003499526)
## Vue
*   [Vue2.0](https://link.jianshu.com?t=https://vuefe.cn/)*   [Vue](https://link.jianshu.com?t=http://cn.vuejs.org)*   [Vue Router](https://link.jianshu.com?t=https://router.vuejs.org/)*   [Vuex](https://link.jianshu.com?t=https://vuex.vuejs.org/)*   [Vue-Cli](https://link.jianshu.com?t=https://github.com/vuejs/vue-cli)*   [Vue 论坛](https://link.jianshu.com?t=http://forum.vuejs.org)*   [Vue 聊天室](https://link.jianshu.com?t=https://gitter.im/vuejs/vue)*   [Vue 入门指南](https://link.jianshu.com?t=http://www.cnblogs.com/aaronjs/p/3660102.html)*   [Vue 的一些资源索引](https://link.jianshu.com?t=http://segmentfault.com/a/1190000000411057)*   [awesome-vue](https://link.jianshu.com?t=https://github.com/vuejs/awesome-vue)*   [vue-syntax-highlight](https://link.jianshu.com?t=https://github.com/vuejs/vue-syntax-highlight)
## Node JS
*   [Node.js 包教不包会](https://link.jianshu.com?t=https://github.com/alsotang/node-lessons)*   [一个nodejs博客](https://link.jianshu.com?t=http://60sky.com)*   [【NodeJS 学习笔记04】新闻发布系统](https://link.jianshu.com?t=http://www.cnblogs.com/yexiaochai/p/3536547.html)*   [过年7天乐，学nodejs 也快乐](https://link.jianshu.com?t=http://www.cnblogs.com/qqloving/p/3541099.html)*   [七天学会NodeJS](https://link.jianshu.com?t=https://github.com/nqdeng/7-days-nodejs)*   [Nodejs学习笔记（二）— 事件模块](https://link.jianshu.com?t=http://www.cnblogs.com/zhongweiv/p/nodejs_events.html)*   [nodejs入门](https://link.jianshu.com?t=http://www.cnblogs.com/liusuqi/p/3735491.html)*   [angularjs nodejs](https://link.jianshu.com?t=https://github.com/zensh/jsgen)*   [从零开始nodejs系列文章](https://link.jianshu.com?t=http://blog.fens.me/series-nodejs)*   [理解nodejs](https://link.jianshu.com?t=http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb)*   [nodejs事件轮询](https://link.jianshu.com?t=http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop)*   [node入门](https://link.jianshu.com?t=http://www.nodebeginner.org/index-zh-cn.html)*   [nodejs cms](https://link.jianshu.com?t=http://ourjs.com/detail/53e1f281c5910a9806000001)*   [Node初学者入门，一本全面的NodeJS教程](https://link.jianshu.com?t=http://ourjs.com/detail/529ca5950cb6498814000005)*   [NodeJS的代码调试和性能调优](https://link.jianshu.com?t=http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line)
## JS Template
*   [template-chooser](https://link.jianshu.com?t=http://garann.github.io/template-chooser)*   [artTemplate](https://link.jianshu.com?t=https://github.com/aui/artTemplate)*   [tomdjs](https://link.jianshu.com?t=https://github.com/aui/tmodjs/blob/master/README.md)*   [淘宝模板juicer模板](https://link.jianshu.com?t=http://juicer.name/docs/docs_zh_cn.html)*   [Fxtpl v1.0 繁星前端模板引擎](https://link.jianshu.com?t=http://koen301.github.io/fxtpl)*   [laytpl](https://link.jianshu.com?t=http://laytpl.layui.com)*   [mozilla - nunjucks](https://link.jianshu.com?t=https://github.com/mozilla/nunjucks)*   [Juicer](https://link.jianshu.com?t=https://github.com/PaulGuo/Juicer)*   [dustjs](https://link.jianshu.com?t=http://akdubya.github.io/dustjs)*   [etpl](https://link.jianshu.com?t=http://ecomfe.github.io/etpl)
## 移动端
*   [fastclick](https://link.jianshu.com?t=https://github.com/ftlabs/fastclick)*   [no-click-delay](https://link.jianshu.com?t=https://github.com/mmastrac/jquery-noclickdelay)*   [【敏捷开发】Android团队开发规范](https://link.jianshu.com?t=http://www.cnblogs.com/lcw/p/3619181.html)*   [Android 开发规范与应用](https://www.jianshu.com/p/4390f4fe19b3)*   [ionic](https://link.jianshu.com?t=https://github.com/ychow/ionic-guide)
## 移动端 API
*   [99移动端知识集合](https://link.jianshu.com?t=https://github.com/jtyjty99999/mobileTech)*   [移动端前端开发知识库](https://link.jianshu.com?t=https://github.com/AlloyTeam/Mars)*   [移动前端的一些坑和解决方法（外观表现）](https://link.jianshu.com?t=http://caibaojian.com/mobile-web-bug.html)*   [【原】移动web资源整理](https://link.jianshu.com?t=http://www.cnblogs.com/PeunZhang/p/3407453.html)*   [zepto 1.0 中文手册](https://link.jianshu.com?t=http://mweb.baidu.com/zeptoapi)*   [zepto 1.0 中文手册](https://link.jianshu.com?t=http://www.html-5.cn/Manual/Zepto)*   [zepto 1.1.2](https://link.jianshu.com?t=http://www.css88.com/doc/zeptojs_api)*   [zepto 中文注释](https://link.jianshu.com?t=http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html)*   [jqmobile 手册](https://link.jianshu.com?t=http://app-framework-software.intel.com/api.php)*   [移动浏览器开发集合](https://link.jianshu.com?t=https://github.com/maxzhang/maxzhang.github.com/issues)*   [移动开发大杂烩](https://link.jianshu.com?t=https://github.com/hoosin/mobile-web-favorites)
## 综合 API
*   [javascripting](https://link.jianshu.com?t=http://www.javascripting.com)*   [各种流行库搜索](https://link.jianshu.com?t=http://microjs.com)*   [runoob.com-包含各种API集合](https://link.jianshu.com?t=http://www.runoob.com)*   [开源中国在线API文档合集](https://link.jianshu.com?t=http://tool.oschina.net/apidocs)*   [devdocs(英文综合API网站)](https://link.jianshu.com?t=http://devdocs.io)
## 其他 API
*   [HTTP API 设计指南](https://link.jianshu.com?t=http://segmentfault.com/bookmark/1230000002521721)*   [javascript流行库汇总](https://link.jianshu.com?t=javascriptoo)*   [验证api](https://link.jianshu.com?t=http://niceue.com/validator/demo/index.php)*   [underscore 中文手册](https://link.jianshu.com?t=http://www.css88.com/doc/underscore)*   [underscore源码分析](https://link.jianshu.com?t=http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031)*   [underscore源码分析-亚里士朱德的博客](https://link.jianshu.com?t=http://yalishizhude.github.io/tags/underscore)*   [underscrejs en api](https://link.jianshu.com?t=http://underscorejs.org)*   [lodash - underscore的代替品](https://link.jianshu.com?t=https://lodash.com)*   [ext4api](https://link.jianshu.com?t=http://extjs-doc-cn.github.io/ext4api)*   [qwrap手册](https://link.jianshu.com?t=http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm)*   [缓动函数](https://link.jianshu.com?t=http://easings.net/zh-cn)*   [svg 中文参考](https://link.jianshu.com?t=http://www.w3school.com.cn/svg/svg_reference.asp)*   [svg mdn参考](https://link.jianshu.com?t=https://developer.mozilla.org/en-US/docs/Web/SVG)*   [svg 导出 canvas](https://link.jianshu.com?t=https://github.com/gabelerner/canvg)*   [svg 导出 png](https://link.jianshu.com?t=https://github.com/exupero/saveSvgAsPng)*   [ai-to-svg](https://link.jianshu.com?t=http://www.zamzar.com/convert/ai-to-svg)*   [localStorage 库](https://link.jianshu.com?t=https://github.com/machao/localStorage)
## 服务器端
*   [Nodejs](https://link.zhihu.com/?target=https%3A//nodejs.org/zh-cn/)*   [Node入门](https://link.zhihu.com/?target=http%3A//www.nodebeginner.org/index-zh-cn.html)*   [7天学会NodeJS](https://link.zhihu.com/?target=https%3A//nqdeng.github.io/7-days-nodejs/)*   [MongoDB](https://link.zhihu.com/?target=https%3A//www.mongodb.com/)*   [NodeJS与MongoDB交互](https://link.zhihu.com/?target=http%3A//www.cnblogs.com/zhongweiv/p/node_mongodb.html)
## 技能图谱
*   [StuQ技能图谱](https://link.zhihu.com/?target=http%3A//skill-map.stuq.org/)*   [Frontend Knowledge Structure](https://link.zhihu.com/?target=http%3A//html5ify.com/fks/)
### 在线资源
*   [大前端导航](https://link.zhihu.com/?target=http%3A//www.daqianduan.com/nav)*   [Frontend Stuff](https://link.zhihu.com/?target=https%3A//github.com/moklick/frontend-stuff)*   [Frontend directory](https://link.zhihu.com/?target=https%3A//frontend.directory/)*   [Frontend Interview Questions](https://link.zhihu.com/?target=https%3A//github.com/h5bp/Front-end-Developer-Interview-Questions)
## 在线书籍
*   [Front-end Developer HandBook](https://link.zhihu.com/?target=https%3A//www.gitbook.com/book/dwqs/frontenddevhandbook/)*   [Front-end Database](https://link.zhihu.com/?target=https%3A//leohxj.gitbooks.io/front-end-database/)*   [Frontend Notebook](https://link.zhihu.com/?target=https%3A//li-xinyang.gitbooks.io/frontend-notebook/)
## 推荐书目
*   基础
*   [深入浅出HTML与CSS、XHTML](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/1799652/)*   [HTML & CSS设计与构建网站](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/21338365/)*   [Pro Git中文版](https://link.zhihu.com/?target=http%3A//iissnan.com/progit/)*   [鸟哥的linux私房菜](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/4889838/)
*   中级
*   [Head First HTML5 Programming](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/19894872/)*   [JavaScript权威指南](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/10546125/)*   [JavaScript语言精粹](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/3590768/)*   [JavaScript & jQuery交互式Web前端开发](https://link.zhihu.com/?target=https%3A//www.amazon.cn/JavaScript-jQuery%25E4%25BA%25A4%25E4%25BA%2592%25E5%25BC%258FWeb%25E5%2589%258D%25E7%25AB%25AF%25E5%25BC%2580%25E5%258F%2591-%25E8%25BE%25BE%25E5%2585%258B%25E7%2589%25B9/dp/B010L41T5O/)*   [深入浅出Ajax](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/3136781/)
*   高级
*   [JavaScript高级程序设计](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/10546125/)*   [HTML5高级程序设计](https://link.zhihu.com/?target=http%3A//book.douban.com/subject/5402708/)*   [CSS权威指南](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/2308234/)*   [深入浅出Node.js](https://link.zhihu.com/?target=http%3A//book.douban.com/subject/25768396/)


## 开发工具
**设计软件**
> 前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。
*   Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下
*   [前端工程师必备的PS技能——切图篇](https://link.zhihu.com/?target=http%3A//www.imooc.com/learn/506)
*   Sketch 轻量且功能强大，切图迅速高效，为UI设计而生的Mac App
*   [Sketch切图教程](https://link.zhihu.com/?target=http%3A//www.sketchs.cn/tutorials/detail/257.html)
**编辑器**
> 工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的两个。
*   [Sublime text](https://link.zhihu.com/?target=https%3A//www.sublimetext.com/) 最性感的编辑器，搭配插件各种好用
*   [配置和使用方法](https://link.zhihu.com/?target=https%3A//www.zybuluo.com/king/note/47271)
*   [Webstorm](https://link.zhihu.com/?target=https%3A//www.jetbrains.com/webstorm/) 功能强大，学生可以免费用的前端开发IDE
**代码管理**
> 不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。
*   Linux 你需要学会在命令行打开移动复制文件等最基本的操作
*   [Linux最常用的20条命令](https://link.zhihu.com/?target=http%3A//blog.csdn.net/ljianhui/article/details/11100625)*   [鸟哥的linux私房菜——基础篇](https://link.zhihu.com/?target=http%3A//linux.vbird.org/linux_basic/)
*   Git 写代码一定会用到的版本控制软件，入门很快就能学会
*   [猴子都能懂的Git入门](https://link.zhihu.com/?target=http%3A//backlogtool.com/git-guide/cn/)
**测试工具**
> 预览和调试必不可少，编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。
*   [Chrome Dev Tools](https://link.zhihu.com/?target=http%3A//wiki.jikexueyuan.com/project/chrome-devtools/overview.html) 谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里啦
## 最后
说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
我可以将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在持续整理更新中，希望大家都能找到心仪的工作。
### 有需要的朋友[**点击这里免费领取题目+解析PDF。**](https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ)