原网址https://segmentfault.com/a/1190000007062464

内容精简

资源这么多，多看看多学习再总结肯定是好的。多读读就算看重了不算浪费时间，毕竟一千个读者就有一千个林黛玉，还有温故而知新，说不定多读一些内容，就发现惊喜了呢。不过，在此也精简一些内容，就1~2项，只供参考。更多内容细看分类。

• 知乎：程序员应该如何注意身体健康？

• js：JavaScript 标准参考教程

• js：JavaScript 秘密花园

• Es6：ECMAScript 6入门

• Es6：深入浅出ES6

• css：CSS 参考手册

• html:HTML超文本标记语言

• jquery：从零开始学习jQuery

• jquery：前端开发者都应知道的 jQuery 小技巧

• 移动Web：腾讯移动Web前端知识库

• 移动Web：移动web知识资料集-白树

• 小程序：微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件...

• Git：Git教程 - 廖雪峰

• Git：设置Git快捷命令

• React：React 入门实例教程 - 阮一峰

• Angular:Angular.js 的一些学习资源

• underscore：underscore.js 手册

• vue：vue.js API 中文

• vue：vue.js 中文入门 - vuejs作者

• RegExp：RegExp对象 - 阮一峰

• RegExp：正则表达式&常用代码

• Node：Node.js 包教不包会

• Node：七天学会NodeJS

• Express：Express 4.x API 中文手册

• Koa：Koa 手册

• 前端：Front-End-Develop-Guide 前端开发指南

• 模块化：JavaSript模块规范 - AMD规范与CMD规范介绍

• 规范化：通过分析github代码库总结出来的工程师代码书写习惯

• 工程化：前端工程——基础篇

• 关注：github上值得关注的前端项目

• 博客：淘宝前端团队

• 博客：Tencent AlloyTeam 2016

• 博客：FEX 百度WEB前端研发部

• 工具：sublime-text & 资料齐聚

• 工具：chrome 开发者工具的 15 个小技巧

• 优化：转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化

• 面试：前端开发面试题

• 面试：前端开发面试题 - GitHub

• 面试：前端开发面试问题及答案整理

前端资源教程类

各种教程会有很多，我也精简的挑选了一些。选择一两个合适的就好了。有时间多看看多比比也是极好的。

JavaScript

• Javascript教程-小白的零基础JavaScript全栈教程-瘳雪峰

• JavaScript 标准参考教程

• You-Dont-Know-JS -- 不建议初学者查看

• You-Dont-Know-JS -- 翻译版

• 重新介绍 JavaScript（JS 教程）

• 前端入门教程

• 前端开发者手册

• JavaScript学习总结-trigkit4

• 温故js系列-对知识点进行回顾知新

• JS函数式编程指南

• JavaScript Promise迷你书（中文版）

• 精通JavaScript开发-智能社

• JavaScript秘密花园

• JavaScript 资源大全中文版

• JavaScript闯关记 - 编辑中

• JavaScript练习网站收集

• 统一回复《怎么学JavaScript？》

• runjs - js在线编辑学习

• 常用的Javascript设计模式

• 45个实用的JavaScript技巧、窍门和最佳实践

• 给JavaScript初学者的24条最佳实践

• 编写快速、高效的JavaScript代码

• Ajax知识体系

• javascript功能插件大集合

• Moment.js

• Moment.js 中文网

• TypeScript 2.1 新特性一览

• JS Tips – A JS tip per day!

ES6

• ECMAScript 6入门

• 深入浅出ES6

• 探索ES6

• ES6 你可能不知道的事 - 基础篇

• ES6 你可能不知道的事 - 进阶篇

HTML5

• HTML5与CSS3权威指南（书籍）

• html:HTML超文本标记语言

• 译谷歌 HTML/CSS 规范

• HTML5菜鸟教程

• 《每周一点canvas动画》

• 玩转html5<canvas>画图

• HTML5+NodeJs实现WebSocket即时通讯

CSS3

• CSS 语法参考

• CSS 参考手册

• 腾讯css3动画制作工具

• Bootstrap 中文网

• css3 js 移动大杂烩

• Animate.css

• Sass guide

• Sass中文文档

• less

• 谈谈一些有趣的CSS题目系列

• CSS居中：完全指南（译）

• 业务代码中可用的css小技巧

• You Don‘t Know CSS（一）

• You Don‘t Know CSS（二）

jQuery

• 从零开始学习jQuery

• jQuery API 中文文档

• learn JQuery

• JQuery 源码查找

