Skip to content

nicejade/Front-end-tutorial

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

144 Commits
README
README
 
 
KnowledgeSystem.md
KnowledgeSystem.md
 
 
README.md
README.md
 
 
README_old.md
README_old.md
 
 
project.md
project.md
 
 

Repository files navigation

Front-end-tutorial

与时俱进版前端资源教程

目标与哲学

众所周知，前端发展如火如荼，日新月异，而且很长一段时间内都将如此。这份由晚晴幽草轩轩主正在维护的教程列表；旨在为前端学习，技能提升，视野扩展，资料查找等行个方便。将会在日常工作探索、学习中，持续保持更新，增新优之章，除旧失之文；尽可能使得这份列表保持简练，以避免信息过重且冗杂；望其能在浩如烟海的讯息中，堪有所用。详细说明，可参见：与时俱进版前端资源教程。

分类目录

🐉 The Future

🎨 Front-End Tutorial

👽 Back-End Tutorial

🎣 Front-Back-End Tutorial

🌷 Other Wizards List

相关链接

微信公众号 前端微信群 推荐 Web 应用 推荐小程序
😉 静晴轩 ✨ 大前端联盟 🎉 倾城之链 🌊 倾城之链
静晴轩 倾城之链 倾城之链 倾城之链

微注：在继续学习 & 探索 & 积累，并率先于『引』最全前端资源汇集持续更新。

综合类

综合类 地址
大前端综合教程、资源汇总 https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/front-end-tutorial.md
Roadmap to becoming a web developer in 2018 https://github.com/kamranahmedse/developer-roadmap
前端知识结构 https://github.com/JacksonTian/fks
Web前端开发大系概览 https://github.com/unruledboy/WebFrontEndStack
免费的编程中文书籍索引 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（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

工具类

工具类 地址
倾城利器之家 https://nicelinks.site/theme/tools 为极大提升效率而存
Web 开发工程师工具推荐 https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/tools-tutorial.md
前端人的俱乐部 http://f2er.club/ 真可以解放你的收藏夹
如何优雅地使用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/
IntelliJ IDEA 简体中文专题教程 https://github.com/judasn/IntelliJ-IDEA-Tutorial

综合效果搜索平台

综合效果搜索平台 地址
JavaScript 资源大全中文版 https://github.com/jobbole/awesome-javascript-cn
倾城美图之家 https://nicelinks.site/theme/picture 高质量图库集
倾城设计之家 https://nicelinks.site/theme/design 设计师的修道场
倾城程序之家 https://nicelinks.site/theme/program 程序网站导航
倾城图标之家 https://nicelinks.site/theme/icons 云集高质量图标社区
倾城社区之家 https://nicelinks.site/theme/community 云集高质量交流社区
倾城搜索直接 https://nicelinks.site/theme/search 综合 Google 搜索引擎替代品
100+ 超全的web开发工具和资源 https://xituqu.com/170.html
设计师网址导航 http://hao.uisdc.com/
Web前端导航(Alloyteam) http://www.alloyteam.com/nav/
快搜 http://so.chongbuluo.com/
阿里iconfont http://www.iconfont.cn/
zoommyapp.com http://zoommyapp.com/ 高质量图库
unsplash.com https://unsplash.com/ 高质量图库
www.pinterest.com https://www.pinterest.com/ 图库
New Old Stock http://nos.twnsnd.co 复古风图库
500px.com https://500px.com/ 唯美照片
效果网 http://www.jq22.com
花瓣网 http://huaban.com/
优美图 http://www.topit.me/
codepen http://codepen.io/
摄图网 http://699pic.com/
常用的JavaScript代码片段 http://microjs.com

入门类

入门类 地址
前端入门教程 http://www.cnblogs.com/jikey/p/3613082.html
瘳雪峰的Javascript教程 http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
前端工程师必备的PS技能——切图篇 http://www.imooc.com/view/506
结合个人经历总结的前端入门方法 https://github.com/qiu-deqing/FE-learning

团队Blog

团队Blog-Name 地址
腾讯 ISUX http://isux.tencent.com
腾讯全端 AlloyTeam http://www.alloyteam.com/webdevelop/
奇舞周刊 http://old.75team.com/weekly/
阿里巴巴 -U 一点 http://www.aliued.cn
淘宝前端团队 (FED) http://taobaofed.org
网易 FEG 前端团队 http://feg.netease.com/
网易用户体验中心 http://uedc.163.com/
码农周刊 http://weekly.manong.io
凹凸实验室 ( 京东 ) https://aotu.io/
WEB 前端开发 http://www.css88.com
百度 WEB 前端研发部 http://fex.baidu.com
搜车大无线团队博客 http://f2e.souche.com/blog/
饿了么大前端 https://zhuanlan.zhihu.com/ElemeFE
美团点评技术团队 https://tech.meituan.com/
携程设计委员会 http://ued.ctrip.com/blog/
前端观察 ( 腾讯 ) https://www.qianduan.net/
前端外刊评论 https://qianduan.group/
Awesomes-Web 前端开发资源库 https://www.awesomes.cn/
掘进 发现
Segmentfault 头条
开发者头条 前端
A JS tip per day! http://www.jstips.co
CodePen - Front End Developer Playground https://codepen.io/
Reloading – Medium https://medium.com/reloading
Cybersecurity – Medium https://medium.com/topic/cybersecurity
Hacker Noon https://hackernoon.com/
Frontend Focus https://frontendfoc.us/
JavaScript Weekly http://javascriptweekly.com/
Css Weekly http://css-weekly.com/
Web Design Weekly https://web-design-weekly.com/
Web Tools Weekly https://webtoolsweekly.com/
Learn CSS Animation https://cssanimation.rocks/
Hack Design https://hackdesign.org/
Codeburst https://codeburst.io/
SitePen Blog https://www.sitepen.com/blog/
JavaScript Weekly ^subscribe http://javascriptweekly.com/issues
Frontend Focus ^subscribe https://frontendfoc.us/issues
WebOps Weekly ^subscribe https://webopsweekly.com/issues
Node Weekly ^subscribe https://nodeweekly.com/issues
Mobile Dev Weekly ^subscribe https://mobilewebweekly.com/issues
Front-end Web Development, Chewed Up ← Alligator.io https://alligator.io/

