GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）
专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。
猫哥的技术博客地址：https://github.com/biaochenxuying/blog
初级前端与高级前端之间，很大原因就是投入学习前端的时间、经验的差别，其实就是信息差。
如果有一个地方能又快又好的获得这些优质的前端信息，那么将会大大缩短从初级到高级的时间。
基于这个初衷，于是就诞生了这个仓库，能帮助前端开发人员节省时间的仓库！
本项目专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。
已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 200 个优秀项目了。
希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。
平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。
欢迎关注微信公众号 “前端GitHub”
原创文章都在公众号首发，比博客早一到两篇。
- 简介
- 目录
- 文章与项目
- 软技能
- 前端趋势榜
- Vue3
- Vue 源码解密
- React 源码解密
- 面试专题
- 简历 8000 专题
- JavaScript
- Flutter
- TypeScript
- 前端必备在线工具
- 计算机内功秘籍
- 在线的代码转图片
- 管理后台 admin
- 逼格满满的 PPT
- 数据结构与算法
- CSS 学习专题
- Node.js
- 小程序
- 前端监控
- 接口文档管理
- 前端的代码规范
- 程序员必备仓库
- 拓展程序员技术与视野的国外网站
- 设计规范
- 可视化
- 代码生成器
- 下载全网视频
- 酷炫的极客界面
- 抠图神器
- 在线绘图
- 颜色搭配
- 开发思想
- 技术社区
- 博客团队
- GitHub 统计
- 前端大会
- 打包工具
- 代码托管平台
- 调试抓包
- 开发工具
- 录屏工具
- 买房实用指南
- 优质的前端博客
- 图标
- 色彩
- 插画
- 图片
- 设计工具
- WEB 技术清单
- 学习资源
- 推荐项目
- 服务器
- 撩我
| 项目 | 地址 |
|---|---|
| GitHub 官方文档：使用、搜索、管理开源项目 | https://docs.github.com/cn |
- 影响了一代代前端人的 20 个里程碑式的顶级开源项目！
- 1534K Star！排名前十的 10 大前端顶级开源项目！
- 猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！
- 前端最流行的 10 大顶级开源项目！猛增 174K Star！
- 前端月趋势榜：5 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目！ - 2105
- 前端月趋势榜：4 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目！- 2104
- Web 趋势榜：上周最有意思、最热门的 10 大 Web 项目 - 210625
- Web 趋势榜：上周最热门的 10 大 Web 项目 - 210410
- 前端趋势榜：上周最热门的 10 大前端项目 - 210327
- 精彩待续。。。
| 项目 | 地址 |
|---|---|
| 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 |
- 推荐 7 个 Vue2、Vue3 源码解密分析的开源项目 👍
- 精彩待续。。。
| 项目 | 地址 |
|---|---|
| vue-analysis：Vue.js 源码分析 | https://github.com/ustbhuangyi/vue-analysis |
| vue-design：逐行级别的分析 | http://hcysun.me/vue-design/zh/ |
| vue-family-mindmap：用一张思维导图总结了 Vue | Vue-Router |
| learnVue：Vue.js 源码分析 | https://github.com/answershuto/learnVue |
| vue：Vue 源码逐行注释分析 | https://github.com/qq281113270/vue |
| vue2.0-source：Vue 源码分析 | https://github.com/liutao/vue2.0-source |
| Vue3 源码：Vue3 源码系列 | https://vue3js.cn/start/ |
| 项目 | 地址 |
|---|---|
| just-react：严谨、易懂的 React 源码分析教程 | https://github.com/BetaSu/just-react |
| 项目 | 地址 |
|---|---|
| Front-end-Developer-Questions：前端面试题 | https://h5bp.org/Front-end-Developer-Interview-Questions/ |
| javascript-questions：JavaScript 进阶问题列表 | https://github.com/lydiahallie/javascript-questions |
| Daily-Question：每天一道大厂面经推送 | https://github.com/shfshanyue/Daily-Question |
| CS-Interview-Knowledge-Map：一线大厂面试题 | https://github.com/InterviewMap/CS-Interview-Knowledge-Map |
| Daily-Interview-Question：每天搞定一道前端大厂面试题 | https://github.com/Advanced-Frontend/Daily-Interview-Question |
| fe-interview：前端面试的一个复习汇总项目 | https://lucifer.ren/fe-interview |
| fe-interview：前端面试专题 | https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md |
| fe-interview：前端知识题库 | https://github.com/haizlin/fe-interview |
| node-interview：饿了么大前端的面试 | https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn |
| Front-End-Interview-Notebook：前端复习笔记 | https://github.com/CavsZhouyou/Front-End-Interview-Notebook |
| FE-Interview：前端面试必备题库 | https://github.com/lgwebdream/FE-Interview |
| web-interview：Vue 面试题库 | https://github.com/febobo/web-interview |
| 项目 | 地址 |
|---|---|
| ResumeSample：程序员简历模板系列 | https://github.com/geekcompany/ResumeSample |
| Markdown-Resume：用 markdown 语法来写的简历模版，非常简结通用 | https://github.com/CyC2018/Markdown-Resume |
| awesome-resume：程序员简历例句，程序员简历范例 | https://github.com/resumejob/awesome-resume |
| DeerResume：好用的 MarkDown 在线简历工具，可在线预览、编辑、设置访问密码和生成 PDF | https://github.com/geekcompany/DeerResume |
| markdown-resume：在线简历排版工具，支持切换 4 种模版、自定义和导出功能 | https://github.com/mdnice/markdown-resume |
| best-resume-ever：快速生成漂亮简历的工具，它基于 Vue 和 LESS | https://github.com/salomonelli/best-resume-ever |
| awesome-resume-for-chinese：适合中文的简历模板收集 | https://github.com/dyweb/awesome-resume-for-chinese |
| resume：一份优雅简约的简历 | https://github.com/gwuhaolin/resume |
| biaochenxuying：非常自由的自定义的前端程序员模版 | https://github.com/biaochenxuying/blog/blob/master/resume/resume.md |
| github-readme-stats：在你的 README 中获取动态生成的 GitHub 统计信息 | https://github.com/anuraghazra/github-readme-stats |
| 项目 | 地址 |
|---|---|
| 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 |
| 详细学习 JavaScript - Scaler 主题 | https://www.scaler.com/topics/javascript/ |
| three.js：JavaScript编辑3D模型，各种各样炫酷的效果以及Documentation值得你去了解three.js | three.js](https://threejs.org/) |
- 推荐 4 个基于 Flutter 的重磅高仿开源项目
- 精彩待续。。。
| 网站 | 说明 |
|---|---|
| dy_flutter | 斗鱼 APP |
| flutter_tiktok | 精仿抖音 |
| flutter-osc | 开源中国客户端 |
| FlutterDouBan | 8000 瓣客户端 |
| 网站 | 说明 |
|---|---|
| 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/ |
| 项目 | 地址 |
|---|---|
| Crash-Course-Computer-Science-Chinese：计算机科学速成课 | https://github.com/1c7/Crash-Course-Computer-Science-Chinese |
| 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/ |
| 项目 | 地址 |
|---|---|
| vue-Element-Admin：后台前端解决方案，它基于 vue 和 element-ui 实现 | https://github.com/PanJiaChen/vue-element-admin |
| iview-admin：基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解决方案 | https://github.com/iview/iview-admin |
| vue-admin-template：极简的 vue admin 管理后台 | https://github.com/PanJiaChen/vue-admin-template |
| ant-design-pro：Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案 | https://github.com/ant-design/ant-design-pro |
| ngx-admin：基于Angular 10+ 的可定制管理仪表板模，还拥有 6 个惊人的视觉主题 | https://github.com/akveo/ngx-admin |
| vue-admin-beautiful：基于 vue+element-ui 的绝佳的中后台前端开发管理框架 | https://github.com/chuzhixin/vue-admin-beautiful |
| vuestic-admin：免费与美妙 Vue.js 管理模板，包括 38 以上个定制用户界面组件 | https://github.com/epicmaxco/vuestic-admin |
| antd-admin：一套优秀的中后台前端解决方案 | https://github.com/zuiidea/antd-admin |
| eladmin：SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发 | https://github.com/elunez/eladmin |
| AdminLTE：是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件 | https://github.com/almasaeed2010/AdminLTE |
| 项目 | 地址 |
|---|---|
| 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/ |
| 项目 | 地址 |
|---|---|
| node：最佳的学习资源肯定是 最权威的 Node.js 的官方项目啦。 | https://github.com/nodejs/node |
| node-api-cn：Node.js API 中文文档项目 | https://github.com/nodejscn/node-api-cn |
| node-in-debugging： Node.js 调试指南的项目 | https://github.com/nswbmw/node-in-debugging |
| nodebestpractices：对Node.js最佳实践中排名最高的内容的总结和分享 | https://github.com/goldbergyoni/nodebestpractices |
| deep-into-node：深入理解 Node.js：核心思想与源码分析 | https://github.com/yjhjstz/deep-into-node |
| Nodejs-Roadmap：Node.js 服务端所涉及的技术栈 | https://github.com/qufei1993/Nodejs-Roadmap |
| NeteaseCloudMusicApi：网易云音乐 Node.js API service | https://github.com/Binaryify/NeteaseCloudMusicApi |
| node-elm：这是基于 node.js + Mongodb 构建的后台系统 | https://github.com/bailicangdu/node-elm |
| awesome-nodejs：Node.js 资源合集 | https://github.com/sindresorhus/awesome-nodejs |
