最全前端资源汇总
一、概要
这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方便。当然,并不期望这成为一个前端武学收藏夹;毕竟,只有自己掌握,才是真正拥有;况且前端发展如火如荼,日新月异。这里会尽量保持探索 & 学习 & 更新。欢迎大家推荐,反馈,谢谢!
二、优秀的网站
- JS前端开发群月报
 - 前端开源资源库
 - 国内老牌技术社区:OSChina、博客园、CSDN、51CTO
 - 免费的it电子书:http://it-ebooks.info/
 - 在线学习:http://www.udemy.com/
 - 代码练习:http://exercism.io/
 - 代码练习:https://www.codingame.com
 - 
云风(游戏界大牛): http://blog.codingnow.com/
王垠(不少文章喷到蛮有道理):http://www.yinwang.org/
冰河-伞哥(Lisp大牛):http://tianchunbinghe.blog.163.com/
陈皓-左耳朵耗子:http://coolshell.cn/
Jeff Atwood(国外知名博主): https://blog.codinghorror.com/
阮一峰(黑客与画家译者,Web):http://www.ruanyifeng.com/
廖雪峰(他的Python、Git教程不少人都看过):http://www.liaoxuefeng.com/
道哥的黑板报(安全):https://zhuanlan.zhihu.com/taosay 国内GitHub上关注度较高的开发者 GitHub篇 - 
gitbook:https://www.gitbook.io/写书的好东西,当然用来写文档也很不错的
Travis-ci:开源项目持续集成必备,和GitHub相结合,https://travis-ci.org/ 
三、前端技术分类综合
四、各类前端资源
综合类
入门类
| 入门类 | 地址 | 
|---|---|
| 前端入门教程 | 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 | 
工具类
| 工具类 | 地址 | 
|---|---|
| 前端人的俱乐部 | 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/ | 
| css sprite 雪碧图制作 | http://www.imooc.com/learn/93 | 
| 版本控制入门 – 搬进 Github | http://www.imooc.com/learn/390 | 
| Grunt-beginner前端自动化工具 | http://www.imooc.com/learn/30 | 
| IntelliJ IDEA 简体中文专题教程 | https://github.com/judasn/IntelliJ-IDEA-Tutorial | 
| SublimeText | https://github.com/jikeytang/sublime-text | 
| Atom | https://atom.io | 
| visual studio code | https://code.visualstudio.com | 
综合效果搜索平台
| 综合效果搜索平台 | 地址 | 
|---|---|
| JavaScript 资源大全中文版 | https://github.com/jobbole/awesome-javascript-cn | 
| 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 | 
团队Blog
| 团队Blog-Name | 地址 | 
|---|---|
| 腾讯ISUX | http://isux.tencent.com | 
| 奇舞周刊 | http://old.75team.com/weekly/ | 
| 淘宝前端团队(FED) | http://taobaofed.org | 
| 码农周刊 | http://weekly.manong.io | 
| 凹凸实验室 | https://aotu.io/ | 
| WEB前端开发 | http://www.css88.com | 
| A JS tip per day! | http://www.jstips.co | 
| 腾讯全端 AlloyTeam | http://www.alloyteam.com/webdevelop/ | 
| 阿里巴巴-U一点 | http://www.aliued.cn | 
| 百度WEB前端研发部 | http://fex.baidu.com | 
| 携程设计委员会 | http://ued.ctrip.com/blog/ | 
| 平安科技移动开发二队技术周报 | 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 | 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 | https://jeffjade.com/2017/03/11/120-how-to-write-vue-better/?me | 
Angularjs
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 | 
Webpack
| Webpack | 地址 | 
|---|---|
| Webpack 官网 | https://webpack.js.org/ | 
| Webpack 中文网 | https://doc.webpack-china.org/ | 
| webpack-demos(阮一峰) | https://github.com/ruanyf/webpack-demos | 
| Webpack Tutorial | https://www.ag-grid.com/ag-grid-understanding-webpack/ | 
| webpack 入门指南 | http://www.cnblogs.com/vajoy/p/4650467.html | 
| Webpack 打包优化之体积篇 | https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/ | 
| Webpack 打包优化之速度篇 | https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/ | 
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? | https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/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 | 
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
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 | 
前端规范
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 | 
| 什么是前端工程化 | https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0# | 
| [译] 前端攻略-从路人甲到英雄无敌 | https://segmentfault.com/a/1190000005174755 | 
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://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 性能分析新工具 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 | 
推荐作品
简历模板
面试题
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
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 | 
各种日期日历
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项目
五. 体系结构与综合
- 综合类前端知识体系
 - 前端知识结构
 - Web前端开发大系概览
 - Web前端开发大系概览-中文版
 - Web Front-end Stack v2.2
 - 免费的编程中文书籍索引
 - 前端书籍
 - 前端免费书籍大全
 - 前端知识体系
 - 免费的编程中文书籍索引
 - 智能社 - 精通JavaScript开发
 - 重新介绍 JavaScript(JS 教程)
 - 麻省理工学院公开课:计算机科学及编程导论
 - JavaScript中的this陷阱的最全收集--没有之一
 - JS函数式编程指南
 - JavaScript Promise迷你书(中文版)
 - 腾讯移动Web前端知识库
 - Front-End-Develop-Guide 前端开发指南
 - 前端开发笔记本
 - 大前端工具集 - 聂微东
 - 前端开发者手册
 - 前端开发者手册
 - 入门类
 - 效果类
 - 工具类
 - 慕课专题
 - 周刊类
 
