/FrontEndGitHub

公众号 [前端GitHub]：专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。

MIT LicenseMIT

FrontEndGitHub

专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等。

2021 前端最强的学习导航: https://www.kwgg2020.com

简介

大家好，我是你们的 超级猫，一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。

久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

初步前端与高级前端之间，最大的差距可能就是信息差造成的。

超级猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇精华文章推送。

希望你在浏览、学习了超级猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目。

文章

| 软技能

项目 地址
GitHub 官方文档：使用、搜索、管理开源项目 https://docs.github.com/cn

| 面试专题

项目 地址
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

| 管理后台 admin

项目 地址
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

| WEB 技术清单

项目 地址
developer-roadmap：开发人员路线图，循序渐进的指南和路径，以学习不同的工具或技术 https://github.com/kamranahmedse/developer-roadmap

| 数据结构与算法

项目 地址
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

| CSS 学习专题

项目 地址
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/
stylus：富有表现力、动态、健壮的 CSS https://stylus-lang.com/

| 前端的代码规范

项目 地址
腾讯 http://tgideas.qq.com/doc/index.html
京东 https://guide.aotu.io/index.html
阿里巴巴 https://github.com/airbnb/javascript
百度 https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
JavaScript Standard Style https://github.com/standard/standard
Vue  https://cn.vuejs.org/v2/style-guide/index.html
ES6 http://es6.ruanyifeng.com/#docs/style
Bootstrap https://codeguide.bootcss.com/
ESLint https://eslint.org/
Prettier https://prettier.io/

| 开发**

项目 地址
hacker-laws：最常见的定律、原则等 https://github.com/nusr/hacker-laws-zh

| JavaScript

项目 地址
JavaScript 教程 https://wangdoc.com/javascript/
ES6 入门教程 https://es6.ruanyifeng.com/
JavaScript 30：使用原生 JavaScript 在 30 天内完成 30 个项目 https://javascript30.com/
Codewars：和其他人一起完成真实的代码挑战，提升你的技术 https://www.codewars.com/
JavaScript 教程：现代 JavaScript 教程 https://zh.javascript.info/
TypeScript 教程 https://github.com/xcatliu/typescript-tutorial
TypeScript 入门教程 https://ts.xcatliu.com/
Node.js学习 https://blog.poetries.top/node-learning-notes/

| 技术社区

项目 地址
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/
淘宝FED 淘宝前端团队 http://taobaofed.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 统计

项目 地址
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/

| 构建

项目 地址
NPM https://www.npmjs.com/
Yarn https://yarnpkg.com/zh-Hans/
Webpack https://webpack.js.org/
Gulp https://www.gulpjs.com.cn/
Babel https://babeljs.io/
ESLint：可组装的 JavaScript 和 JSX 检查工具 https://cn.eslint.org/
PostCSS：用 JavaScript 工具和插件转换 CSS 代码的工具 https://www.postcss.com.cn/

| 调试抓包

项目 地址
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/

| 在线工具

项目 地址
CodePen：在线代码测试工具 https://codepen.io/
Can I use：Web前端兼容性列表 https://caniuse.com/
TinyPNG：PNG/JPG 图片在线压缩利器 https://tinypng.com/
CNZZ站点统计：国内常用的站点统计工具 https://www.umeng.com/

| 图标

项目 地址
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

| 工具

项目 地址
web.dev：评测网站性能（基于 Lighthouse） https://web.dev/measure/
GTmetrix：网页性能分析工具 https://gtmetrix.com/
Can I Use：前端技术的浏览器支持情况 https://caniuse.com/
Carbon：代码转图片工具 https://carbon.now.sh/
Wappalyzer：检测某个网站使用的技术栈 https://www.wappalyzer.com/
Shape Divider：定制各种形状的网站分区 SVG 的工具 https://www.shapedivider.app/

| 设计工具

项目 地址
墨刀：原型设计工具 https://modao.cc/
蓝湖：一款产品文档和设计图的在线协作平台 https://lanhuapp.com
PxCook（像素大厨）：高效易用的自动标注工具 https://www.fancynode.com.cn/pxcook

| 学习资源

撩我

大家可以向我推荐好的开源项目哦！

欢迎关注公众号：前端GitHub，每周会有一到三篇的文章推送，后台回复 “电子书”，获取 160+ 本前端精华电子书哦。

FrontEndGitHub

微信：CB834301747

CB834301747