Web前端开发是从网页制作演变而来的，在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人速度增长，XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。
对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。
前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
下面不多说，直接贴学习资源。
综合类
综合类地址前端知识体系
http://www.cnblogs.com/sb19871023/p/3894452.html
前端知识结构
https://github.com/JacksonTian/fks
Web前端开发大系概览
https://github.com/unruledboy/WebFrontEndStack
Web前端开发大系概览-中文版
http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
Web Front-end Stack v2.2
免费的编程中文书籍索引
https://github.com/justjavac/free-programming-books-zh_CN
前端书籍
https://github.com/dypsilon/frontend-dev-bookmarks
前端免费书籍大全
https://github.com/vhf/free-programming-books
前端知识体系
http://www.cnblogs.com/sb19871023/p/3894452.html
免费的编程中文书籍索引
https://github.com/justjavac/free-programming-books-zh_CN
智能社 - 精通JavaScript开发
http://study.163.com/course/introduction/224014.htm
重新介绍 JavaScript（JS 教程）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
麻省理工学院公开课：计算机科学及编程导论
http://v.163.com/special/opencourse/bianchengdaolun.html
JavaScript中的this陷阱的最全收集–没有之一
http://segmentfault.com/a/1190000002640298
JS函数式编程指南
https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise迷你书（中文版）
http://liubin.github.io/promises-book
腾讯移动Web前端知识库
https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide 前端开发指南
https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
前端开发笔记本
https://li-xinyang.gitbooks.io/frontend-notebook/content
大前端工具集 - 聂微东
https://github.com/nieweidong/fetool
前端开发者手册
https://dwqs.gitbooks.io/frontenddevhandbook/content
入门类
入门类地址前端入门教程
http://www.cnblogs.com/jikey/p/3613082.html
瘳雪峰的Javascript教程
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
前端工程师必备的PS技能——切图篇
结合个人经历总结的前端入门方法
https://github.com/qiu-deqing/FE-learning
工具类
前端人的俱乐部
真可以解放你的收藏夹如何优雅地使用Sublime Text
http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
新编码神器Atom使用纪要
http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
css sprite 雪碧图制作
版本控制入门 – 搬进 Github
http://www.imooc.com/learn/390
Grunt-beginner前端自动化工具
IntelliJ IDEA 简体中文专题教程
https://github.com/judasn/IntelliJ-IDEA-Tutorial
SublimeText
https://github.com/jikeytang/sublime-text
Atom
visual studio code
综合效果搜索平台
综合效果搜索平台地址
JavaScript 资源大全中文版
https://github.com/jobbole/awesome-javascript-cn
100+ 超全的web开发工具和资源
设计师网址导航
快搜
阿里iconfont
zoommyapp.com
高质量图库unsplash.com
高质量图库www.pinterest.com
图库New Old Stock
复古风图库500px.com
唯美照片效果网
花瓣网
优美图
codepen
摄图网
常用的JavaScript代码片段
团队Blog
团队Blog-Name地址
腾讯ISUX
奇舞周刊
淘宝前端团队（FED）
码农周刊
WEB前端开发
A JS tip per day!
腾讯全端 AlloyTeam
http://www.alloyteam.com/webdevelop/
阿里巴巴-U一点
百度WEB前端研发部
携程设计委员会
平安科技移动开发二队技术周报
https://github.com/PaicHyperionDev/MobileDevWeekly
开发中心
开发中心地址mozilla js参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
chrome开发中心（chrome的内核已转向blink）
https://developer.chrome.com/extensions/api_index.html
safari开发中心
https://developer.apple.com/library/safari/navigation
microsoft js参考
https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js秘密花园
http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js秘密花园
http://bonsaiden.github.io/JavaScript-Garden/zh
w3help
综合Bug集合网站
Nodejs
Nodejs地址Node.js 包教不包会
https://github.com/alsotang/node-lessons
一个nodejs博客
【NodeJS 学习笔记04】新闻发布系统
http://www.cnblogs.com/yexiaochai/p/3536547.html
过年7天乐，学nodejs 也快乐
http://www.cnblogs.com/qqloving/p/3541099.html
七天学会NodeJS
https://github.com/nqdeng/7-days-nodejs
Nodejs学习笔记（二）— 事件模块
http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
nodejs入门
http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs
https://github.com/zensh/jsgen
从零开始nodejs系列文章
http://blog.fens.me/series-nodejs
理解nodejs
http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs事件轮询
http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
node入门
http://www.nodebeginner.org/index-zh-cn.html
nodejs cms
http://ourjs.com/detail/53e1f281c5910a9806000001
Node初学者入门，一本全面的NodeJS教程
http://ourjs.com/detail/529ca5950cb6498814000005
NodeJS的代码调试和性能调优
http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line
综合API
综合API地址
OverAPI.com
javascripting
各种流行库搜索
runoob.com-包含各种API集合
开源中国在线API文档合集
http://tool.oschina.net/apidocs
devdocs
英文综合API网站
Ecmascript
Ecmascript地址Understanding ECMAScript 6 - Nicholas C. Zakas
https://leanpub.com/understandinges6/read
exploring-es6
https://leanpub.com/exploring-es6/read
exploring-es6翻译
https://github.com/es6-org/exploring-es6
exploring-es6翻译后预览
http://es6-org.github.io/exploring-es6
阮一峰 es6
阮一峰 Javascript
http://javascript.ruanyifeng.com
ECMA-262，第 5 版
es5
Vue
Vue.js地址
Vue2.0
Vue
Vue Router
Vuex
Vue-Cli
https://github.com/vuejs/vue-cli
Vue 论坛
Vue 聊天室
Vue 入门指南
http://www.cnblogs.com/aaronjs/p/3660102.html
Vue 的一些资源索引
http://segmentfault.com/a/1190000000411057
awesome-vue
https://github.com/vuejs/awesome-vue
vue-syntax-highlight
https://github.com/vuejs/vue-syntax-highlight
如何写一手漂亮的 Vue
http://jeffjade.com/2017/03/11/120-how-to-write-vue-better/?me
Angularjs
Angularjs地址Angular.js 的一些学习资源
https://github.com/dolymood/AngularLearning
angularjs中文社区
Angularjs源码学习
http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs源码学习
http://www.ifeenan.com/?c=AngularJS
angular对bootstrap的封装
http://angular-ui.github.io/bootstrap
angularjs + nodejs
https://cnodejs.org/topic/51404e0f069911196d2e3923
吕大豹 Angularjs
http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS 最佳实践
http://www.infoq.com/cn/news/2013/02/angular-web-app
Angular的一些扩展指令
http://www.lovelucy.info/angularjs-best-practices.html
Angular数据绑定原理
https://github.com/Pasvaz/bindonce
一些扩展Angular UI组件
Ember和AngularJS的性能测试
http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
带你走近AngularJS - 基本功能介绍
http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs开发指南
http://angular.duapp.com/docs/guide
Angularjs学习
http://www.cnblogs.com/amosli/p/3710648.html
不要带着jQuery的思维去学习AngularJS
http://www.rainweb.cn/article/angularjs-jquery.html
angularjs 学习笔记
http://wangjiatao.diandian.com/?tag=angularjs
angularjs 开发指南
angularjs 英文资料
https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap
http://angular-ui.github.io/bootstrap
angular jq mobile
https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui
http://mgcrea.github.io/angular-strap
整合jQuery Mobile+AngularJS经验谈
http://www.tuicool.com/articles/7ZZVr2
有jQuery背景，该如何用AngularJS编程思想
http://blog.jobbole.com/46589/
AngularJS在线教程
http://each.sinaapp.com/angular
angular学习笔记
http://www.zouyesheng.com/angular.html
React
React地址react.js 中文论坛
react.js 官方网址
https://facebook.github.io/react/index.html
react.js 官方文档
https://facebook.github.io/react/docs/getting-started.html
react.js material UI
react.js TouchstoneJS UI
react.js amazeui UI
React 入门实例教程
http://www.ruanyifeng.com/blog/2015/03/react.html
React Native 中文版
http://wiki.jikexueyuan.com/project/react-native
Webpack 和 React 小书 - 前端乱炖
http://www.html-js.com/article/Fakefish%203053
Webpack 和 React 小书 - gitbook
https://fakefish.github.io/react-webpack-cookbook
webpack
https://github.com/webpack/webpack
Webpack，101入门体验
http://html-js.com/article/3009
webpack入门教程
http://html-js.com/article/3113
基于webpack搭建前端工程解决方案探索
http://segmentfault.com/a/1190000003499526
Js template
Js template地址template-chooser
http://garann.github.io/template-chooser
artTemplate
https://github.com/aui/artTemplate
tomdjs
https://github.com/aui/tmodjs/blob/master/README.md
淘宝模板juicer模板
http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 繁星前端模板引擎
http://koen301.github.io/fxtpl
laytpl
mozilla - nunjucks
https://github.com/mozilla/nunjucks
Juicer
https://github.com/PaulGuo/Juicer
dustjs
http://akdubya.github.io/dustjs
etpl
HTML5(HTML)
HTML(HTML5)地址深入理解HTML5标签
https://segmentfault.com/a/1190000002695791
如何写出高效率的HTML
https://segmentfault.com/a/1190000002680822
HTML meta标签总结与属性使用介绍
https://segmentfault.com/a/1190000004279791
戏说HTML5
http://www.cnblogs.com/dojo-lzz/p/5059316.html
CSS3(CSS)
CSS地址CSS 语法参考
http://tympanus.net/codrops/css_reference
如何编写可维护的CSS
https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS3动画手册
http://isux.tencent.com/css3/index.html
腾讯css3动画制作工具
http://isux.tencent.com/css3/tools.html
志爷css小工具集合
http://linxz.github.io/tianyizone
css3 js 移动大杂烩
http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs 触摸库
animate.css
http://daneden.github.io/animate.css
全局CSS的终结(狗带 [译]
http://www.alloyteam.com/2015/10/8536
browserhacks
移动端API
移动端API地址99移动端知识集合
https://github.com/jtyjty99999/mobileTech
移动端前端开发知识库
https://github.com/AlloyTeam/Mars
移动前端的一些坑和解决方法（外观表现）
http://caibaojian.com/mobile-web-bug.html
【原】移动web资源整理
http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 中文手册
http://www.html-5.cn/Manual/Zepto
zepto 1.1.2
http://www.css88.com/doc/zeptojs_api
zepto 中文注释
http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile 手册
http://app-framework-software.intel.com/api.php
移动浏览器开发集合
https://github.com/maxzhang/maxzhang.github.com/issues
移动开发大杂烩
https://github.com/hoosin/mobile-web-favorites
Markdown
Markdown地址Markdown 语法说明 (简体中文版
markdown入门参考
https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook
国外的在线markdown可编辑成书mdeditor
https://www.zybuluo.com/mdeditor
一款国内的在线markdown编辑器stackedit
国外的在线markdown编辑器，功能强大，同步云盘mditor
http://bh-lay.github.io/mditor
一款轻量级的markdown编辑器lepture-editor
https://github.com/lepture/editor
markdown-editor
https://github.com/jbt/markdown-editor
作业部落
功能强大，速度流畅，全平台同步
兼容性
兼容性地址esma 兼容列表
http://kangax.github.io/compat-table/es6
W3C CSS验证服务
http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse
csscreator
http://csscreator.com/properties
microsoft
https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx
在线测兼容-移动端
emulators
https://www.manymo.com/emulators
UI相关
UI相关地址
Foundation
http://foundation.zurb.com/?form=jeffjade.com
Bootcss
http://v3.bootcss.com/?form=jeffjade.com
Element UI
http://element.eleme.io/#/zh-CN
基于Vue
ANT DESIGN
一个 UI 设计语言Smart UI
MetroUICSS
http://www.w3cplus.com/MetroUICSS
Semantic
Layui
http://www.layui.com/?form=jeffjade.com
Buttons
http://alexwolfe.github.io/Buttons
kitecss
http://hiloki.github.io/kitecss
pintuer
amazeui
worldhello
http://www.worldhello.net/gotgithub/index.html
linuxtoy
http://igit.linuxtoy.org/contents.html
gitmagic
http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn
rogerdudler
http://rogerdudler.github.io/git-guide/index.zh.html
gitref
book
gogojimmy
http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic
正则
正则地址JS正则表达式元字符
http://segmentfault.com/a/1190000002471140
正则表达式30分钟入门教程
http://deerchao.net/tutorials/regex/regex.htm
MDN-正则表达式
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
ruanyifeng - RegExp对象
http://javascript.ruanyifeng.com/stdlib/regexp.html
小胡子哥 - 进阶正则表达式
http://div.io/topic/764?page=1
is.js
https://github.com/Cedriking/is.js/blob/master/is.js
正则在线测试
前端规范
前端规范地址通过分析github代码库总结出来的工程师代码书写习惯
http://alloyteam.github.io/CodeGuide
HTML&CSS编码规范 by @mdo
团队合作的css命名规范-腾讯AlloyTeam前端团队
http://www.alloyteam.com/2011/10/css-on-team-naming/
前端编码规范之js - by yuwenhui
前端编码规范之js - by 李靖
http://www.cnblogs.com/hustskyking/p/javascript-spec.html
前端开发规范手册
http://zhibimo.com/read/Ashu/front-end-style-guide
Airbnb JavaScript 编码规范（简体中文版）
https://github.com/yuche/javascript#table-of-contents
AMD与CMD规范的区别
http://www.zhihu.com/question/20351507
AMD与CMD规范的区别
http://www.cnblogs.com/tugenhua0707/p/3507957.html
KISSY 源码规范
http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html
bt编码规范
规范加强版
https://github.com/Suxiaogang/Code_Guide
前端代码规范 及 最佳实践
百度前端规范
http://coderlmn.github.io/code-standards
百度前端规范
http://isobar-idev.github.io/code-standards
百度前端规范
http://zhuanlan.zhihu.com/fuyun/19884834
ECMAScript6 编码规范–广发证券前端团队
https://github.com/gf-rd/es6-coding-style
JavaScript 风格指南/编码规范（Airbnb公司版）
网易前端开发规范
http://nec.netease.com/standard
css模块
http://www.75team.com/archives/1049
前端规范资源列表
https://github.com/ecomfe/spec
各大公司开源项目
各大公司开源项目地址Facebook Projects
https://code.facebook.com/projects/web
百度web前端研发部
百度EFE
百度github
alloyteam
alloyteam-github
alloyteam-AlloyGameEngine
https://github.com/AlloyTeam/AlloyGameEngine
AlloyDesigner
http://alloyteam.github.io/AlloyDesigner
即时修改，即时保存，设计稿较正，其它开发辅助工具H5交互页编辑器AEditor介绍
http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao
H5动画交互页开发的工具介绍AEditor
H5动画交互页开发的工具值得订阅的weekly
https://github.com/fenbility/weekly-feed
奇舞团开源项目
Qunar UED
Scrat
常用
常用地址ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome
模拟键盘
http://mottie.github.io/Keyboard
拼音
https://github.com/hotoo/pinyin
中国个人身份证号验证
https://github.com/mc-zone/IDValidator
算法
算法地址数据结构与算法 JavaScript 描述. 章节练习
https://github.com/Ralph-Wang/algorithm.in.js
常见排序算法（JS版）
https://github.com/twobin/twobinSort
经典排序
https://github.com/luofei2011/jsAgm/blob/master/js/sort.js
常见排序算法-js版本
https://github.com/hechangmin/jssort
JavaScript 算法与数据结构 精华集
https://github.com/lightningtgc/JavaScript-Algorithms
面试常考算法题精讲
http://www.nowcoder.com/live/courses
移动端
移动端地址fastclick
https://github.com/ftlabs/fastclick
no-click-delay
https://github.com/mmastrac/jquery-noclickdelay
【敏捷开发】Android团队开发规范
http://www.cnblogs.com/lcw/p/3619181.html
Android 开发规范与应用
http://www.jianshu.com/p/4390f4fe19b3
ionic
https://github.com/ychow/ionic-guide
JSON
JSON地址模拟生成JSON数据
http://beta.json-generator.com
焦点图
焦点图地址myfocus
https://github.com/koen301/myfocus
myfocus-官方演示站
SuperSlidev2.1 – 大话主席
soChange
http://www.bujichong.com/sojs/soChange/index.html
Ext, EasyUI, J-UI 及其它各种UI方案
Ext, EasyUI, J-UI 及其它各种UI方案地址雅虎UI - CSS UI
http://developer.yahoo.com/yui/grids
extjs
https://www.sencha.com/products/extjs
ext4英文api
http://docs.sencha.com/extjs/4.0.7
ext4中文api
http://extjs-doc-cn.github.io/ext4api
jquery easyui 未压缩源代码
http://jquery-easyui.googlecode.com/svn/trunk/src
J-UI
MUI-最接近原生APP体验的高性能前端框架
Amaze UI(中国首个开源 HTML5 跨屏前端框架)
淘宝 HTML5 前端框架
KISSY - 阿里前端JavaScript库
网易Nej - Nice Easy Javascript
Kendo UI MVVM Demo
http://demos.telerik.com/kendo-ui/mvvm/index
前端架构
前端架构地址技术架构
http://www.zhihu.com/topic/19612641
前端架构
http://saito.im/note/The-Architecture-of-F2E
如何成为前端架构师
http://www.zhihu.com/question/24092572
关于前端架构-张克军
http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html
百度腾讯offer比较（腾讯游戏VS百度基础架构）
http://www.zhihu.com/question/25583350
前端导航网站
前端导航网站地址界面清爽的前端导航
前端导航
前端网址导航
前端名录
前端导航
前端开发资源
前端开发仓库 - 众多效果的收集地
前端资源导航
https://github.com/jnoodle/f2e-collect
F2E 前端导航