六. API(应用程序接口)
1. 综合类API
- 开发中心
 - 综合搜索
 - 综合API
- runoob.com-包含各种API集合
 - 开源中国在线API文档合集
 - devdocs 英文综合API网站
 
 
2. jQuery
3. Ecmascript
- Understanding ECMAScript 6 - Nicholas C. Zakas
 - exploring-es6
 - exploring-es6翻译
 - exploring-es6翻译后预览
 - 阮一峰 es6
 - 阮一峰 Javascript
 - ECMA-262,第 5 版
 - es5
 
4. Js template
- template-chooser
 - artTemplate
 - tomdjs
 - 淘宝模板juicer模板
 - Fxtpl v1.0 繁星前端模板引擎
 - laytpl
 - mozilla - nunjucks
 - Juicer
 - dustjs
 - etpl
 - twitter-tpl
 
5. 弹出层
6. CSS
- CSS 语法参考
 - CSS3动画手册
 - 腾讯css3动画制作工具
 - 志爷css小工具集合
 - css3 js 移动大杂烩
 - bouncejs 触摸库
 - css3 按钮动画
 - animate.css
 - 全局CSS的终结(狗带) [译]
 
7. Angularjs
- Angular.js 的一些学习资源
 - angularjs中文社区
 - Angular Style Guide
 - 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学习笔记
 
8. React
- react海量资源
 - react.js 中文论坛
 - react.js 官方网址
 - react.js 官方文档
 - react.js material UI
 - react.js TouchstoneJS UI
 - react.js amazeui UI
 - React 入门实例教程 - 阮一峰
 - React Native 中文版
 - Webpack 和 React 小书 - 前端乱炖
 - Webpack 和 React 小书 - gitbook
 - React原创实战视频教程
 - React 入门教程
 - react-webpack-starter
 - 基于react组件化开发
 
9. 移动端API
- API
 - 框架
 
10. avalon
11. Requriejs
- Javascript模块化编程(一):模块的写法
 - Javascript模块化编程(二):AMD规范
 - Javascript模块化编程(三):require.js的用法
 - RequireJS入门(一)
 - RequireJS入门(二)
 - RequireJS进阶(三)
 - requrie源码学习
 - requrie 入门指南
 - requrieJS 学习笔记
 - requriejs 其一
 - require backbone结合
 
12. Seajs
13. Less,sass
14. Markdown
- Markdown 语法说明 (简体中文版)
 - markdown入门参考
 - gitbook 国外的在线markdown可编辑成书
 - mdeditor 一款国内的在线markdown编辑器
 - stackedit 国外的在线markdown编辑器,功能强大,同步云盘
 - mditor 一款轻量级的markdown编辑器
 - lepture-editor
 - markdown-editor
 