• 前端开发者都应知道的 jQuery 小技巧

• 10 个 jQuery 图表插件推荐

移动WEB

• 腾讯移动Web前端知识库

• 支付宝-无线Web开发经验谈

• 移动web知识资料集-白树

• 移动端学习 - mobileTech

• 移动前端的一些坑和解决方法（外观表现）

• hotcss 移动端布局终极解决方案 - 让移动端布局开发更加容易

• zepto

• jqmobile 手册

• swiper中文网

• iscroll

• 移动开发大杂烩

• 特色的HTML框架可以创建精美的iOS应用-框架

微信小程序

• 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件...

Git

• Git教程 - 廖雪峰

• GitHub 漫游指南

• 企业开发git工作流模式探索

• Git资料

• Git常用命令

• 设置Git快捷命令

React

• react.js 官方文档

• React 入门实例教程 - 阮一峰

• React Native 中文版

• 深入浅出React（一）：React的设计哲学 - 简单之美

• 一看就懂的ReactJs入门教程（精华版）

• React china 中文社区

• 深入浅出React（系列）

• React 设计思想

Angularjs

• Angular.js 的一些学习资源

• 关于 AngularJS 框架的使用有哪些经验值得分享？

• 有jQuery背景，该如何用AngularJS编程思想

• AngularJS 源码分析

• AngularJS 中文社区

• AngularJS 入门教程 图灵社区

Underscore.js

• underscore.js 手册

• underscore.js源码分析

vue.js

• vuejs 英文官网

• vuejs 中文官网

• vue.js API 中文

• vue.js 中文入门 - vuejs作者

• vue github

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库

• Welcome to the Vue Forum!

• vue 性能优化

• Vue 2.0 构建单页应用最佳实战

• Vue 2.0源码学习

• Vue中你不知道但却很实用的黑科技

正则表达式

• RegExp对象 - 阮一峰

• 正则表达式&常用代码

• 正则表达式前端手册

• 进阶正则表达式

• 正则表达式 - MDN

• ES6正则的扩展

• 在线正则表达式测试

NodeJs

• 深入浅出NodeJs（推荐书籍）

• Node.js 包教不包会

• 七天学会NodeJS

• NodeJs学习笔记

• NodeJs-阮一峰

• Node.js 究竟是什么？

• NodeJs的代码调试和性能调优

• Express 框架学习

• Express 4.x API 中文手册

• Koa 框架学习

• Koa 手册

• ejs Embedded JavaScript Template

简单算法

• 数据结构与算法 JavaScript 描述. 章节练习

• 常见排序算法（JS版

• JS算法 数据结构 精华集

• 算法系列15天速成——第一天 七大经典排序【上】

• 常见排序算法及优化

前端综合

• Front-End-Develop-Guide 前端开发指南

• 前端知识体系

• 前端知识结构

• 前端开发的历史和趋势

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

• 结合个人经历总结的前端入门方法

• w3help

• 响应式布局指南

• 关于前端开发谈谈单元测试

前端模块化开发类

• JavaSript模块规范 - AMD规范与CMD规范介绍

• Javascript模块化编程（一）：模块的写法 阮一峰

• Javascript模块化编程（二）：AMD规范 阮一峰

• Javascript模块化编程（三）：require.js的用法 阮一峰

• RequireJS入门（一）Snandy

• RequireJS入门（二）Snandy

• RequireJS入门（三）Snandy

• RequireJS进阶（一）Snandy

• RequireJS进阶（二）Snandy

• RequireJS进阶（二）Snandy

• RequireJS 入门指南

• Seajs 提供简单、极致的模块化开发体验

前端开发规范类

• 通过分析github代码库总结出来的工程师代码书写习惯

• HTML&CSS编码规范 by @mdo

• Javascript编码规范-Max Yu

• CSS编码规范-Max Yu

• 前端编码规范之JavaScript-小胡子哥

• 前端编码规范之css-小胡子哥

• 前端开发规范手册

• 前端代码规范 及 最佳实践

• 百度前端规范

• 网易前端规范

前端工程化类

工程化的工具都不是绝对的，选择合适的使用，项目多了，说不定你都用上了也不一定。反正在我身边我知道的项目中，不同项目用着不同工具，基本都包含了。

• 前端工程——基础篇

• Gulp中文网

• Gulp官网

• Gulp：任务自动管理工具 - 阮一峰

• Gulp 入门指南

• Gulp入门教程

• Grunt中文网

• Grunt官网

• fis 前端工具框架