开发中心

开发中心 地址
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 http://www.w3help.org 综合Bug集合网站

Nodejs

Nodejs 地址
Node.js 包教不包会 https://github.com/alsotang/node-lessons
一个nodejs博客 http://60sky.com
【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 http://overapi.com/
javascripting http://www.javascripting.com
各种流行库搜索 http://microjs.com
runoob.com-包含各种API集合 http://www.runoob.com
开源中国在线API文档合集 http://tool.oschina.net/apidocs
devdocs http://devdocs.io 英文综合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 http://es6.ruanyifeng.com
阮一峰 Javascript http://javascript.ruanyifeng.com
ECMA-262，第 5 版 http://yanhaijing.com/es5
es5 http://es5.github.io

Vue

Vue.js 地址
Vue2.0 https://vuefe.cn/
Vue http://cn.vuejs.org
Vue Router https://router.vuejs.org/
Vuex https://vuex.vuejs.org/
Vue-Cli https://github.com/vuejs/vue-cli
Vue 论坛 http://forum.vuejs.org
Vue 聊天室 https://gitter.im/vuejs/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中文社区 http://angularjs.cn
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组件 https://github.com/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 开发指南 http://www.angularjs.cn/T008
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 中文论坛 http://www.react-china.org
react.js 官方网址 https://facebook.github.io/react/index.html
react.js 官方文档 https://facebook.github.io/react/docs/getting-started.html
react.js material UI http://material-ui.com/#
react.js TouchstoneJS UI http://touchstonejs.io
react.js amazeui UI http://amazeui.org/react
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
Fxtpl v1.0 繁星前端模板引擎 http://koen301.github.io/fxtpl
laytpl http://laytpl.layui.com
mozilla - nunjucks https://github.com/mozilla/nunjucks
Juicer https://github.com/PaulGuo/Juicer
dustjs http://akdubya.github.io/dustjs
etpl http://ecomfe.github.io/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 触摸库 http://bouncejs.com
animate.css http://daneden.github.io/animate.css
全局CSS的终结(狗带 [译] http://www.alloyteam.com/2015/10/8536
browserhacks http://browserhacks.com

移动端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

jQuery

jQuery 地址
YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com/
jQuery API 中文文档 http://www.jquery123.com
hemin 在线版 http://hemin.cn/jq
css88 jq api http://www.css88.com/jqapi-1.9/on
css88 jqui api http://www.css88.com/jquery-ui-api
学习jquery http://learn.jquery.com
jquery 源码查找 http://james.padolsey.com/jquery
Web前端资源汇总(jQuery,Js,Css3等) http://www.cnblogs.com/jihua/p/webfront.html

D3

D3 地址
d3 Tutorials https://github.com/mbostock/d3/wiki/Tutorials
Gallery https://github.com/mbostock/d3/wiki/Gallery
lofter http://datavisual.lofter.com/post/40cf3a_188e535
iteye http://alanland.iteye.com/blog/1878595
ruanyifeng http://javascript.ruanyifeng.com/library/d3.html

Requriejs

Requriejs 地址
Javascript模块化编程（一）：模块的写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript模块化编程（二）：AMD规范 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript模块化编程（三）：require.js的用法 http://www.ruanyifeng.com/blog/2012/11/require_js.html
RequireJS入门（一） http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
RequireJS入门（二） http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS进阶（三） http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie源码学习 http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie 入门指南 http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS 学习笔记 http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs 其一 http://cyj.me/why-seajs/requirejs/
require backbone结合 http://www.cnblogs.com/yexiaochai/p/3221081.html

Seajs

Seajs 地址
seajs http://seajs.org
seajs 中文手册 http://cyj.me/why-seajs/zh

Less,sass

Less,sass 地址
sass http://www.w3cplus.com/sassguide
sass教程-sass中国 http://www.sass.hk
Sass 中文文档 http://sass.bootcss.com
less http://less.bootcss.com

Markdown

Markdown 地址
Markdown 语法说明 (简体中文版 http://wowubuntu.com/markdown
markdown入门参考 https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook https://www.gitbook.com 国外的在线markdown可编辑成书
mdeditor https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器
stackedit https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘
mditor http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器
lepture-editor https://github.com/lepture/editor
markdown-editor https://github.com/jbt/markdown-editor
作业部落 https://www.zybuluo.com 功能强大，速度流畅，全平台同步

兼容性

兼容性 地址
esma 兼容列表 http://kangax.github.io/compat-table/es6
W3C CSS验证服务 http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse http://caniuse.com/#index
csscreator http://csscreator.com/properties
microsoft https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx
在线测兼容-移动端 http://www.responsinator.com
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 http://ant.design 一个 UI 设计语言
Smart UI http://smartui.chinamzz.com
MetroUICSS http://www.w3cplus.com/MetroUICSS
Semantic http://semantic-ui.com
Layui http://www.layui.com/?form=jeffjade.com
Buttons http://alexwolfe.github.io/Buttons
kitecss http://hiloki.github.io/kitecss
pintuer http://www.pintuer.com
amazeui http://amazeui.org
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 http://gitref.justjavac.com
book http://git-scm.com/book/zh
gogojimmy http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic

其它API

其它API 地址
HTTP API 设计指南 http://segmentfault.com/bookmark/1230000002521721
javascript流行库汇总 javascriptoo
验证api http://niceue.com/validator/demo/index.php
underscore 中文手册 http://www.css88.com/doc/underscore
underscore源码分析 http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031
underscore源码分析-亚里士朱德的博客 http://yalishizhude.github.io/tags/underscore
underscrejs en api http://underscorejs.org
lodash - underscore的代替品 https://lodash.com
ext4api http://extjs-doc-cn.github.io/ext4api
qwrap手册 http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm
缓动函数 http://easings.net/zh-cn
svg 中文参考 http://www.w3school.com.cn/svg/svg_reference.asp
svg mdn参考 https://developer.mozilla.org/en-US/docs/Web/SVG
svg 导出 canvas https://github.com/gabelerner/canvg
svg 导出 png https://github.com/exupero/saveSvgAsPng
ai-to-svg http://www.zamzar.com/convert/ai-to-svg
localStorage 库 https://github.com/machao/localStorage

图表类

图表类 地址
Highcharts 中文API http://www.hcharts.cn/api/index.php
Highcharts 英文API http://api.highcharts.com/highcharts
ECharts 百度的图表软件 http://echarts.baidu.com/
高德地图 http://lbs.amap.com/api
开源的矢量图脚本框架 http://paperjs.org
svg 地图 http://jvectormap.com

正则

正则 地址
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
正则在线测试 http://regexper.com

前端规范

前端规范 地址
通过分析github代码库总结出来的工程师代码书写习惯 http://alloyteam.github.io/CodeGuide
HTML&CSS编码规范 by @mdo http://codeguide.bootcss.com
团队合作的css命名规范-腾讯AlloyTeam前端团队 http://www.alloyteam.com/2011/10/css-on-team-naming/
前端编码规范之js - by yuwenhui http://yuwenhui.github.io
前端编码规范之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编码规范 http://codeguide.bootcss.com
规范加强版 https://github.com/Suxiaogang/Code_Guide
前端代码规范 及 最佳实践 http://blog.jobbole.com/79075
百度前端规范 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://blog.jobbole.com/79484
网易前端开发规范 http://nec.netease.com/standard
css模块 http://www.75team.com/archives/1049
前端规范资源列表 https://github.com/ecomfe/spec

PHP

PHP 地址
最流行的PHP 代码规范 http://segmentfault.com/a/1190000000443795
最流行的PHP 代码规范 https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md

各大公司开源项目

各大公司开源项目 地址
Facebook Projects https://code.facebook.com/projects/web
百度web前端研发部 http://fex.baidu.com
百度EFE http://efe.baidu.com
百度github https://github.com/fex-team
alloyteam http://www.alloyteam.com
alloyteam-github http://alloyteam.github.io
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 http://aeditor.alloyteam.com H5动画交互页开发的工具
值得订阅的weekly https://github.com/fenbility/weekly-feed
奇舞团开源项目 http://75team.github.io
Qunar UED http://ued.qunar.com

常用

常用 地址
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-官方演示站 http://www.chhua.com/myfocus
SuperSlidev2.1 -- 大话主席 http://www.superslide2.com
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 http://jui.org
MUI-最接近原生APP体验的高性能前端框架 http://dcloudio.github.io/mui
Amaze UI(中国首个开源 HTML5 跨屏前端框架) http://amazeui.org
淘宝 HTML5 前端框架 http://m.sui.taobao.org
KISSY - 阿里前端JavaScript库 http://docs.kissyui.com
网易Nej - Nice Easy Javascript http://nej.netease.com
Kendo UI MVVM Demo http://demos.telerik.com/kendo-ui/mvvm/index

页面 社会化 分享功能

页面 社会化 分享功能 地址
百度分享 http://share.baidu.com pc端
JiaThis http://jiathis.com pc端
社会化分享组件 http://developer.baidu.com/soc/share 移动端
ShareSDK 轻松实现社会化功能 http://www.mob.com/#/index 移动端
友盟分享 http://dev.umeng.com/social/android/quick-integration 移动端

富文本编辑器

富文本编辑器 地址
功能齐全 tinymce https://www.tinymce.com
百度 ueditor http://ueditor.baidu.com/website
经典的ckeditor http://ckeditor.com
经典的kindeditor http://kindeditor.net
wysiwyg http://www.bootcss.com/p/bootstrap-wysiwyg
一个有情怀的编辑器。Bach's Editor http://integ.github.io/BachEditor
tower用的编辑器 https://github.com/mycolorway/simditor
summernote 编辑器 https://github.com/summernote/summernote
html5编辑器 http://neilj.github.io/Squire
Quilljs编辑器 http://quilljs.com
wangEditor https://github.com/wangfupeng1988/wangEditor

前端概述

前端概述 地址
前端工具大全 http://www.awesomes.cn
什么是前端工程化 fouber/blog#10
[译] 前端攻略-从路人甲到英雄无敌 https://segmentfault.com/a/1190000005174755

Gulp

Gulp 地址
Gulp官网 http://gulpjs.com
Gulp中文网 http://www.gulpjs.com.cn
gulp资料收集 https://github.com/Platform-CUF/use-gulp
Gulp：任务自动管理工具 - ruanyifeng http://javascript.ruanyifeng.com/tool/gulp.html
Gulp插件 http://gulpjs.com/plugins
Gulp探究折腾之路(I) http://www.jeffjade.com/2015/11/25/2015-11-25-toss-gulp/
Gulp折腾之路(II) http://www.jeffjade.com/2016/01/19/2016-01-19-toss-gulp/
Gulp不完全入门教程 http://www.ido321.com/1622.html
为什么使用gulp? hjzheng/CUF_meeting_knowledge_share#33
Gulp安装及配合组件构建前端开发一体化 http://www.dbpoo.com/getting-started-with-gulp
Gulp 入门指南 https://github.com/nimojs/gulp-book
Gulp 入门指南 - nimojs https://github.com/nimojs/blog/issues/19
Gulp in Action http://www.imooc.com/video/5692
Gulp开发教程（翻译） http://www.w3ctech.com/topic/134
前端构建工具gulpjs的使用介绍及技巧 http://www.cnblogs.com/2050/p/4198792.html

Grunt

Grunt 地址
gruntjs http://gruntjs.com
Grunt中文网 http://www.gruntjs.net

Fis

Fis 地址
fis 官网 http://fex-team.github.io/fis-site/index.html
fis http://fis.baidu.com

pc图轮

pc图轮 地址
Vue 的图片轮播组件:vue-slider https://github.com/qusiba/vue-slider
左右按钮多图切换 http://bxslider.com/examples/carousel-demystified
fullpage全屏轮播 https://github.com/alvarotrigo/fullPage.js

移动端图轮

移动端图轮 地址
滑屏效果 http://www.idangero.us/swiper
全屏fullpage https://github.com/peunzhang/fullpage
单个图片切换 https://github.com/qiqiboy/touchslider
单个全屏切换 https://github.com/peunzhang/slip.js
单个全屏切换 https://github.com/peunzhang/iSlider
滑屏效果 https://github.com/saw/touch-interfaces
旋转拖动设置 http://baijs.com/tinycircleslider
类似于swipe切换 http://touchslider.com
支持多种形式的触摸滑动 http://www.swiper.com.cn/demo/index.html
滑屏效果 https://github.com/joker-ye/main/blob/master/wap/index.html
大话主席pc移动图片轮换 http://www.superslide2.com
滑屏效果 https://github.com/hahnzhu/parallax.js
基于zepto的fullpage https://github.com/yanhaijing/zepto.fullpage
[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应 http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html
判断微信客户端的那些坑 http://loo2k.com/blog/detecting-wechat-client
可以通过javascript直接调用原生分享的工具 https://github.com/JefferyWang/nativeShare.js
JiaThis 分享到微信代码 http://www.jiathis.com/help/html/weixin-share-code
聊聊移动端跨平台开发的各种技术 http://fex.baidu.com/blog/2015/05/cross-mobile
前端自动化测试 http://www.zhihu.com/question/29922082
多种轮换图片 http://ajccom.github.io/niceslider
滑动侧边栏 https://mango.github.io/slideout

文件上传

文件上传 地址
百度上传组件 http://fex.baidu.com/webuploader
上传 https://blueimp.github.io/jQuery-File-Upload
flash 头像上传 http://www.hdfu.net
图片上传预览 http://www.dropzonejs.com
图片裁剪 http://elemefe.github.io/image-cropper
图片裁剪-shearphoto http://www.shearphoto.com
jQuery图片处理 http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2

模拟select

模拟select 地址
糖饼 select http://aui.github.io/popupjs/doc/selectbox.html
flexselect https://github.com/rmm5t/jquery-flexselect
双select http://loudev.com
select2 http://select2.github.io

取色插件

取色插件 地址
类似 Photoshop 的界面取色插件 http://www.jq22.com/plugin/367
jquery color https://github.com/jquery/jquery-color
取色插件集合 http://www.oschina.net/project/tag/287/color-picker
farbtastic 圆环＋正方形 https://github.com/mattfarina/farbtastic

城市联动

城市联动 地址
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果 http://www.ijquery.cn/?p=360

剪贴板

剪贴板 地址
剪贴板 https://github.com/zeroclipboard/zeroclipboard
clipboard 最新的剪切方案 http://zenorocha.github.io/clipboard.js
不是Flash的剪贴板 https://github.com/zenorocha/clipboard.js

简繁转换

简繁转换 地址
简繁转换 https://github.com/BYVoid/OpenCC

表格 Grid

表格 Grid 地址
facebook表格 http://facebook.github.io/fixed-data-table
类似于Excel编辑表格-handsontable http://handsontable.com
bootstrap-table插件 http://bootstrap-table.wenzhixin.net.cn
datatables https://www.datatables.net

在线演示

在线演示 地址
js 在线编辑 - runjs http://runjs.cn
js 在线编辑 - jsbin http://jsbin.com
js 在线编辑 - codepen http://codepen.io
js 在线编辑 - jsfiddle http://jsfiddle.net
java 在线编辑 - runjs http://ideone.com
js 在线编辑 - hcharts http://code.hcharts.cn
js 在线编辑 - jsdm http://jsdm.com
sql 在线编辑 - sqlfiddle http://sqlfiddle.com
mozilla 在线编辑器 https://thimble.mozilla.org

常规优化

常规优化 地址
Javascript高性能动画与页面渲染 http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering
移动H5前端性能优化指南 http://isux.tencent.com/h5-performance.html
5173首页前端性能优化实践 http://ued.5173.com/?p=1731
给网页设计师和前端开发者看的前端性能优化 http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers
复杂应用的 CSS 性能分析和优化建议 http://www.orzpoint.com/profiling-css-and-optimization-notes
张鑫旭——前端性能 张鑫旭——前端性能
前端性能监控总结 http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html
网站性能优化之CSS无图片技术 网站性能优化之CSS无图片技术
web前端性能优化进阶路 web前端性能优化进阶路
前端技术：网站性能优化之CSS无图片技术 http://my.eoe.cn/tuwandou/archive/4544.html
浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading
页面加载中的图片性能优化 http://www.w3ctech.com/p/1503
Hey——前端性能 Hey——前端性能
html优化 html优化
99css——性能 99css——性能
YSLOW中文介绍 http://www.cnblogs.com/yslow
转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化 http://www.360ito.com/article/40.html
Yahoo!团队实践分享：网站性能 http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml
网站性能优化指南：什么使我们的网站变慢？ http://blog.jiasule.com/i/153
网站性能优化实践，减少加载时间，提高用户体验 http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html
前端重构实践之如何对网站性能优化？ http://www.adinnet.cn/blog/designview/2012-7-12/678.html
前端性能优化：使用媒体查询加载指定大小的背景图片 http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9
网站性能系列博文 http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html
加载，不只是少一点点 http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml
前端性能的测试与优化 http://mzhou.me/article/95310
分享网页加载速度优化的一些技巧？ http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading
web前端优化(基于Yslow http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html
网站性能优化工具大全 https://www.qianduan.net/website-performance-optimization-tool.html
【高性能前端1】高性能HTML http://www.alloyteam.com/2012/10/high-performance-html
【高性能前端2】高性能CSS http://www.alloyteam.com/2012/10/high-performance-css
由12306谈谈网站前端性能和后端性能优化 http://coolshell.cn/articles/6470.html
AlloyTeam——前端优化 AlloyTeam——前端优化
毫秒必争，前端网页性能最佳实践 http://www.cnblogs.com/developersupport/p/3248695.html
网站性能工具Yslow的使用方法 http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html
前端工程与性能优化（上）：静态资源版本更新与缓存 http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1
前端工程与性能优化（下）：静态资源管理与模板框架 http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2
HTTPS连接的前几毫秒发生了什么 http://blog.jobbole.com/48369
Yslow http://uicss.cn/yslow/#more-12319
Essential Web Performance Metrics — A Primer, Part 1 http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1
Essential Web Performance Metrics — Part 2 http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2
YUISlide,针对移动设备的动画性能优化 http://jayli.github.io/blog/data/2011/12/23/yuislide.html
Improving Site Performance http://joelglovier.com/improving-site-performance
让网站提速的最佳前端实践 http://segmentfault.com/a/1190000000367899
Why Website Speed is Important http://sixrevisions.com/web-development/why-website-speed-is-important
Need for Speed – How to Improve your Website Performance https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance
阿里无线前端性能优化指南 (Pt.1 加载期优化 amfe/article#1

优化工具

优化工具 地址
JavaScript 性能分析新工具 OneProfile http://www.html-js.com/article/3083
JavaScript 堆内存分析新工具 OneHeap http://www.html-js.com/article/3091

在线工具

在线工具 地址
google在线工具 https://developers.google.com/speed/pagespeed/insights
阿里-免费测试服务 http://itest.aliyun.com
阿里-F2etest多浏览器兼容性测试解决方案 https://github.com/alibaba/f2etest
js性能测试 http://jsperf.com

前端架构

前端架构 地址
技术架构 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

推荐作品

推荐作品 地址
winter代码片段需要翻墙 https://gist.github.com/wintercn
fgm http://www.fgm.cc/learn
岑安作品集 https://github.com/hongru/hongru.github.com
当耐特demo集合 http://kmdjs.github.io
米空格 js作品 http://www.laoshu133.com/Lab
myFocus http://koen301.github.io
SeaJS组件库 http://panxuepeng.github.io/seajslib
颜海镜作品 http://yanhaijing.com/myProject
脚儿网作品 http://jo2.org/category/myworks
javascript个人作品 http://www.cnitblog.com/yemoo/category/3107.html
妙味的雷东升游戏作品 http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790
javascript作品集 http://bbs.csdn.net/topics/380227212
云五笔，灰度产生生成工具 https://github.com/TooBug/works
项目主页 http://koen301.github.io
个性的作品主页 http://zaole.net
ucren js demos 集 http://ucren.com/blog/demos
智能社 http://www.zhinengshe.com/works_list.html
实例陈列架 http://demos.shizuwu.cn
zoye demo http://zoye.sinaapp.com/demo
平凡 http://pingfan1990.sinaapp.com
jyg 游戏案例 http://www.lovewebgames.com
很多jquery插件 http://www.helloweba.com/list.html
不羁虫 - soJs 作品系列 http://www.bujichong.com/sojs/api/index.html
frozenui http://frozenui.github.io/case.html
黑白棋 http://js-game.github.io/othello
fromone http://yansm.github.io/fromone/index.html
pazguille http://pazguille.me
Html5 VideoPlayer https://github.com/zmmbreeze/DeadSimpleVideoPlayer
Proton 烟花 http://a-jie.github.io/Proton/#example

简历模板

简历模板 地址
简历 http://hcy2367.github.io/resume
张伦 http://ncuey.sinaapp.com/CrispElite/
简历 https://github.com/hacke2/ResumeSample
马斯特 http://pinkyjie.com/resume
张秋怡 https://joyeecheung.github.io/resume/
翁天信 http://blog.dandyweng.com/2013/07/how-my-website-was-created
动画方式的简历 http://www.webhek.com/misc/interactive-resume
组件丰富简历 http://www.linqing07.com/resume.html
haorooms博客 http://www.haorooms.com/about

面试题

面试题 地址
那几个月在找工作（百度，网易游戏） http://www.nowcoder.com/discuss/3196
2014最新面试题 http://www.html-js.com/article/1743
2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 http://www.cnblogs.com/imwtr/p/4685546.html
年后跳槽那点事：乐视+金山+360面试之行 http://www.cnblogs.com/lvdabao/p/3660707.html
Interviewing a front-end developer http://blog.sourcing.io/interview-questions
拉勾网js面试题 http://www.cnblogs.com/52cik/p/js-question-lg.html
前端面试 http://www.cnblogs.com/allenxing/p/3724382.html
Web开发笔试面试题 大全 http://mianshiti.diandian.com
前端开发面试题 http://segmentfault.com/a/1190000000465431
2014最新前端面试题 https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
百度面试 https://github.com/fex-team/interview-questions
前端工作面试问题 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Chinese
前端开发面试题 http://segmentfault.com/a/1190000000465431
5个经典的前端面试问题 5个经典的前端面试问题
最全前端面试问题及答案总结 http://segmentfault.com/a/1190000002562454
如何面试一名前端开发工程师？ http://www.html-js.com/article/Large-search-front-team-column%202961
史上最全 前端开发面试问题及答案整理 https://github.com/hawx1993/Front-end-Interview-questions
前端实习生面试总结 http://www.cnblogs.com/xiaoruo/p/4665163.html
史上最全 前端开发面试问题及答案整理 https://github.com/hawx1993/Front-end-Interview-questions
BAT及各大互联网公司2014前端笔试面试题：JavaScript篇 http://blog.jobbole.com/78738
前端开发面试题大收集 https://github.com/paddingme/Front-end-Web-Development-Interview-Question
收集的前端面试题和答案 https://github.com/qiu-deqing/FE-interview
如何面试前端工程师 http://www.zhihu.com/question/19568008
前端开发面试题 https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md
牛客网-笔试面经 http://www.nowcoder.com/discuss?type=2

iconfont

iconfont 地址
中文字体 http://www.zhihu.com/question/21253343
淘宝字库 http://iconfont.cn
字体 http://mux.alimama.com/fonts
制作教程 http://iconfont.cn/help/platform.html
zhangxinxu-icommon http://www.zhangxinxu.com/wordpress/?s=icomoon
icommon https://icomoon.io/app
用字体在网页中画ICON图标(推荐教程 http://imooc.com/learn/243
字体压缩工具 http://font-spider.org

Fiddler

Fiddler 地址
Fiddler调式使用知多少(一深入研究 http://www.cnblogs.com/tugenhua0707/p/4623317.html
微信fiddle http://www.cnblogs.com/strick/p/4570006.html
微信fiddle http://gaoboy.com/article/26.html

Chrome

Chrome 地址
Google Chrome 官方 https://developer.chrome.com/devtools
如何更好地运用 Chrome (Google) http://jeffjade.com/2017/05/01/122-how-to-better-use-google_chrome/
Chrome - 基础 http://www.cnblogs.com/constantince/p/4565261.html
Chrome - 进阶 http://www.cnblogs.com/constantince/p/4579121.html
Chrome - 性能 http://www.cnblogs.com/constantince/p/4585983.html
Chrome - 性能进阶 http://www.cnblogs.com/constantince/p/4607497.html
Chrome - 移动 http://www.cnblogs.com/constantince/p/4624241.html
Chrome - 使用技巧 http://www.cnblogs.com/liyunhua/p/4544738.html
Chrome - Console控制台不完全指南 http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
Chrome - Workspace使浏览器变成IDE http://c7sky.com/chrome-devtools-workspace.html
network面板 http://www.html-js.com/article/Nothing-blind%202975
chrome开发工具快捷键 http://anti-code.com/devtools-cheatsheet
chrome调试工具常用功能整理 http://www.html-js.com/article/2327
Chrome 开发工具 Workspace 使用 http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace
Chrome神器Vimium快捷键学习记录 http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html
sass调试-w3cplus http://www.w3cplus.com/sassguide/debug.html
如何更专业的使用Chrome开发者工具-w3cplus http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html
chrome调试canvas http://sentsin.com/web/253.html
chrome profiles1 https://developer.chrome.com/devtools/index
chrome profiles3 http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles
chrome移动版调试 https://developer.chrome.com/devtools/docs/mobile-emulation
chrome调试 http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool
chrome的调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html
chrome console 命令详解 https://developer.chrome.com/devtools/docs/commandline-api
查看事件绑定1 http://www.cnblogs.com/leonkao/p/3809655.html
查看事件绑定2 http://www.cnblogs.com/xiaoyao2011/p/3447421.html
神器——Chrome开发者工具(一 http://segmentfault.com/a/1190000000683599
奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍 https://xinranliu.me/2015-05-22-qiqu-performance
chrome 开发者工具的 15 个小技巧 http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html
Chrome开发者工具不完全指南 http://1ke.co/course/361
Chrome 开发者工具使用技巧 http://segmentfault.com/a/1190000003882567

Firebug

Firebug 地址
firebug视频教程 http://www.imooc.com/learn/137
firefox 模拟器 https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE
console.log 命令详解 http://www.cnblogs.com/ctriphire/p/4116207.html
Firebug入门指南 http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html
Firebug控制台详解 http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

移动,微信调试

移动,微信调试 地址
浏览器端调试安卓 https://openstf.github.io
移动端前端开发调试 http://yujiangshui.com/multidevice-frontend-debug
使用 Chrome 远程调试 Android 设备 https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md
mac移动端调试 http://plus.uc.cn/document/webapp/doc5.html
mac移动端调试 http://www.mihtool.com
无线调试攻略 http://thx.github.io/mobile/debugging-in-mobile
无线调试攻略 http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile
屌爆了,完美调试 微信webview(x5 http://www.jianshu.com/p/ccf124f1f74b
微信调试的那些事 微信调试的那些事
远程console http://jsconsole.com
微信调试工具 http://blog.qqbrowser.cc
各种真机远程调试方法汇总 https://github.com/jieyou/remote_inspect_web_on_real_device

iOS Simulator

iOS Simulator 地址
Simulator iOS_Simulator_Guide-Introduction
iOS Simulator的介绍和使用心得 http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary

Image

img 地址
loading img http://preloaders.net/en/circular
智图-图片优化平台 http://zhitu.isux.us
在线png优化 https://tinypng.com
SM.MS(图床工具～简易好用) https://sm.ms/
yutuku：极简图床 http://yotuku.cn/
Qchan图床 http://tuchuang.org/

浏览器同步

浏览器同步 地址
puer https://github.com/leeluolee/puer
liveReload http://livereload.com
f5 http://getf5.com
File Watchers http://geek100.com/2608

在线PPT制作

在线PPT制作 地址
nodePPT nodePPT
Cleaver快速制作网页PPT http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/
impress.js http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html
PPT https://github.com/ksky521/nodePPT
reveal https://github.com/hakimel/reveal.js
bespoke-fx https://github.com/ebow/bespoke-fx
slippy https://github.com/Seldaek/slippy

前端导航网站

前端导航网站 地址
界面清爽的前端导航 http://uxbees.com/index.html
前端导航 http://whycss.com
前端网址导航 http://www.daqianduan.com/nav
前端名录 http://sentsin.com/daohang
前端导航 http://123.jser.us
前端开发资源 http://www.css88.com/nav
前端开发仓库 - 众多效果的收集地 http://code.ciaoca.com
前端资源导航 https://github.com/jnoodle/f2e-collect
F2E 前端导航 http://f2e.im/static/pages/nav/index.html

常用CDN

常用CDN 地址
新浪CDN http://lib.sinaapp.com
百度静态资源公共库 http://cdn.code.baidu.com
360网站卫士常用前端公共库CDN服务 http://libs.useso.com
Bootstrap中文网开源项目免费 CDN 服务 http://www.bootcdn.cn
开放静态文件 CDN - 七牛 http://staticfile.org
CDN加速 - jq22 http://www.jq22.com/cdn
jQuery CDN http://code.jquery.com
微软CDN http://www.asp.net/ajax/cdn

Git

Git 地址
git-scm http://git-scm.com
廖雪峰-Git教程 廖雪峰-Git教程
git-for-windows https://git-for-windows.github.io
GitHub 添加 SSH keys http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github
gogithub http://www.worldhello.net/gotgithub/index.html
git常规命令练习 http://pcottle.github.io/learnGitBranching
git的资料整理 https://github.com/xirong/my-git
我所记录的git命令（非常实用） http://www.cnblogs.com/fanfan259/p/4810517.html
企业开发git工作流模式探索部分休整 https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md
GitHub 漫游指南 https://github.com/phodal/github-roam
GitHub秘籍 https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md
使用git和github进行协同开发流程 http://livoras.com/post/28
动画方式练习git http://onlywei.github.io/explain-git-with-d3

各种日期日历

各种日期日历 地址
经典my97 http://www.my97.net/dp/demo/index.htm
强大的独立日期选择器 http://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html
fullcalendar http://fullcalendar.io
fullcalendar日历控件知识点集合 http://blog.csdn.net/francislaw/article/details/7740630
中文api http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html
农历日历 https://github.com/zzyss86/LunarCalendar
超酷的仿百度带节日日历老黄历控件 http://www.sucaisj.com/jiaoben/date/201509/16856.html
日期格式化 http://momentjs.com
大牛日历控件 https://github.com/Johnqing/QPAYCalendar
我群某管理作品 https://github.com/Iamlars/dateMarker
input按位替换-官网 http://digitalbush.com/projects/masked-input-plugin
input按位替换-github https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2
bootstrap-daterangepicker https://github.com/dangrossman/bootstrap-daterangepicker
国外30个插件集合 http://www.vandelaydesign.com/30-best-free-jquery-plugins
JavaScript datepicker http://dbushell.com/2012/10/09/pikaday-javascript-datepicker
Datepair.js http://jonthornton.github.io/Datepair.js
一个风格多样的日历 https://github.com/glad/glDatePicker
弹出层式的全日历 http://amsul.ca/pickadate.js/date
jquery双日历 http://www.daterangepicker.com
大气实用jQuery手机移动端日历日期选择插件 http://www.frankdemo.cn/index.php?c=content&a=show&id=115
jQuery Mobile 移动开发中的日期插件Mobiscroll https://mobiscroll.com

Date library

Date library 地址
Datejs https://github.com/datejs/Datejs
sugarjs http://sugarjs.com/api/Date

其它

其它 地址
Mock.js 是一款模拟数据生成器 http://mockjs.com
特色的HTML框架可以创建精美的iOS应用 http://framework7.taobao.org
淘宝SUI http://m.sui.taobao.org
avalonjs http://avalonjs.github.io
Avalon新一代UI库： OniUI http://ued.qunar.com/oniui/index.html
avalon.oniui-基于avalon的组件库 https://github.com/RubyLouvre/avalon.oniui
生成二维码(草料) http://cli.im

效果类

效果类 地址
弹出层 http://www.imooc.com/learn/58
焦点图轮播特效 http://www.imooc.com/learn/18
HTML5 有哪些让你惊艳的 demo？ http://www.zhihu.com/question/24398907

弹出层

弹出层 地址
artDialog 最新版 https://github.com/aui/artDialog
artDialog 文档 http://aui.github.io/artDialog/doc/index.html
google code 下载地址 https://code.google.com/p/artdialog/downloads/list
贤心弹出层 http://layer.layui.com
响应式用户交互组件库 https://github.com/bh-lay/UI
sweetalert-有css3动画弹出层 http://t4t5.github.io/sweetalert

优秀JavaScript项目

优秀JavaScript项目 地址
Angular和Webpack种子文件 https://github.com/AngularClass/angular2-webpack-starter
Fis3面向前端的工程构建系统 https://github.com/fex-team/fis3
Fis3 DEMO https://github.com/fex-team/fis3-demo
前端JQuery系列:源码剖析 https://github.com/JsAaron/jQuery
avalon框架 https://github.com/RubyLouvre/avalon
Microsoft ChakraCore 微软的Chakra引擎 https://github.com/Microsoft/ChakraCore
Quintus HTML游戏引擎 https://github.com/cykod/Quintus
一个用node.js搭建的有趣博客 https://github.com/STRML/strml.net
Web前端助手--FeHelper（Chrome扩展） https://github.com/zxlie/FeHelper
百度前端技术学院 https://github.com/baidu-ife/ife
Cheerio（node.js中的jQuery） https://github.com/cheeriojs/cheerio
nodejs的一个聊天软件 类似微信 https://github.com/BryanYang/freechat
使用html5和node.js构建的网易云音乐 https://github.com/stkevintan/Cube
babel ES6转换为ES5 https://github.com/babel/babel
一个JS富文本编辑器 https://github.com/fex-team/ueditor
一个JS脑图可视化工具 https://github.com/fex-team/kityminder-core
一个JS写的Flappy Bird Game https://github.com/ellisonleao/clumsy-bird
一个JS写的GBA模拟器 https://github.com/taisel/IodineGBA
SegmentFault写的Markdown解析器 https://github.com/SegmentFault/HyperDown.js
基于node.js的Ghost博客 https://github.com/TryGhost/Ghost
学习react的demos https://github.com/ruanyf/react-demos

转载请保留原链接：http://www.jeffjade.com/2016/03/30/104-front-end-tutorial/

您可能感兴趣(/有用)的文章：

About

🐼 最全的资源教程-前端涉及的所有知识体系，并在 Nice Front-end Tutorial 持续更新；

nicelinks.site/

Topics

react nodejs gulp git nginx npm chrome angular webpack tools pwa html5 mongodb vue css3 webassembly

Resources

Readme
Activity

Stars

1.7k stars

Watchers

119 watching

Forks

590 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • PHP 99.9%
  • HTML 0.1%