15. D3
16. 兼容性
17. UI相关
- bootcss
 - MetroUICSS
 - semantic
 - Buttons
 - kitecss
 - pintuer
 - amazeui
 - worldhello
 - linuxtoy
 - gitmagic
 - rogerdudler
 - gitref
 - book
 - gogojimmy
 
18. HTTP
19. 其它API
- javascript流行库汇总
 - 验证api
 - underscore 中文手册
 - underscore源码分析
 - underscore源码分析-亚里士朱德的博客
 - underscrejs en api
 - lodash - underscore的代替品
 - ext4api
 - backbone 中文手册
 - qwrap手册
 - 缓动函数
 - svg 中文参考
 - svg mdn参考
 - svg 导出 canvas
 - svg 导出 png
 - ai-to-svg
 - localStorage 库
 
20. 图表类
21. vue
21. 正则
22. ionic
23. 其它
七. 开发规范
- 前端
- 通过分析github代码库总结出来的工程师代码书写习惯
 - HTML&CSS编码规范 by @mdo
 - 团队合作的css命名规范-腾讯AlloyTeam前端团队
 - 前端编码规范之js - by yuwenhui
 - 前端编码规范之js - by 李靖
 - 前端开发规范手册
 - Airbnb JavaScript 编码规范(简体中文版)
 - AMD与CMD规范的区别
 - AMD与CMD规范的区别
 - KISSY 源码规范
 - bt编码规范
 - 规范加强版
 - 前端代码规范 及 最佳实践
 - 百度前端规范
 - 百度前端规范
 - 百度前端规范
 - ECMAScript6 编码规范--广发证券前端团队
 - JavaScript 风格指南/编码规范(Airbnb公司版)
 - 网易前端开发规范
 - css模块
 - 前端规范资源列表
 
 - Nodejs
 - PHP
 - Android
 
八. 其它收集
1. 各大公司开源项目
- Facebook Projects
 - 百度web前端研发部
 - 百度EFE
 - 百度github
 - alloyteam
 - alloyteam-github
 - alloyteam-AlloyGameEngine
 - AlloyDesigner 即时修改,即时保存,设计稿较正,其它开发辅助工具
 - H5交互页编辑器AEditor介绍 H5动画交互页开发的工具介绍
 - AEditor H5动画交互页开发的工具
 - maka
 - 值得订阅的weekly
 - 腾讯html5
 - 奇舞团开源项目
 - Qunar UED
 
2. Javascript
- 常用
 - 算法
 - 移动端
 - JSON
 
3. Html5
4. CSS
5. jQuery
6. Ext, EasyUI, J-UI 及其它各种UI方案
- Ext
 - EasyUI
 - J-UI
 - Other
 
7. 页面 社会化 分享功能
- 百度分享 pc端
 - JiaThis pc端
 - 社会化分享组件 移动端
 - ShareSDK 轻松实现社会化功能 移动端
 - 友盟分享 移动端
 
8. 富文本编辑器
- 百度 ueditor
 - 经典的ckeditor
 - 经典的kindeditor
 - wysiwyg
 - 一个有情怀的编辑器。Bach's Editor
 - tower用的编辑器
 - summernote 编辑器
 - html5编辑器
 - XEditor
 - wangEditor
 - Trumbowyg - 轻量编辑器
 
9. 日历
- PC
 - 移动
 - Date library
 
10. 综合效果搜索平台
11. 前端工程化
- 概述
 - Gulp
 - Grunt
 - Fis
 - webpack
 
12. 轮播图
- pc图轮
 - 移动端
 
13. 文件上传
14. 模拟select
15. 取色插件
16. 城市联动
17. 剪贴板
18. 简繁转换
19. 表格 Grid
20. 在线演示
- js 在线编辑 - runjs
 - js 在线编辑 - jsbin
 - js 在线编辑 - codepen
 - js 在线编辑 - jsfiddle
 - java 在线编辑 - ideone
 - js 在线编辑 - hcharts
 - js 在线编辑 - jsdm
 - sql 在线编辑 - sqlfiddle
 - mozilla 在线编辑器
 