• fis 文档

• Webpack

• Webpack 中文指南

• Webpack傻瓜式指南（一）

• Webpack傻瓜指南（二）开发和部署技巧

• 入门Webpack，看这篇就够了

• Webpack 2 入门教程

前端开源Git类

• Facebook Projects

• Baidu FEX team

• nzakas

• chrome开发团队成员

• 玉伯 -支付宝前端Leader

• 豆瓣前端Leader

• JacksonTian 朴灵

• 伯乐在线

• 淘宝UED北京团队

• 国外TJ大神

• substack

• 支付宝前端美女沉鱼~

• fengmk2

• github上值得关注的前端项目

前端知名博客类

SF内有很多高手，可以前去排行榜看看。。。

• 淘宝前端团队

• Tencent AlloyTeam 2016

• FEX 百度WEB前端研发部

• EFE 百度EFE(Excellent FrontEnd)技术体系

• qunaer UED

• Ruby-China

• CNodeJs

• i5ting狼叔

• 伯乐在线

• 博客园

• 大漠

• 朴灵

• justjavac - 迷渡

• 阮一峰的网络日志

• 三生石上-专注于前端（JavaScript、jQuery、ExtJS）

• 司徒正美-Ruby‘s Louvre

• 张鑫旭 - CSSCSSCSS

• Snandy

前端开发工具类

• sublime-text & 资料齐聚

• SublimeText-快捷键大全

• Gif多图：我常用的 16 个 Sublime Text 快捷键

• AngularJS最理想开发工具WebStorm

• Fiddler调式深入研究(一)

• Fiddler实战深入研究(二)

• 移动web调式利器---Rosin研究

• 移动开发中Fiddler的那些事儿

• 微信内移动前端开发抓包调试工具fiddler使用教程

• Google Chrome 官方

• Chrome开发者工具不完全指南（一、基础功能篇）

• Chrome开发者工具不完全指南（二、进阶篇）

• Chrome开发者工具不完全指南（三、性能篇）

• Chrome开发者工具不完全指南（四、性能进阶篇）

• Chrome开发者工具不完全指南（五、移动篇）

• chrome开发工具快捷键

• Chrome 开发工具 Workspace 使用

• chrome 开发者工具的 15 个小技巧

• 天啦噜！原来Chrome自带的开发者工具还能这么用！

• 神器——Chrome开发者工具(一)

• 使用Chrome开发工具调试Canvas

• WEB调试工具---Firebug-慕课网

• Firefox 开发工具 WebIDE

• Firebug入门指南 - 阮一峰

• Firebug控制台详解 - 阮一峰

• 移动端前端开发调试

• 屌爆了,完美调试 微信webview(x5)

• 微信调试的那些事

• 在线二维码图片生成器

• Smart PNG and JPEG compression在线图片压缩

• easyicon 图标下载

• Icon Hover Effects

前端性能优化类

• Javascript高性能动画与页面渲染

• 移动H5前端性能优化指南

• 给网页设计师和前端开发者看的前端性能优化

• 转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化

• Yahoo!团队实践分享:网站性能优化的34条黄金守则(一)—内容

• 网站性能优化指南：什么使我们的网站变慢？

• 分享网页加载速度优化的一些技巧

• 【高性能前端1】高性能HTML -

• 【高性能前端2】高性能CSS

• 前端工程精粹（一）：静态资源版本更新与缓存

• 前端工程精粹（二）：静态资源管理与模板框架

• 让网站提速的最佳前端实践

• 阿里无线前端性能优化指南 (Pt.1 加载期优化)

• pagespeed - 检测网页性能及优化建议

前端面试类

面试题可以供我们学习补漏，但面试题始终有一种应对面试的感觉。请相信面试官能轻易的看出你的斤两，掌握基础和提升技术才是最重要的。这些面试题也是极好的。

• 前端开发面试题

• 前端开发面试题 - GitHub

• 前端开发面试问题及答案整理

• front-end development interview questions and answers

• 如何面试一名前端开发工程师？

• 前端实习生面试总结

• 前端开发面试题大收集

• 如何面试前端工程师？ - 知乎

• 5个经典的前端面试问题

• 10个常见的Node.js面试题

• 百度FEX 的面试

• 40 个重要的 HTML5 面试问题及答案

• BAT及各大互联网公司2014前端笔试面试题：JavaScript篇

• TCP三次握手&Render Tree页面渲染=>从输入URL到页面显示的过程

• 前端进阶-让你升级的网络知识

前端网站集合