一、概要
这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方便。当然,并不期望这成为一个前端武学收藏夹;毕竟,只有自己掌握,才是真正拥有;况且前端发展如火如荼,日新月异。这里会尽量保持探索 & 学习 & 更新。欢迎大家推荐,反馈,谢谢!
二、优秀的网站
- JS前端开发群月报
- 国内老牌技术社区:OSChina、博客园、CSDN、51CTO
- 免费的it电子书
- 在线学习
- 优质学习资源
- 代码练习
- 代码练习:https://www.codingame.com
云风(游戏界大牛):
王垠(不少文章喷到蛮有道理)
冰河-伞哥(Lisp大牛)
陈皓-左耳朵耗子 />Jeff Atwood(国外知名博主): https://blog.codinghorror.com/
阮一峰(黑客与画家译者,Web): 廖雪峰(他的Python、Git教程不少人都看过) /> 道哥的黑板报(安全):https://zhuanlan.zhihu.com/taosay 国内GitHub上关注度较高的开发者 GitHub篇
gitbook:https://www.gitbook.io/写书的好东西,当然用来写文档也很不错的
Travis-ci:开源项目持续集成必备,和GitHub相结合,https://travis-ci.org/
三、前端技术分类综合
- 大前端综合
- Tools
- Vue
- React
- Angular
- Chrome
- Nodejs
- Css3
- Pwa
- Webpack
- Gulp
- Git
- Mongodb
- Markdown
四、各类前端资源
综合类
综合类 | 地址 |
---|
前端知识体系 | | 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 |
前端知识体系 | JavaScript开发 | | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript |
麻省理工学院公开课:计算机科学及编程导论 | | | 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://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 | 设计师网址导航 | | 团队Blog团队Blog-Name | 地址 |
---|
腾讯ISUX | | | 开发中心开发中心 | 地址 |
---|
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秘密花园 | NodejsNodejs | 地址 |
---|
Node.js 包教不包会 | https://github.com/alsotang/node-lessons | 一个nodejs博客 | | | | | https://github.com/zensh/jsgen | 从零开始nodejs系列文章 | | 综合API综合API | 地址 |
---|
OverAPI.com | EcmascriptEcmascript | 地址 |
---|
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翻译后预览 | | Javascript | | VueVue.js | 地址 |
---|
Vue2.0 | https://vuefe.cn/ | Vue | | https://router.vuejs.org/ | Vuex | https://vuex.vuejs.org/ | Vue-Cli | https://github.com/vuejs/vue-cli | Vue 论坛 | | https://gitter.im/vuejs/vue | Vue 入门指南 | | | https://jeffjade.com/2017/03/11/120-how-to-write-vue-better/?me |
AngularjsAngularjs | 地址 |
---|
Angular.js 的一些学习资源 | https://github.com/dolymood/AngularLearning | angularjs中文社区 | | https://cnodejs.org/topic/51404e0f069911196d2e3923 | 吕大豹 Angularjs | | | https://github.com/angular-ui | Ember和AngularJS的性能测试 | | | | | https://github.com/jmcunningham/AngularJS-Learning | angular bootstrap | | https://github.com/opitzconsulting/jquery-mobile-angular-adapter | angular ui | | ReactReact | 地址 |
---|
react.js 中文论坛 | | https://facebook.github.io/react/index.html | react.js 官方文档 | https://facebook.github.io/react/docs/getting-started.html | react.js material UI | | | | | | | https://fakefish.github.io/react-webpack-cookbook | webpack | https://github.com/webpack/webpack | Webpack,101入门体验 | WebpackWebpack | 地址 |
---|
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 入门指南 | 优化之体积篇 | 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/ |
GulpGulp | 地址 |
---|
Gulp官网 | | | https://github.com/nimojs/gulp-book | Gulp 入门指南 - nimojs | https://github.com/nimojs/blog/issues/19 | Gulp in Action | Js templateJs template | 地址 |
---|
template-chooser | | | https://github.com/mozilla/nunjucks | Juicer | https://github.com/PaulGuo/Juicer | dustjs | HTML5(HTML)HTML(HTML5) | 地址 |
---|
深入理解HTML5标签 | https://segmentfault.com/a/1190000002695791 | 如何写出高效率的HTML | https://segmentfault.com/a/1190000002680822 | HTML meta标签总结与属性使用介绍 | https://segmentfault.com/a/1190000004279791 | 戏说HTML5 | CSS3(CSS)CSS | 地址 |
---|
CSS 语法参考 | | | | 移动端API移动端API | 地址 |
---|
99移动端知识集合 | https://github.com/jtyjty99999/mobileTech | 移动端前端开发知识库 | https://github.com/AlloyTeam/Mars | 移动前端的一些坑和解决方法(外观表现) | | | | | jQueryjQuery | 地址 |
---|
YOU MIGHT NOT NEED JQUERY | | | | | | D3D3 | 地址 |
---|
d3 Tutorials | https://github.com/mbostock/d3/wiki/Tutorials | Gallery | https://github.com/mbostock/d3/wiki/Gallery | lofter | RequriejsRequriejs | 地址 |
---|
Javascript模块化编程(一):模块的写法 | | | | | SeajsSeajs | 地址 |
---|
seajs | | Less,sassLess,sass | 地址 |
---|
sass | | MarkdownMarkdown | 地址 |
---|
Markdown 语法说明 (简体中文版 | 兼容性兼容性 | 地址 |
---|
esma 兼容列表 | | UI相关UI相关 | 地址 |
---|
Foundation | | | | Smart UI | 其它API其它API | 地址 |
---|
HTTP API 设计指南 | | | | https://lodash.com | ext4api | | | 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 | | https://github.com/machao/localStorage |
图表类图表类 | 地址 |
---|
Highcharts 中文API | | 百度的图表软件 | | 正则正则 | 地址 |
---|
JS正则表达式元字符 | | | 前端规范前端规范 | 地址 |
---|
通过分析github代码库总结出来的工程师代码书写习惯 | | | | | https://github.com/yuche/javascript#table-of-contents | AMD与CMD规范的区别 | | | | https://github.com/gf-rd/es6-coding-style | JavaScript 风格指南/编码规范(Airbnb公司版) | PHPPHP | 地址 |
---|
最流行的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前端研发部 | | 常用常用 | 地址 |
---|
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性 | 算法算法 | 地址 |
---|
数据结构与算法 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 | 面试常考算法题精讲 | 移动端移动端 | 地址 |
---|
fastclick | https://github.com/ftlabs/fastclick | no-click-delay | https://github.com/mmastrac/jquery-noclickdelay | 【敏捷开发】Android团队开发规范 | | JSONJSON | 地址 |
---|
模拟生成JSON数据 | 焦点图焦点图 | 地址 |
---|
myfocus | https://github.com/koen301/myfocus | myfocus-官方演示站 | | Ext, EasyUI, J-UI 及其它各种UI方案Ext, EasyUI, J-UI 及其它各种UI方案 | 地址 |
---|
雅虎UI - CSS UI | | | | | | | 页面 社会化 分享功能页面 社会化 分享功能 | 地址 |
---|
百度分享 | | 富文本编辑器富文本编辑器 | 地址 |
---|
功能齐全 tinymce | https://www.tinymce.com | 百度 ueditor | | | https://github.com/summernote/summernote | html5编辑器 | 前端概述前端概述 | 地址 |
---|
前端工具大全 | | https://segmentfault.com/a/1190000005174755 |
pc图轮pc图轮 | 地址 |
---|
Vue 的图片轮播组件:vue-slider | https://github.com/qusiba/vue-slider | 左右按钮多图切换 | 移动端图轮移动端图轮 | 地址 |
---|
滑屏效果 | | 文件上传文件上传 | 地址 |
---|
百度上传组件 | | 模拟select模拟select | 地址 |
---|
糖饼 select | 取色插件取色插件 | 地址 |
---|
类似 Photoshop 的界面取色插件 | | https://github.com/jquery/jquery-color | 取色插件集合 | | https://github.com/mattfarina/farbtastic |
城市联动城市联动 | 地址 |
---|
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果 | 剪贴板剪贴板 | 地址 |
---|
剪贴板 | https://github.com/zeroclipboard/zeroclipboard | clipboard 最新的剪切方案 | 简繁转换简繁转换 | 地址 |
---|
简繁转换 | https://github.com/BYVoid/OpenCC |
表格 Grid表格 Grid | 地址 |
---|
facebook表格 | 在线演示在线演示 | 地址 |
---|
js 在线编辑 - runjs | | | | | | | | | https://thimble.mozilla.org |
常规优化常规优化 | 地址 |
---|
Javascript高性能动画与页面渲染 | | | | | | | https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance | 阿里无线前端性能优化指南 (Pt.1 加载期优化 | https://github.com/amfe/article/issues/1 |
优化工具优化工具 | 地址 |
---|
JavaScript 性能分析新工具 OneProfile | 内存分析新工具 OneHeap | 在线工具在线工具 | 地址 |
---|
google在线工具 | https://developers.google.com/speed/pagespeed/insights | 阿里-免费测试服务 | 前端架构前端架构 | 地址 |
---|
技术架构 | 推荐作品推荐作品 | 地址 |
---|
winter代码片段需要FQ | https://gist.github.com/wintercn | fgm | | | | | | | https://github.com/zmmbreeze/DeadSimpleVideoPlayer | Proton 烟花 | 简历模板简历模板 | 地址 |
---|
简历 | 面试题面试题 | 地址 |
---|
那几个月在找工作(百度,网易游戏) | | | | | https://github.com/hawx1993/Front-end-Interview-questions | 前端实习生面试总结 | | https://github.com/hawx1993/Front-end-Interview-questions | BAT及各大互联网公司2014前端笔试面试题:JavaScript篇 | iconfonticonfont | 地址 |
---|
中文字体 | FiddlerFiddler | 地址 |
---|
Fiddler调式使用知多少(一深入研究 | ChromeChrome | 地址 |
---|
Google Chrome 官方 | https://developer.chrome.com/devtools | 如何更好地运用 Chrome (Google) | https://jeffjade.com/2017/05/01/122-how-to-better-use-google_chrome/ | Chrome - 基础 | | | | | | | | | | https://developer.chrome.com/devtools/index | chrome profiles3 | | https://developer.chrome.com/devtools/docs/commandline-api | 查看事件绑定1 | | https://xinranliu.me/2015-05-22-qiqu-performance | chrome 开发者工具的 15 个小技巧 | | FirebugFirebug | 地址 |
---|
firebug视频教程 | | https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE | console.log 命令详解 | 移动,微信调试移动,微信调试 | 地址 |
---|
浏览器端调试安卓 | https://openstf.github.io | 移动端前端开发调试 | | https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md | mac移动端调试 | | iOS SimulatoriOS Simulator | 地址 |
---|
Simulator | iOS_Simulator_Guide-Introduction | iOS Simulator的介绍和使用心得 | Imageimg | 地址 |
---|
loading img | 浏览器同步浏览器同步 | 地址 |
---|
puer | https://github.com/leeluolee/puer | liveReload | | 在线PPT制作在线PPT制作 | 地址 |
---|
nodePPT | nodePPT | Cleaver快速制作网页PPT | 前端导航网站前端导航网站 | 地址 |
---|
界面清爽的前端导航 | | | 常用CDN常用CDN | 地址 |
---|
新浪CDN | | | | | GitGit | 地址 |
---|
git-scm | | | https://github.com/phodal/github-roam | GitHub秘籍 | https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md | 使用git和github进行协同开发流程 | 各种日期日历各种日期日历 | 地址 |
---|
经典my97 | | | https://mobiscroll.com |
Date libraryDate library | 地址 |
---|
Datejs | https://github.com/datejs/Datejs | sugarjs | 其它其它 | 地址 |
---|
Mock.js 是一款模拟数据生成器 | | 效果类效果类 | 地址 |
---|
弹出层 | | 弹出层弹出层 | 地址 |
---|
artDialog 最新版 | https://github.com/aui/artDialog | artDialog 文档 | | https://code.google.com/p/artdialog/downloads/list | 贤心弹出层 | 优秀JavaScript项目 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|