21. 播放器
22. 粒子动画
23. 表单验证
九. Nodejs
- nodejs 篇幅比较巨大
 - Node.js 包教不包会
 - 篇幅比较少
 - node express 入门教程
 - nodejs定时任务
 - 一个nodejs博客
 - 【NodeJS 学习笔记04】新闻发布系统
 - 过年7天乐,学nodejs 也快乐
 - 七天学会NodeJS
 - Nodejs学习笔记(二)--- 事件模块
 - nodejs入门
 - angularjs nodejs
 - 从零开始nodejs系列文章
 - 理解nodejs
 - nodejs事件轮询
 - node入门
 - nodejs cms
 - Node初学者入门,一本全面的NodeJS教程
 - NodeJS的代码调试和性能调优
 
十. 性能优化
- 常规优化
- Javascript高性能动画与页面渲染
 - 移动H5前端性能优化指南
 - 5173首页前端性能优化实践
 - 给网页设计师和前端开发者看的前端性能优化
 - 复杂应用的 CSS 性能分析和优化建议
 - 张鑫旭——前端性能
 - 前端性能监控总结
 - 网站性能优化之CSS无图片技术
 - web前端性能优化进阶路
 - 前端技术:网站性能优化之CSS无图片技术
 - 浏览器的加载与页面性能优化
 - 页面加载中的图片性能优化
 - Hey——前端性能
 - html优化
 - 99css——性能
 - Yslow——性能优化
 - YSLOW中文介绍
 - 转一篇Yahoo关于网站性能优化的文章,兼谈本站要做的优化
 - Yahoo!团队实践分享:网站性能
 - 网站性能优化指南:什么使我们的网站变慢?
 - 网站性能优化实践,减少加载时间,提高用户体验
 - 浅谈网站性能优化 前端篇
 - 前端重构实践之如何对网站性能优化?
 - 前端性能优化:使用媒体查询加载指定大小的背景图片
 - 网站性能系列博文
 - 加载,不只是少一点点
 - 前端性能的测试与优化
 - 分享网页加载速度优化的一些技巧?
 - 页面加载中的图片性能优化
 - web前端优化(基于Yslow)
 - 网站性能优化工具大全
 - 【高性能前端1】高性能HTML
 - 【高性能前端2】高性能CSS
 - 由12306谈谈网站前端性能和后端性能优化
 - AlloyTeam——前端优化
 - 毫秒必争,前端网页性能最佳实践
 - 网站性能工具Yslow的使用方法
 - 前端工程与性能优化(上):静态资源版本更新与缓存
 - 前端工程与性能优化(下):静态资源管理与模板框架
 - HTTPS连接的前几毫秒发生了什么
 - Yslow
 - Essential Web Performance Metrics — A Primer, Part 1
 - Essential Web Performance Metrics — Part 2
 - YUISlide,针对移动设备的动画性能优化
 - Improving Site Performance
 - 让网站提速的最佳前端实践
 - Why Website Speed is Important
 - Need for Speed – How to Improve your Website Performance
 - 阿里无线前端性能优化指南 (Pt.1 加载期优化)
 
 - 优化工具
 - 在线工具
 
十一. 前端架构
十二. 个人作品
1. 推荐作品
- winter代码片段需要FQ
 - fgm
 - 岑安作品集
 - 当耐特demo集合
 - 米空格 js作品
 - myFocus
 - SeaJS组件库
 - 颜海镜作品
 - 脚儿网作品
 - javascript个人作品
 - 妙味的雷东升游戏作品
 - javascript作品集
 - 云五笔,灰度产生生成工具
 - 项目主页
 - 个性的作品主页
 - 播放器
 - ucren js demos 集
 - 智能社
 - 实例陈列架
 - zoye demo
 - 王员外
 - 平凡
 - jyg 游戏案例
 - 很多jquery插件
 - 不羁虫 - soJs 作品系列
 - frozenui
 - 黑白棋
 - fromone
 
