GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）
专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。
前端最强的学习导航: https://www.kwgg2020.com
猫哥的技术博客地址：https://github.com/biaochenxuying/blog
初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。
如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。
基于这个初衷，于是就诞生了这个仓库，能帮助前端开发人员节省时间的仓库！
本项目专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。
已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 200 个优秀项目了。
希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。
平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。
欢迎关注公众号：前端GitHub，后台回复 “电子书”，获取 160+ 本前端精华电子书哦。
| 项目 | 地址 |
|---|---|
| GitHub 官方文档：使用、搜索、管理开源项目 | https://docs.github.com/cn |
| 项目 | 地址 |
|---|---|
| Vue3 中文文档 | https://vue3js.cn/docs/zh/ |
| Vue3 设计理念 | https://vue3js.cn/vue-composition/ |
| Vue3 相关项目聚合网站 | https://vue3js.cn/ |
| Vue3 源码 | https://vue3js.cn/start/ |
| Ant-design-vue | https://antdv.com/docs/vue/introduce-cn/ |
| Vant 3.0 | https://vant-contrib.gitee.io/vant/v3/ |
| Element-plus | https://element-plus.org/#/zh-CN |
| element 3 | https://github.com/hug-sun/element3 |
| vue-vben-admin | https://github.com/anncwb/vue-vben-admin |
| vue-admin-beautiful | https://github.com/chuzhixin/vue-admin-beautiful |
| vue-cli | https://github.com/Wscats/vue-cli |
| movie-trailer | https://github.com/lhz960904/movie-trailer |
| newbee-mall-vue3-app | https://github.com/newbee-ltd/newbee-mall-vue3-app |
| vue3-jd-h5 | https://github.com/GitHubGanKai/vue3-jd-h5 |
| 项目 | 地址 |
|---|---|
| 30-seconds-of-code：简短代码段，经常会用到而且是非常经典的代码 | https://github.com/30-seconds/30-seconds-of-code |
| 33-js-concepts：JavaScript开发者应懂的 33 个概念 | https://github.com/leonardomso/33-js-concepts |
| javascript-questions：JavaScript 进阶问题列表 | https://github.com/lydiahallie/javascript-questions |
| JavaScript 30：使用原生 JavaScript 在 30 天内完成 30 个项目 | https://github.com/wesbos/JavaScript30 |
| Codewars：和 leetcode 有点类似，也是在平台上和其他人一起完成真实的代码挑战，提升你的技术 | https://www.codewars.com/ |
| ES6 入门教程：开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性 | https://es6.ruanyifeng.com/ |
| JavaScript 教程：全面介绍 JavaScript 核心语法，覆盖了 ES5 和 DOM 规范的所有内容 | https://wangdoc.com/javascript/ |
| 现代 JavaScript 教程：以最新的 JavaScript 标准为基准。从基础到高阶的 JavaScript 相关知识 | https://zh.javascript.info/ |
| MDN：提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API | https://developer.mozilla.org/zh-CN/ |
| clean-code-javascript：优秀的 JS 代码规范 | https://github.com/ryanmcdermott/clean-code-javascript |
| TypeScript 入门教程：从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript | https://ts.xcatliu.com |
| w3school：前端必须知道的 Web 技术教程平台 | https://www.w3school.com.cn/js/index.asp |
| three.js：JavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解three.js | three.js](https://threejs.org/) |
| 网站 | 说明 |
|---|---|
| TypeScript | TypeScript 官网，TS 扩展了 JavaScript ，为它添加了类型支持 |
| typescript-tutorial | TypeScript 入门教程，循序渐进的理解 TypeScript |
| TypeScript | TypeScript 使用手册 |
| typescript-book-chinese | 深入理解 TypeScript |
| clean-code-typescript | 适用于TypeScript的简洁代码概念 |
| TypeScript入门 | TypeScript 入门的视频教程 |
| typescript-tutorial | TypeScript 速成教程（2小时速成） |
| 项目 | 地址 |
|---|---|
| LightHouse：一个开源的自动化工具，用于改进网络应用的质量 | https://github.com/GoogleChrome/lighthouse |
| Can I Use：查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站 | https://caniuse.com/ |
| ios font：IOS 字体支持查询和 IOS 系统自带字体查询 | http://iosfonts.com/ |
| web 安全色：尽量让用户看到色彩相同的网页，请尽量使用 216 色的 web 安全色 | https://www.bootcss.com/p/websafecolors/ |
| TinyPNG：PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩 | https://tinypng.com/ |
| 二维码生成器：草料二维码生成器 | https://cli.im/ |
| Shape Divider：定制各种形状的网站分区 SVG 的工具 | https://www.shapedivider.app/ |
| json 格式化： json 在线解析的网站 | http://json.cn/ |
| sojson：前端WEB工具大合集 | https://www.sojson.com/ |
| 站长工具：站长的必备工具 | https://tool.chinaz.com/ |
| codelf：变量命名智能推荐（支持中文） | https://unbug.github.io/codelf/ |
| 印象笔记：Web 前端开发人员提供优质中文文档 | https://www.docschina.org |
| regexr：正则表达式验证匹配 | https://regexr.com/ |
| any-rule：正则表达式库，非常全，使用起来很方便 | https://github.com/any86/any-rule |
| bootcdn：国内的CDN库，速度快 | www.bootcdn.cn 或 cdn.baomitu.com |
| jsdelivr：国外的 cdn 库，支持 github，npm，WordPress | https://www.jsdelivr.com |
| gitignore：根据选择会去生成 .gitignore 文件 | https://www.gitignore.io/ |
| codesandbox：在线编辑代码 | https://codesandbox.io/ |
| typora：实用的 Markdown 写作工具，所见即所得 | https://www.typora.io |
| mdnice：使 markdown 语法更加美观，写作工具(强烈推荐) | https://mdnice.com |
| toptal：多张图片合成雪碧图，并生成对应 css | https://www.toptal.com/developers/css/sprite-generator |
| tool：众多工具集合，包括时间戳转换，进制转换等 | https://tool.lu/ |
| 项目 | 地址 |
|---|---|
| computer-science：通往计算机科学免费自学教育之路！ | https://github.com/ossu/computer-science |
| CS-Notes：技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ | https://github.com/CyC2018/CS-Notes |
| REKCARC-TSC-UHT：清华大学计算机系课程攻略 | https://github.com/PKUanonym/REKCARC-TSC-UHT |
| zju-icicles：浙江大学课程攻略共享计划 | https://github.com/QSCTech/zju-icicles |
| TeachYourselfCS-CN：仅仅依靠自己，你就可以获得世界一流水平的教育 | https://github.com/keithnull/TeachYourselfCS-CN |
| CS-Xmind-Note：计算机专业课（408）思维导图和笔记 | https://github.com/SSHeRun/CS-Xmind-Note |
| awesome-books：160+ 本开源技术类精华电子书，包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍 | https://github.com/biaochenxuying/awesome-books |
| 项目 | 地址 |
|---|---|
| Carbon：在线的代码转图片工具 | https://carbon.now.sh/ |
| glorious.codes：在线的代码转图片工具 | https://glorious.codes/demo |
| codezen：在线的代码转图片工具 | http://codezen.rishimohan.me/ |
| codeimg：在线的代码转图片工具 | https://codeimg.io/ |
| 项目 | 地址 |
|---|---|
| reveal-md：使用 Markdown 来做 PPT 展示的开源项目 | https://github.com/webpro/reveal-md |
| reveal.js：使用 html、markdown 写静态的文本，创建功能齐全且美观的 PPT | https://github.com/hakimel/reveal.js |
| 项目 | 地址 |
|---|---|
| javascript-algorithms：含了多种基于 JavaScript 的算法与数据结构 | https://github.com/trekhleb/javascript-algorithms |
| algorithm-visualizer：算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法 | https://github.com/algorithm-visualizer/algorithm-visualizer |
| algo：数据结构和算法必知必会的 50 个代码实现 | https://github.com/wangzheng0822/algo |
| awesome-algorithms：包含不同著名计算机科学算法的 javascript 实现 | https://github.com/mgechev/javascript-algorithms |
| JS-Sorting-Algorithm：关于排序算法的 GitBook 在线书籍 《十大经典排序算法》 | https://github.com/hustcc/JS-Sorting-Algorithm |
| JavaScript 数据结构与算法之美：包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画 | https://github.com/biaochenxuying/blog |
| daily-algorithms：算法，每日练习的一个项目 | https://github.com/barretlee/daily-algorithms |
| JavaScript 更多 ... | https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories |
| 项目 | 地址 |
|---|---|
| You-need-to-know-css： CSS 的各种效果实现，尤其是动画效果 | https://lhammer.cn/You-need-to-know-css/#/zh-cn/ |
| CSS-Inspiration：找到使用或者是学习 CSS 的灵感 | https://github.com/chokcoco/CSS-Inspiration |
| css_tricks： 总结了一些常用的 CSS 的新属性和一点奇技淫巧 | https://github.com/QiShaoXuan/css_tricks |
| animista： 各种 CSS 实现的效果，还有代码演示，方便直接复制代码 | http://animista.net/ |
| spinkit： 汇集了实现各种加载效果的 CSS 代码片段 | https://tobiasahlin.com/spinkit/ |
| 十天精通 CSS3： CSS3 教程 | https://www.imooc.com/learn/33 |
| Animate： 有趣的，跨浏览器的 css3 动画库 | https://animate.style/ |
| sass：Sass 是一种 CSS 的预编译语言，Sass 为 CSS 赋予了更强大的功能 | https://sass.bootcss.com/documentation |
| less：Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性 | https://less.bootcss.com/ |
| cssdeck：在线 CSS 前端代码 Demo 样式效果 | http://cssdeck.com/ |
| codepen：前端炫酷样式效果，各种 loading 效果，在线编程，Vue 组件也特别多 | https://codepen.io/ |
| cubic-bezier：CSS3 贝塞尔曲线在线调试工具 | https://cubic-bezier.com/ |
| Snapsvg：SVG 动效的 JS 库,各种炫酷的效果。 | http://snapsvg.io/ |
| Cool Backgrounds：超酷的背景图片，渐变的色彩的图片背景都有，看起来很酷。 | https://coolbackgrounds.io/ |
| 项目 | 地址 |
|---|---|
| mpvue：基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系 | https://github.com/Meituan-Dianping/mpvue |
| wepy：小程序组件化开发框架 | https://github.com/Tencent/wepy |
| westore：微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发 | https://github.com/Tencent/westore |
| ColorUI：鲜亮的高饱和色彩，专注视觉的小程序组件库 | https://github.com/weilanwl/ColorUI |
| Gitter：采用 Taro 框架 + Taro UI 进行开发的 demo ， 可能是目前颜值最高的 GitHub 微信小程序客户端 | https://github.com/huangjianke/Gitter |
| Taro：多端统一开发框架，支持用 React 的开发方式编写一次代码 | https://github.com/NervJS/taro |
| Painter：小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 | https://github.com/Kujiale-Mobile/Painter |
| kbone：Web 与小程序同构解决方案，微信官方 | https://github.com/wechat-miniprogram/kbone |
| 项目 | 地址 |
|---|---|
| iPhone各设备屏幕尺寸 | https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions |
| 移动屏幕尺寸设计规范 | http://screensiz.es/phone |
| 微信官方小程序UI样式库 | https://weui.io/ |
| 各大尺寸设备响应式屏幕效果显示 | http://www.responsinator.com/ |
| 项目 | 地址 |
|---|---|
| removebg | https://www.remove.bg/zh |
| 在线 ps-uupoop | https://www.uupoop.com/ |
| 项目 | 地址 |
|---|---|
| ProcessOn | https://www.processon.com/ |
| draw.io | https://www.draw.io/ |
| excalidraw | https://excalidraw.com/ |
| 项目 | 地址 |
|---|---|
| 中科院色谱的中国传统色 | http://zhongguose.com/#yuhong |
| 在线快速配色生成工具 | https://coolors.co/ |
| 每天更新一组简洁舒服的配色方案 | https://colorhunt.co/ |
| MaterialDesign强大的在线配色 | https://www.materialpalette.com/blue/purple |
| 通过网址获取分析网站配色 | http://webcolourdata.com/ |
| 炫酷多边形背景色块生成 | https://trianglify.io/ |
| 色彩搜索引擎 | https://picular.co/ |
| 流行的网格渐变背景免费下载 | https://webgradients.com/ |
| 上传并匹配提取图片风格的颜色 | http://www.colorfavs.com/ |
| 项目 | 地址 |
|---|---|
| hacker-laws：最常见的定律、原则等 | https://github.com/nusr/hacker-laws-zh |
| 项目 | 地址 |
|---|---|
| GitHub：高质量的内容创作和分享平台 | https://github.com/ |
| stackoverflow：一个回答技术问题的网站 | https://stackoverflow.com/ |
| 掘金：目前来看，国内的很多优质前端文章，都在掘金上 | https://juejin.cn/ |
| 博客园：一个很纯粹的技术博客平台 | https://www.cnblogs.com/ |
| 知乎：很多做技术的同学也开始玩知乎了，阿里的不少前端大牛在知乎上就非常活跃 | https://www.zhihu.com/ |
| segmentfault：比较低调的技术博客平台 | https://segmentfault.com/ |
| CSDN：广告太多，但奈何你这么老牌 | https://www.csdn.net/ |
| v2ex：一个关于分享和探索的地方 | https://www.v2ex.com/ |
| Node.js专业中文社区 | https://www.jstips.co/ |
| JS技巧：每天推出一个JS技巧的网站 | http://cnodejs.org/ |
| W3cplus：是一个致力于推广国内前端行业的技术博客 | https://www.w3cplus.com/ |
| 印记中文：是最权威是技术中文文档社区 | https://docschina.org/ |
| 项目 | 地址 |
|---|---|
| 腾讯AlloyTeam | http://www.alloyteam.com/ |
| 腾讯社交用户体验ISUX | https://isux.tencent.com/ |
| 淘系前端团队 | https://fed.taobao.org/ |
| 阿里巴巴国际UED | http://www.aliued.com/ |
| 京东 凹凸实验室 | https://aotu.io/ |
| 饿了么前端 | https://zhuanlan.zhihu.com/ElemeFE |
| 百度前端研发部FEX | http://fex.baidu.com/ |
| 360 奇舞团 | https://75team.com/ |
| 美团技术团队 | https://tech.meituan.com/ |
| 夜尽天明 | https://github.com/biaochenxuying/blog |
| 项目 | 地址 |
|---|---|
| GitHub 全球排名：这个排名很权威 | https://gitstar-ranking.com/ |
| GitHub 中文排行榜、高分优秀中文项目 | https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts |
| 项目 | 地址 |
|---|---|
| Vue.js 开发者大会：Vue.js 开发者大会中国 | https://fequan.com/ |
| 中国 JS 开发者大会：一场专注于 JavaScript 和 Node.js 技术的国际性大会 | https://jsconfchina.com/ |
| 中国 CSS 开发者大会：提高 css 开发姿势的大会 | https://css.w3ctech.com/ |
| D2 前端技术论坛：阿里巴巴举办，分享技术的乐趣，探讨行业的发展 | http://d2forum.alibaba-inc.com/ |
| 项目 | 地址 |
|---|---|
| coding：代码托管平台 | https://coding.net/ |
| 码云：代码托管平台 | https://gitee.com/ |
| github：代码托管平台 | https://github.com/ |
| SVN：代码托管平台 | https://svnbucket.com/?ADTAG=bdss#/ |
| SVN：代码托管中心 | http://www.svnchina.com/ |
| git：官网 | https://git-scm.com/ |
| 阿里云 | https://www.aliyun.com |
| 腾讯云 | https://cloud.tencent.com/ |
| 项目 | 地址 |
|---|---|
| whistle：代理抓包工具，很好很强大 | https://wproxy.org/whistle/ |
| Easy Mock | https://www.easy-mock.com |
| Fiddler：代理抓包工具 | https://www.telerik.com/fiddler |
| 项目 | 地址 |
|---|---|
| VS Code | https://code.visualstudio.com/ |
| Sublime Text | https://www.sublimetext.com/ |
| WebStorm | https://www.jetbrains.com/webstorm/ |
| Atom | https://atom.io/ |
| 项目 | 地址 |
|---|---|
| Font Awesome：网站开发最流行的图标集 | http://www.fontawesome.com.cn/ |
| Feather：简洁美观的开源图标 | https://feathericons.com/ |
| Ionicons：精心绘制的开源图标 | https://ionicons.com/ |
| Simple Icons：常见品牌的 SVG 图标：轻快、精美的符号图标，包括常见操作和事项 | https://simpleicons.org/ |
| Material Design Icons | https://material.io/resources/icons/ |
| Tabler Icons：681 枚可定制的开源 SVG 图标 | https://tablericons.com/ |
| 项目 | 地址 |
|---|---|
| Material Design Colors | https://www.materialui.co/colors |
| Flat UI Colors：14 组配色、280 种颜色 | https://flatuicolors.com/ |
| Color Hunt：分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感 | https://colorhunt.co/ |
| Color Space：配色方案、CSS 颜色渐变生成工具 | https://mycolor.space/ |
| uiGradients：美观的颜色渐变 | http://www.uigradients.com/ |
| Colors and Fonts：色彩和字体工具 | https://colorsandfonts.com/ |
| Coolors：配色方案生成工具 | https://coolors.co/ |
| 项目 | 地址 |
|---|---|
| Undraw：持续更新的精美的 SV�G 插画集 | https://undraw.co/illustrations |
| manypixels：免费插画集 | https://gallery.manypixels.co/ |
| IRA Design：通过调配渐变色、搭配手绘组件定制插画 | https://iradesign.io/gallery/illustrations |
| Free Illustrations by Lukasz Adam：免费 SVG 插画 | https://lukaszadam.com/illustrations |
| Blobmaker：在线 SVG 形状生成器 | https://www.blobmaker.app/ |
| Get Waves：在线 SVG 波形生成器 | https://getwaves.io/ |
| 项目 | 地址 |
|---|---|
| Unsplash：可供免费使用的图片 | https://unsplash.com/ |
| Pexels：精美的免费图片和视频 | https://www.pexels.com/ |
| Burst：免费高分辨率图片，可用于网站和商业用途 | https://burst.shopify.com/ |
| ISO Republic：使用 CC0 许可的免费高分辨率图片和视频 | https://isorepublic.com/ |
| Pixabay：令人惊叹的免费（公共领域）图片和视频站点 | https://pixabay.com/ |
| StockSnap：精美的免费图片，同样使用 CC0 许可 | https://stocksnap.io/ |
| Photopea：在线图片编辑工具，支持大量高级功能 | https://www.photopea.com/ |
| Online Image Compressor：在线图片压缩工具，一次可以压缩多达 20 张图片 | https://imagecompressor.com/ |
| Bulk Resize Photos：最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器 | https://bulkresizephotos.com/en |
| 项目 | 地址 |
|---|---|
| 墨刀：原型设计工具 | https://modao.cc/ |
| 蓝湖：一款产品文档和设计图的在线协作平台 | https://lanhuapp.com |
| PxCook（像素大厨）：高效易用的自动标注工具 | https://www.fancynode.com.cn/pxcook |
| 项目 | 地址 |
|---|---|
| developer-roadmap：开发人员路线图，循序渐进的指南和路径，以学习不同的工具或技术 | https://github.com/kamranahmedse/developer-roadmap |
前端开发路线图
后端开发路线图
运维开发路线图
- 1. 160+ 本技术类常用精华电子书开源了，包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍
- 2. 极客时间上的《TypeScript 开发实战》课程资源，包含课件、思维导图、课程源代码
- 3. 视频资料分享 - Vue、React、Node、MongoDB 全栈、打造商城系统、实战项目汇总
猫哥的年终总结在这里： 前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马，希望能带给你一点启发。
欢迎关注公众号：前端GitHub，每周会有一到三篇的文章推送，后台回复 “电子书”，获取 160+ 本前端精华电子书哦。
| 微信 | 公众号 |
|---|---|
微信：CB834301747  |
 |