2. 群员作品
- MDialog - [合肥-M.J]
 - 轮播图 - [上海-冷静]
 - [广州—坚壳]
 - [成都 - 无痕] 感恩节专题
 - [球霸天]
 - [北京-小数]
 - [ptf] Magix 工具
 - [杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA(One Page One Application)应用
 - [上海-剧中人]-实验室
 - [上海-豪情 ] 作品集合
 - [成都-feeling]
 - [上海-angela]
 - [海南-hank]作品
 - [上海-张力]博客
 - [上海-zenki]作品
 - 移动端图案解锁
 - [合肥-M.J] - MPreview 移动端图片预览组
 - [合肥-M.J] - Mexam 移动端在线做题组
 - [北京-苏瑞] - dancer小人
 - [上海-玄沐]- 个人网站
 - [厦门-二哲]- 个人博客
 
3. 国外大牛精品
十三. 简历
- 生成
 - 模板
 
十四. 面试题
- 那几个月在找工作(百度,网易游戏)
 - 2014最新面试题
 - 名企笔试大全
 - 阿里前端面试题
 - 2016校招内推 -- 阿里巴巴前端 -- 三面面试经历
 - 腾讯面试题
 - 年后跳槽那点事:乐视+金山+360面试之行
 - 阿里前端面试题上线
 - 拉勾网js面试题
 - 前端面试
 - Web开发笔试面试题 大全
 - 前端开发面试题
 - 2014最新前端面试题
 - 百度面试
 - 面试题
 - 前端工作面试问题
 - 前端开发面试题
 - 5个经典的前端面试问题
 - 最全前端面试问题及答案总结
 - 如何面试一名前端开发工程师?
 - 史上最全 前端开发面试问题及答案整理
 - 前端实习生面试总结
 - 史上最全 前端开发面试问题及答案整理
 - BAT及各大互联网公司2014前端笔试面试题:JavaScript篇
 - 前端开发面试题大收集
 - 收集的前端面试题和答案
 - 如何面试前端工程师
 - 前端开发面试题
 - 牛客网-笔试面经
 
十五. iconfont
- 中文字体
 - 淘宝字库
 - 字体
 - 制作教程
 - zhangxinxu-icommon
 - icommon
 - 用字体在网页中画ICON图标(推荐教程)
 - 字体压缩工具 感谢初级群 [深圳-小鱼] 的推荐
 
十六. 开发工具类
- 前端开发工具
 - Chrome, Firebug, Filddle 调试
 - Fiddler
 - Chrome
- Google Chrome 官方
 - Chrome - 基础
 - Chrome - 进阶
 - Chrome - 性能
 - Chrome - 性能进阶
 - Chrome - 移动
 - Chrome - 使用技巧
 - Chrome - Console控制台不完全指南
 - Chrome - Workspace使浏览器变成IDE
 - network面板
 - chrome开发工具快捷键
 - chrome调试工具常用功能整理
 - Chrome 开发工具 Workspace 使用
 - Chrome神器Vimium快捷键学习记录
 - sass调试-w3cplus
 - 如何更专业的使用Chrome开发者工具-w3cplus
 - chrome调试canvas
 - chrome profiles1
 - chrome profiles2
 - chrome profiles3
 - chrome移动版调试
 - chrome调试
 - chrome的调试
 - chrome console 命令详解
 - 查看事件绑定1
 - 查看事件绑定2
 - 神器——Chrome开发者工具(一)
 - 奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)
 - chrome 开发者工具的 15 个小技巧
 - Chrome开发者工具不完全指南
 - Chrome 开发者工具使用技巧
 
 - Firebug
 - 移动,微信调试
 - iOS Simulator
 - img
 - 生成二维码
 - 浏览器同步
 - 在线PPT制作
 
十七. 前端导航网站
十八. 常用CDN
- 新浪CDN
 - 百度静态资源公共库
 - 360网站卫士常用前端公共库CDN服务
 - Bootstrap中文网开源项目免费 CDN 服务
 - 开放静态文件 CDN - 七牛
 - CDN加速 - jq22
 - jQuery CDN
 - Google jQuery CDN
 - 微软CDN
 
十九. Git,SVN,Github
- Git
 - SVN
 
二十、其它
引用:
https://jeffjade.com/2016/03/30/104-front-end-tutorial/
https://github.com/nicejade/Front-end-tutorial
https://github.com/niuwang/guide
二十一:图书
CSS权威指南3版
《精通CSS-高级WEB标准解决方案》
《JavaScript高级程序设计(第3版)》

                
            
        
浙公网安备 33010602011771号