Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/FrontEndGitHub/FrontEndGitHub

:octocat:GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等)
https://github.com/FrontEndGitHub/FrontEndGitHub

frontend frontend-map javascript react vue

Last synced: 22 days ago
JSON representation

:octocat:GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等)

Lists

README

        

![FrontEndGitHub](./images/FrontEndGitHubLogo.png)

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

> 以最优惠的方式购买极客时间课程:https://github.com/biaochenxuying/preferential-courses ,涵盖了后端、架构、前端、移动、人工智能、大数据、产品、运营、运维、测试等

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

> 猫哥的技术博客地址:https://github.com/biaochenxuying/blog

![](https://upload-images.jianshu.io/upload_images/12890819-61e533eb9988f8b1.gif?imageMogr2/auto-orient/strip)

## 简介

初级前端与高级前端之间,很大原因就是投入学习前端的时间、经验的差别,其实就是信息差。

如果有一个地方能又快又好的获得这些优质的前端信息,那么将会大大缩短从初级到高级的时间。

基于这个初衷,于是就诞生了这个仓库,能帮助前端开发人员节省时间的仓库!

本项目专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送。

已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 200 个优秀项目了。

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

平时如何发现好的开源项目,可以看看这篇文章:[GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目](https://mp.weixin.qq.com/s/98P-ARrYlkmog8i79zX6Og)。

> 欢迎关注微信公众号 “**[前端GitHub](https://upload-images.jianshu.io/upload_images/12890819-9a13b43f4feb8f84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**”,回复 **电子书** 就送你 **1000+** 本精华编程电子书;回复 **1024** 送你一套完整的 **前端** 视频教程。

原创文章都在公众号首发,比博客早一到两篇。

![](https://upload-images.jianshu.io/upload_images/12890819-6fd605f528682683.gif?imageMogr2/auto-orient/strip)

## 目录

- [简介](#简介)
- [目录](#目录)
- [文章与项目](#文章与项目)
- [软技能](#软技能)
- [前端趋势榜](#前端趋势榜)
- [Vue3](#vue3)
- [Vue 源码解密](#vue-源码解密)
- [React 源码解密](#react-源码解密)
- [面试专题](#面试专题)
- [简历专题](#简历专题)
- [JavaScript](#javascript)
- [Flutter](#flutter)
- [TypeScript](#typescript)
- [前端必备在线工具](#前端必备在线工具)
- [计算机内功秘籍](#计算机内功秘籍)
- [在线的代码转图片](#在线的代码转图片)
- [管理后台 admin](#管理后台-admin)
- [逼格满满的 PPT](#逼格满满的-ppt)
- [数据结构与算法](#数据结构与算法)
- [CSS 学习专题](#css-学习专题)
- [Node.js](#nodejs)
- [小程序](#小程序)
- [前端监控](#前端监控)
- [接口文档管理](#接口文档管理)
- [前端的代码规范](#前端的代码规范)
- [程序员必备仓库](#程序员必备仓库)
- [拓展程序员技术与视野的国外网站](#拓展程序员技术与视野的国外网站)
- [设计规范](#设计规范)
- [可视化](#可视化)
- [代码生成器](#代码生成器)
- [下载全网视频](#下载全网视频)
- [酷炫的极客界面](#酷炫的极客界面)
- [抠图神器](#抠图神器)
- [在线绘图](#在线绘图)
- [颜色搭配](#颜色搭配)
- [开发思想](#开发思想)
- [技术社区](#技术社区)
- [博客团队](#博客团队)
- [GitHub 统计](#github-统计)
- [前端大会](#前端大会)
- [打包工具](#打包工具)
- [代码托管平台](#代码托管平台)
- [调试抓包](#调试抓包)
- [开发工具](#开发工具)
- [录屏工具](#录屏工具)
- [买房实用指南](#买房实用指南)
- [优质的前端博客](#优质的前端博客)
- [图标](#图标)
- [色彩](#色彩)
- [插画](#插画)
- [图片](#图片)
- [设计工具](#设计工具)
- [WEB 技术清单](#web-技术清单)
- [学习资源](#学习资源)
- [推荐项目](#推荐项目)
- [服务器](#服务器)
- [撩我](#撩我)

## 文章与项目

### 软技能

- [**自从掌握了Google和百度的 16 个高级搜索技巧,我再也没有解决不了的 bug 了**](https://github.com/biaochenxuying/FrontEndGitHub/issues/11)
- [**恕我直言,你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧**](https://github.com/biaochenxuying/FrontEndGitHub/issues/4)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| GitHub 官方文档:使用、搜索、管理开源项目 | [https://docs.github.com/cn](https://docs.github.com/cn) |

[⬆️ 返回顶部](#目录)

### 前端趋势榜

![](https://upload-images.jianshu.io/upload_images/12890819-2471aef65143c005.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- [**影响了一代代前端人的 20 个里程碑式的顶级开源项目!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/45)
- [**1534K Star!排名前十的 10 大前端顶级开源项目!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/43)
- [**猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/37)
- [**前端最流行的 10 大顶级开源项目!猛增 174K Star!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/39)
- [**前端月趋势榜:5 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目! - 2105**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/50)
- [**前端月趋势榜:4 月最热门的 20 个前端开源项目 - 又增加了那么多个好的开源项目!- 2104**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/46)
- [**Web 趋势榜:上周最有意思、最热门的 10 大 Web 项目 - 210625**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/51)
- [**Web 趋势榜:上周最热门的 10 大 Web 项目 - 210410**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/42)
- [**前端趋势榜:上周最热门的 10 大前端项目 - 210327**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/38)
- 精彩待续。。。

[⬆️ 返回顶部](#目录)

### Vue3

- [**推荐 10 个好用的 Vue3 的开源项目,开发效率又能提升了👍 **](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/57)
- [**Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目**](https://github.com/biaochenxuying/FrontEndGitHub/issues/18)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| Vue3 中文文档 | [https://vue3js.cn/docs/zh/](https://vue3js.cn/docs/zh/) |
| Vue3 设计理念 | [https://vue3js.cn/vue-composition/](https://vue3js.cn/vue-composition/) |
| Vue3 相关项目聚合网站 | [https://vue3js.cn/](https://vue3js.cn/) |
| Vue3 源码 | [https://vue3js.cn/start/](https://vue3js.cn/start/) |
| Ant-design-vue | [https://antdv.com/docs/vue/introduce-cn/](https://antdv.com/docs/vue/introduce-cn/) |
| Vant 3.0 | [https://vant-contrib.gitee.io/vant/v3/](https://vant-contrib.gitee.io/vant/v3/) |
| Element-plus | [https://element-plus.org/#/zh-CN](https://element-plus.org/#/zh-CN) |
| element 3 | [https://github.com/hug-sun/element3](https://github.com/hug-sun/element3) |
| vue-vben-admin | [https://github.com/anncwb/vue-vben-admin](https://github.com/anncwb/vue-vben-admin) |
| vue-admin-beautiful | [https://github.com/chuzhixin/vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful) |
| vue-cli | [https://github.com/Wscats/vue-cli](https://github.com/Wscats/vue-cli) |
| movie-trailer | [https://github.com/lhz960904/movie-trailer](https://github.com/lhz960904/movie-trailer) |
| newbee-mall-vue3-app | [https://github.com/newbee-ltd/newbee-mall-vue3-app](https://github.com/newbee-ltd/newbee-mall-vue3-app) |
| vue3-jd-h5 | [https://github.com/GitHubGanKai/vue3-jd-h5](https://github.com/GitHubGanKai/vue3-jd-h5) |

[⬆️ 返回顶部](#目录)

### Vue 源码解密

- [**推荐 7 个 Vue2、Vue3 源码解密分析的开源项目 👍**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/35)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| vue-analysis:Vue.js 源码分析 | [https://github.com/ustbhuangyi/vue-analysis](https://github.com/ustbhuangyi/vue-analysis) |
| vue-design:逐行级别的分析 | [http://hcysun.me/vue-design/zh/](http://hcysun.me/vue-design/zh/) |
| vue-family-mindmap:用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点 | [https://github.com/biaochenxuying/vue-family-mindmap](https://github.com/biaochenxuying/vue-family-mindmap) |
| learnVue:Vue.js 源码分析 | [https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue) |
| vue:Vue 源码逐行注释分析 | [https://github.com/qq281113270/vue](https://github.com/qq281113270/vue) |
| vue2.0-source:Vue 源码分析 | [https://github.com/liutao/vue2.0-source](https://github.com/liutao/vue2.0-source) |
| Vue3 源码:Vue3 源码系列 | [https://vue3js.cn/start/](https://vue3js.cn/start/) |

[⬆️ 返回顶部](#目录)

### React 源码解密

- [**推荐 12 个好用的 React 的开源项目,开发效率又能提升了👍**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/58)
- [**推荐一个 React 技术揭秘的项目,自顶向下的 React 源码分析**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/34)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| just-react:严谨、易懂的 React 源码分析教程 | [https://github.com/BetaSu/just-react](https://github.com/BetaSu/just-react) |

[⬆️ 返回顶部](#目录)

### 面试专题

- [**推荐这 10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/6)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| Front-end-Developer-Questions:前端面试题 | [https://h5bp.org/Front-end-Developer-Interview-Questions/](https://h5bp.org/Front-end-Developer-Interview-Questions/) |
| javascript-questions:JavaScript 进阶问题列表 | [https://github.com/lydiahallie/javascript-questions](https://github.com/lydiahallie/javascript-questions) |
| Daily-Question:每天一道大厂面经推送 | [https://github.com/shfshanyue/Daily-Question](https://github.com/shfshanyue/Daily-Question) |
| CS-Interview-Knowledge-Map:一线大厂面试题 | [https://github.com/InterviewMap/CS-Interview-Knowledge-Map](https://github.com/InterviewMap/CS-Interview-Knowledge-Map) |
| Daily-Interview-Question:每天搞定一道前端大厂面试题 | [https://github.com/Advanced-Frontend/Daily-Interview-Question](https://github.com/Advanced-Frontend/Daily-Interview-Question) |
| fe-interview:前端面试的一个复习汇总项目 | [https://lucifer.ren/fe-interview](https://lucifer.ren/fe-interview) |
| fe-interview:前端面试专题 | [https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md](https://github.com/biaochenxuying/blog/blob/master/interview/fe-interview.md) |
| fe-interview:前端知识题库 | [https://github.com/haizlin/fe-interview](https://github.com/haizlin/fe-interview) |
| node-interview:饿了么大前端的面试 | [https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn](https://github.com/ElemeFE/node-interview/tree/master/sections/zh-cn) |
| Front-End-Interview-Notebook:前端复习笔记 | [https://github.com/CavsZhouyou/Front-End-Interview-Notebook](https://github.com/CavsZhouyou/Front-End-Interview-Notebook) |
| FE-Interview:前端面试必备题库 | [https://github.com/lgwebdream/FE-Interview](https://github.com/lgwebdream/FE-Interview) |
| web-interview:Vue 面试题库 | [https://github.com/febobo/web-interview](https://github.com/febobo/web-interview) |

[⬆️ 返回顶部](#目录)

### 简历专题

- [**10 个 GitHub 上最火的程序员简历项目,2021 金三银四必备!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/15)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| ResumeSample:程序员简历模板系列 | [https://github.com/geekcompany/ResumeSample](https://github.com/geekcompany/ResumeSample) |
| Markdown-Resume:用 markdown 语法来写的简历模版,非常简结通用 | [https://github.com/CyC2018/Markdown-Resume](https://github.com/CyC2018/Markdown-Resume) |
| awesome-resume:程序员简历例句,程序员简历范例 | [https://github.com/resumejob/awesome-resume](https://github.com/resumejob/awesome-resume) |
| DeerResume:好用的 MarkDown 在线简历工具,可在线预览、编辑、设置访问密码和生成 PDF | [https://github.com/geekcompany/DeerResume](https://github.com/geekcompany/DeerResume) |
| markdown-resume:在线简历排版工具,支持切换 4 种模版、自定义和导出功能 | [https://github.com/mdnice/markdown-resume](https://github.com/mdnice/markdown-resume) |
| best-resume-ever:快速生成漂亮简历的工具,它基于 Vue 和 LESS | [https://github.com/salomonelli/best-resume-ever](https://github.com/salomonelli/best-resume-ever) |
| awesome-resume-for-chinese:适合中文的简历模板收集 | [https://github.com/dyweb/awesome-resume-for-chinese](https://github.com/dyweb/awesome-resume-for-chinese) |
| resume:一份优雅简约的简历 | [https://github.com/gwuhaolin/resume](https://github.com/gwuhaolin/resume) |
| biaochenxuying:非常自由的自定义的前端程序员模版 | [https://github.com/biaochenxuying/blog/blob/master/resume/resume.md](https://github.com/biaochenxuying/blog/blob/master/resume/resume.md) |
| github-readme-stats:在你的 README 中获取动态生成的 GitHub 统计信息 | [https://github.com/anuraghazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats) |

[⬆️ 返回顶部](#目录)

### JavaScript

- [**12 个 GitHub 上超火的 JavaScript 奇技淫巧项目,找到写 JavaScript 的灵感!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/14)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| 30-seconds-of-code:简短代码段,经常会用到而且是非常经典的代码 | [https://github.com/30-seconds/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](https://github.com/leonardomso/33-js-concepts) |
| javascript-questions:JavaScript 进阶问题列表 | [https://github.com/lydiahallie/javascript-questions](https://github.com/lydiahallie/javascript-questions) |
| JavaScript 30:使用原生 JavaScript 在 30 天内完成 30 个项目 | [https://github.com/wesbos/JavaScript30](https://github.com/wesbos/JavaScript30) |
| Codewars:和 leetcode 有点类似,也是在平台上和其他人一起完成真实的代码挑战,提升你的技术 | [https://www.codewars.com/](https://www.codewars.com/) |
| ES6 入门教程:开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性 | [https://es6.ruanyifeng.com/](https://es6.ruanyifeng.com/) |
| JavaScript 教程:全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容 | [https://wangdoc.com/javascript/](https://wangdoc.com/javascript/) |
| 现代 JavaScript 教程:以最新的 JavaScript 标准为基准。从基础到高阶的 JavaScript 相关知识 | [https://zh.javascript.info/](https://zh.javascript.info/) |
| MDN:提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API | [https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/) |
| clean-code-javascript:优秀的 JS 代码规范 | [https://github.com/ryanmcdermott/clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript) |
| TypeScript 入门教程:从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript | [https://ts.xcatliu.com](https://ts.xcatliu.com) |
| w3school:前端必须知道的 Web 技术教程平台 | [https://www.w3school.com.cn/js/index.asp](https://www.w3school.com.cn/js/index.asp) |
| three.js:JavaScript编辑3D模型,各种各样炫酷的效果以及Documentation值得你去了解[three.js](https://threejs.org/) | [three.js](https://threejs.org/)](https://threejs.org/) |

[⬆️ 返回顶部](#目录)

### Flutter

- [**推荐 4 个基于 Flutter 的重磅高仿开源项目**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/25)
- 精彩待续。。。

| 网站 | 说明 |
| --- | --- |
| [dy_flutter](https://github.com/yukilzw/dy_flutter) | 斗鱼 APP |
| [flutter_tiktok](https://github.com/mjl0602/flutter_tiktok) | 精仿抖音 |
| [flutter-osc](https://github.com/yubo725/flutter-osc) | 开源中国客户端 |
| [FlutterDouBan](https://github.com/kaina404/FlutterDouBan) | 豆瓣客户端 |

[⬆️ 返回顶部](#目录)

### TypeScript

- [**推荐 7 个学习 TypeScript 的宝库,2021 是时候给自己加薪了!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/17)
- [**JS 加强篇!推荐 10 个好用的 TypeScript 的开源项目 YYDS 👍 **](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/59)
- 精彩待续。。。

| 网站 | 说明 |
| --- | --- |
| [TypeScript](https://github.com/microsoft/TypeScript) | TypeScript 官网,TS 扩展了 JavaScript ,为它添加了类型支持 |
| [typescript-tutorial](https://github.com/xcatliu/typescript-tutorial) | TypeScript 入门教程,循序渐进的理解 TypeScript |
| [TypeScript](https://github.com/zhongsp/TypeScript) | TypeScript 使用手册 |
| [typescript-book-chinese](https://github.com/jkchao/typescript-book-chinese) | 深入理解 TypeScript |
| [clean-code-typescript](https://github.com/labs42io/clean-code-typescript) |适用于TypeScript的简洁代码概念 |
| [TypeScript入门](http://www.imooc.com/learn/763) | TypeScript 入门的视频教程 |
| [typescript-tutorial](https://github.com/joye61/typescript-tutorial) | TypeScript 速成教程(2小时速成) |

[⬆️ 返回顶部](#目录)

### 前端必备在线工具

- [**白嫖 11 个超火的前端必备在线工具,终于有时间上班摸鱼了**](https://github.com/biaochenxuying/FrontEndGitHub/issues/9)
- [**推荐 12 个学习前端必备的神仙级工具类项目与网站**](https://github.com/biaochenxuying/FrontEndGitHub/issues/16)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| LightHouse:一个开源的自动化工具,用于改进网络应用的质量 | [https://github.com/GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse) |
| Can I Use:查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站 | [https://caniuse.com/](https://caniuse.com/) |
| ios font:IOS 字体支持查询和 IOS 系统自带字体查询 | [http://iosfonts.com/](http://iosfonts.com/) |
| web 安全色:尽量让用户看到色彩相同的网页,请尽量使用 216 色的 web 安全色 | [https://www.bootcss.com/p/websafecolors/](https://www.bootcss.com/p/websafecolors/) |
| TinyPNG:PNG/JPG 图片在线压缩利器,智能 PNG 和 JPEG 图片压缩 | [https://tinypng.com/](https://tinypng.com/) |
| 二维码生成器:草料二维码生成器 | [https://cli.im/](https://cli.im/) |
| Shape Divider:定制各种形状的网站分区 SVG 的工具 | [https://www.shapedivider.app/](https://www.shapedivider.app/) |
| json 格式化: json 在线解析的网站 | [http://json.cn/](http://json.cn/) |
| sojson:前端WEB工具大合集 | [https://www.sojson.com/](https://www.sojson.com/) |
| 站长工具:站长的必备工具 | [https://tool.chinaz.com/](https://tool.chinaz.com/) |
| codelf:变量命名智能推荐(支持中文) | [https://unbug.github.io/codelf/](https://unbug.github.io/codelf/) |
| 印象笔记:Web 前端开发人员提供优质中文文档 | [https://www.docschina.org](https://www.docschina.org) |
| regexr:正则表达式验证匹配 | [https://regexr.com/](https://regexr.com/) |
| any-rule:正则表达式库,非常全,使用起来很方便 | [https://github.com/any86/any-rule](https://github.com/any86/any-rule) |
| bootcdn:国内的CDN库,速度快 | [www.bootcdn.cn](https://www.bootcdn.cn/) 或 [cdn.baomitu.com](https://cdn.baomitu.com/) |
| jsdelivr:国外的 cdn 库,支持 github,npm,WordPress | [https://www.jsdelivr.com](https://www.jsdelivr.com) |
| gitignore:根据选择会去生成 .gitignore 文件 | [https://www.gitignore.io/](https://www.gitignore.io/) |
| codesandbox:在线编辑代码 | [https://codesandbox.io/](https://codesandbox.io/) |
| typora:实用的 Markdown 写作工具,所见即所得 | [https://www.typora.io](https://www.typora.io) |
| mdnice:使 markdown 语法更加美观,写作工具(强烈推荐) | [https://mdnice.com](https://mdnice.com) |
| toptal:多张图片合成雪碧图,并生成对应 css | [https://www.toptal.com/developers/css/sprite-generator](https://www.toptal.com/developers/css/sprite-generator) |
| tool:众多工具集合,包括时间戳转换,进制转换等 | [https://tool.lu/](https://tool.lu/) |

[⬆️ 返回顶部](#目录)

### 计算机内功秘籍

- [**推荐 7 个 Github 上近 200k Star 的计算机学习资源,练好前端内功的秘籍!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/20)
- [**B站收藏 12.5w+!GitHub 标星 6.6k+!这门神课拯救了我薄弱的计算机基础**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/24)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| Crash-Course-Computer-Science-Chinese:计算机科学速成课 | [https://github.com/1c7/Crash-Course-Computer-Science-Chinese](https://github.com/1c7/Crash-Course-Computer-Science-Chinese) |
| computer-science:通往计算机科学免费自学教育之路!| [https://github.com/ossu/computer-science](https://github.com/ossu/computer-science) |
| CS-Notes:技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ | [https://github.com/CyC2018/CS-Notes](https://github.com/CyC2018/CS-Notes) |
| REKCARC-TSC-UHT:清华大学计算机系课程攻略 | [https://github.com/PKUanonym/REKCARC-TSC-UHT](https://github.com/PKUanonym/REKCARC-TSC-UHT) |
| zju-icicles:浙江大学课程攻略共享计划 | [https://github.com/QSCTech/zju-icicles](https://github.com/QSCTech/zju-icicles) |
| TeachYourselfCS-CN:仅仅依靠自己,你就可以获得世界一流水平的教育 | [https://github.com/keithnull/TeachYourselfCS-CN](https://github.com/keithnull/TeachYourselfCS-CN) |
| CS-Xmind-Note:计算机专业课(408)思维导图和笔记 | [https://github.com/SSHeRun/CS-Xmind-Note](https://github.com/SSHeRun/CS-Xmind-Note) |
| awesome-books:160+ 本开源技术类精华电子书,包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍 | [https://github.com/biaochenxuying/awesome-books](https://github.com/biaochenxuying/awesome-books) |

[⬆️ 返回顶部](#目录)

### 在线的代码转图片

| 项目 | 地址 |
| --- | --- |
| Carbon:在线的代码转图片工具 | [https://carbon.now.sh/](https://carbon.now.sh/) |
| glorious.codes:在线的代码转图片工具 | [https://glorious.codes/demo](https://glorious.codes/demo) |
| codezen:在线的代码转图片工具 | [http://codezen.rishimohan.me/](http://codezen.rishimohan.me/) |
| codeimg:在线的代码转图片工具 | [https://codeimg.io/](https://codeimg.io/) |

[⬆️ 返回顶部](#目录)

### 管理后台 admin

- [**10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了单**](https://github.com/biaochenxuying/FrontEndGitHub/issues/8)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| vue-Element-Admin:后台前端解决方案,它基于 vue 和 element-ui 实现 | [https://github.com/PanJiaChen/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) |
| iview-admin:基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案 | [https://github.com/iview/iview-admin](https://github.com/iview/iview-admin) |
| vue-admin-template:极简的 vue admin 管理后台 | [https://github.com/PanJiaChen/vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) |
| ant-design-pro:Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案 | [https://github.com/ant-design/ant-design-pro](https://github.com/ant-design/ant-design-pro) |
| ngx-admin:基于Angular 10+ 的可定制管理仪表板模,还拥有 6 个惊人的视觉主题 | [https://github.com/akveo/ngx-admin](https://github.com/akveo/ngx-admin) |
| vue-admin-beautiful:基于 vue+element-ui 的绝佳的中后台前端开发管理框架 | [https://github.com/chuzhixin/vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful) |
| vuestic-admin:免费与美妙 Vue.js 管理模板,包括 38 以上个定制用户界面组件 | [https://github.com/epicmaxco/vuestic-admin](https://github.com/epicmaxco/vuestic-admin) |
| antd-admin:一套优秀的中后台前端解决方案 | [https://github.com/zuiidea/antd-admin](https://github.com/zuiidea/antd-admin) |
| eladmin:SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技术开发 | [https://github.com/elunez/eladmin](https://github.com/elunez/eladmin) |
| AdminLTE:是一个完全响应的管理模板。基于 Bootstrap 4.5 框架以及 JS / jQuery 插件 | [https://github.com/almasaeed2010/AdminLTE](https://github.com/almasaeed2010/AdminLTE) |

[⬆️ 返回顶部](#目录)

### 逼格满满的 PPT

- [**GitHub 标星 54K + 2K!这才是程序员写逼格满满的 PPT 的正确姿势!**](https://github.com/biaochenxuying/FrontEndGitHub/issues/10)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| reveal-md:使用 Markdown 来做 PPT 展示的开源项目 | [https://github.com/webpro/reveal-md](https://github.com/webpro/reveal-md) |
| reveal.js:使用 html、markdown 写静态的文本,创建功能齐全且美观的 PPT | [https://github.com/hakimel/reveal.js](https://github.com/hakimel/reveal.js) |

[⬆️ 返回顶部](#目录)

### 数据结构与算法

- [**7 个GitHub上最火的、最值得前端学习的数据结构与算法项目!没有之一**](https://github.com/biaochenxuying/FrontEndGitHub/issues/2)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| javascript-algorithms:含了多种基于 JavaScript 的算法与数据结构 | [https://github.com/trekhleb/javascript-algorithms](https://github.com/trekhleb/javascript-algorithms) |
| algorithm-visualizer:算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法 | [https://github.com/algorithm-visualizer/algorithm-visualizer](https://github.com/algorithm-visualizer/algorithm-visualizer) |
| algo:数据结构和算法必知必会的 50 个代码实现 | [https://github.com/wangzheng0822/algo](https://github.com/wangzheng0822/algo) |
| awesome-algorithms:包含不同著名计算机科学算法的 javascript 实现 | [https://github.com/mgechev/javascript-algorithms](https://github.com/mgechev/javascript-algorithms) |
| JS-Sorting-Algorithm:关于排序算法的 GitBook 在线书籍 《十大经典排序算法》 | [https://github.com/hustcc/JS-Sorting-Algorithm](https://github.com/hustcc/JS-Sorting-Algorithm) |
| JavaScript 数据结构与算法之美:包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画 | [https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog#-javascript-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%E4%B9%8B%E7%BE%8E) |
| daily-algorithms:算法,每日练习的一个项目 | [https://github.com/barretlee/daily-algorithms](https://github.com/barretlee/daily-algorithms) |
| JavaScript 更多 ... | [https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories](https://github.com/search?l=JavaScript&o=desc&q=algo&s=stars&type=Repositories) |

[⬆️ 返回顶部](#目录)

### CSS 学习专题

- [**[10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!]**](https://github.com/biaochenxuying/FrontEndGitHub/issues/7)
- [**[视觉盛宴篇!推荐 12 个好用的 CSS 的开源项目,YYDS 👍 ]**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/62)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| You-need-to-know-css: CSS 的各种效果实现,尤其是动画效果 | [https://lhammer.cn/You-need-to-know-css/#/zh-cn/](https://lhammer.cn/You-need-to-know-css/#/zh-cn/) |
| CSS-Inspiration:找到使用或者是学习 CSS 的灵感 | [https://github.com/chokcoco/CSS-Inspiration](https://github.com/chokcoco/CSS-Inspiration) |
| css_tricks: 总结了一些常用的 CSS 的新属性和一点奇技淫巧 | [https://github.com/QiShaoXuan/css_tricks](https://github.com/QiShaoXuan/css_tricks) |
| animista: 各种 CSS 实现的效果,还有代码演示,方便直接复制代码 | [http://animista.net/](http://animista.net/) |
| spinkit: 汇集了实现各种加载效果的 CSS 代码片段 | [https://tobiasahlin.com/spinkit/](https://tobiasahlin.com/spinkit/) |
| 十天精通 CSS3: CSS3 教程 | [https://www.imooc.com/learn/33](https://www.imooc.com/learn/33) |
| Animate: 有趣的,跨浏览器的 css3 动画库 | [https://animate.style/](https://animate.style/) |
| sass:Sass 是一种 CSS 的预编译语言,Sass 为 CSS 赋予了更强大的功能 | [https://sass.bootcss.com/documentation](https://sass.bootcss.com/documentation) |
| less:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性 | [https://less.bootcss.com/](https://less.bootcss.com/) |
| cssdeck:在线 CSS 前端代码 Demo 样式效果 | [http://cssdeck.com/](http://cssdeck.com/) |
| codepen:前端炫酷样式效果,各种 loading 效果,在线编程,Vue 组件也特别多 | [https://codepen.io/](https://codepen.io/) |
| cubic-bezier:CSS3 贝塞尔曲线在线调试工具 | [https://cubic-bezier.com/](https://cubic-bezier.com/) |
| Snapsvg:SVG 动效的 JS 库,各种炫酷的效果。 | [http://snapsvg.io/](http://snapsvg.io/) |
| Cool Backgrounds:超酷的背景图片,渐变的色彩的图片背景都有,看起来很酷。 | [https://coolbackgrounds.io/](https://coolbackgrounds.io/) |

[⬆️ 返回顶部](#目录)

### Node.js

- [**推荐 9 个 Node.js 学习、进阶、debugging 分析、实战 的重磅开源项目 👍**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/47)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| node:最佳的学习资源肯定是 最权威的 Node.js 的官方项目啦。 | [https://github.com/nodejs/node](https://github.com/nodejs/node) |
| node-api-cn:Node.js API 中文文档项目 | [https://github.com/nodejscn/node-api-cn](https://github.com/nodejscn/node-api-cn) |
| node-in-debugging: Node.js 调试指南的项目 | [https://github.com/nswbmw/node-in-debugging](https://github.com/nswbmw/node-in-debugging) |
| nodebestpractices:对Node.js最佳实践中排名最高的内容的总结和分享 | [https://github.com/goldbergyoni/nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) |
| deep-into-node:深入理解 Node.js:核心思想与源码分析 | [https://github.com/yjhjstz/deep-into-node](https://github.com/yjhjstz/deep-into-node) |
| Nodejs-Roadmap:Node.js 服务端所涉及的技术栈 | [https://github.com/qufei1993/Nodejs-Roadmap](https://github.com/qufei1993/Nodejs-Roadmap) |
| NeteaseCloudMusicApi:网易云音乐 Node.js API service | [https://github.com/Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) |
| node-elm:这是基于 node.js + Mongodb 构建的后台系统 | [https://github.com/bailicangdu/node-elm](https://github.com/bailicangdu/node-elm) |
| awesome-nodejs:Node.js 资源合集 | [https://github.com/sindresorhus/awesome-nodejs](https://github.com/sindresorhus/awesome-nodejs) |

[⬆️ 返回顶部](#目录)

### 小程序

| 项目 | 地址 |
| --- | --- |
| mpvue:基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系 | [https://github.com/Meituan-Dianping/mpvue](https://github.com/Meituan-Dianping/mpvue) |
| wepy:小程序组件化开发框架 | [https://github.com/Tencent/wepy](https://github.com/Tencent/wepy) |
| westore:微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发 | [https://github.com/Tencent/westore](https://github.com/Tencent/westore) |
| ColorUI:鲜亮的高饱和色彩,专注视觉的小程序组件库 | [https://github.com/weilanwl/ColorUI](https://github.com/weilanwl/ColorUI) |
| Gitter:采用 Taro 框架 + Taro UI 进行开发的 demo , 可能是目前颜值最高的 GitHub 微信小程序客户端 | [https://github.com/huangjianke/Gitter](https://github.com/huangjianke/Gitter) |
| Taro:多端统一开发框架,支持用 React 的开发方式编写一次代码 | [https://github.com/NervJS/taro](https://github.com/NervJS/taro) |
| Painter:小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片 | [https://github.com/Kujiale-Mobile/Painter](https://github.com/Kujiale-Mobile/Painter) |
| kbone:Web 与小程序同构解决方案,微信官方 | [https://github.com/wechat-miniprogram/kbone](https://github.com/wechat-miniprogram/kbone) |

[⬆️ 返回顶部](#目录)

### 前端监控

- [**推荐 GitHub 2K+ 星:前端监控工具 - webfunny 项目!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/41)
- 精彩待续。。。

| 网站 | 说明 |
| --- | --- |
| [前端监控工具 - webfunny 项目](https://github.com/a597873885/webfunny_monitor) | 一款轻量级前端异常监控和前端性能监控系统 |

[⬆️ 返回顶部](#目录)

### 接口文档管理

- [**更强大的开源接口文档管理工具**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/60)
- 精彩待续。。。

### 前端的代码规范

- [**恕我直言,这几个大厂的前端代码规范你可能还不会 - 能精进前端的代码规范**](https://github.com/biaochenxuying/FrontEndGitHub/issues/5)
- 精彩待续。。。

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

[⬆️ 返回顶部](#目录)

### 程序员必备仓库

- [**推荐程序员必备的 10 大 GitHub 仓库,前端占了 7 个!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/21)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| build-your-own-x:构建自己想做的应用 | [https://github.com/danistefanovic/build-your-own-x](https://github.com/danistefanovic/build-your-own-x) |
| javascript-algorithms:多种基于 JavaScript 的算法与数据结构 | [https://github.com/trekhleb/javascript-algorithms](https://github.com/trekhleb/javascript-algorithms) |
| computer-science:为所有想要学习计算机科学的人提供了大量的免费学习资源 | [https://github.com/ossu/computer-science](https://github.com/ossu/computer-science) |
| 30-seconds-of-code:超过 100 个代码段,涵盖了 JavaScript 中的各种内容 | [https://github.com/30-seconds/30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code) |
| nodebestpractices:Node.js 最佳实践中排名最高的内容的总结和分享 | [https://github.com/goldbergyoni/nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) |
| realworld:如何使用特定的语言 / 技术开发适当的应用 | [https://github.com/gothinkster/realworld](https://github.com/gothinkster/realworld) |
| free-programming-books:免费提供编程书籍 | [https://github.com/EbookFoundation/free-programming-books](https://github.com/EbookFoundation/free-programming-books) |
| system-design-primer:学习如何设计大型系统,为系统设计面试做准备 | [https://github.com/donnemartin/system-design-primer](https://github.com/donnemartin/system-design-primer) |
| awesome-python:精选的 Python 框架,库,软件和资源的精选清单 | [https://github.com/vinta/awesome-python](https://github.com/vinta/awesome-python) |
| awesome-machine-learning:精选的很棒的机器学习框架,库和软件的列表 | [https://github.com/josephmisiti/awesome-machine-learning](https://github.com/josephmisiti/awesome-machine-learning) |

[⬆️ 返回顶部](#目录)

### 拓展程序员技术与视野的国外网站

- [**涨姿势了!22 个拓展程序员技术与视野的国外网站!**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/22)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| GitHub:开源项目仓库 | [https://github.com](https://github.com) |
| GitLab:仓库管理系统的开源项目 | [https://about.gitlab.com/](https://about.gitlab.com/) |
| dev.to:技术博客社区 | [https://dev.to/](https://dev.to/) |
| dreamincode:小众的技术博客 | [https://www.dreamincode.net](https://www.dreamincode.net) |
| bytes:和 dreamcode 类似,简约但不简单 | [https://bytes.com](https://bytes.com) |
| hongkiat:技术、设计领域相关的技术文章 | [https://www.hongkiat.com/blog/design-dev](https://www.hongkiat.com/blog/design-dev) |
| IBM Developer:一线工程师,技术性很强的文章 | [https://developer.ibm.com](https://developer.ibm.com) |
| StackOverFlow:专为程序员提供的国际性问题解答交流社区 | [https://stackoverflow.com](https://stackoverflow.com) |
| Reddit:非常个性的社区,你可以讨论编程问题,还可以学习学英语 | [https://www.reddit.com](https://www.reddit.com) |
| daniweb:质量比较高的问答平台 | [https://www.daniweb.com](https://www.daniweb.com) |
| LeetCode:国内的 leetcode 一样都是刷题用的 | [https://leetcode.com](https://leetcode.com) |
| LintCode:LintCode 领扣上有数量超过 1000 道的算法题目和人工智能题目 | [https://www.lintcode.com](https://www.lintcode.com) |
| Codeforces:全球最著名的在线评测系统之一 | [http://codeforces.com/](http://codeforces.com/) |
| Topcoder:世界上规模最大的编程网站 | [https://www.topcoder.com](https://www.topcoder.com) |
| tutorialspoint:在线学习的网站,并且免费,里面有各种技术、各个知识点的讲解和demo | [https://www.tutorialspoint.com/index.htm](https://www.tutorialspoint.com/index.htm) |
| codecademy:简化编程学习的过程 | [https://www.codecademy.com](https://www.codecademy.com) |
| Livecoding.tv:为全球程序员提供一个实时高效的互动平台 | [https://www.livecoding.tv/accounts/login/](https://www.livecoding.tv/accounts/login/) |
| Dzone:技术涵盖比较全面的网站 | [https://dzone.com](https://dzone.com) |
| simpleprogrammer:纯技术文章不多,指导建议性的文章比较多 | [https://simpleprogrammer.com/](https://simpleprogrammer.com/) |
| SitePoint:学习 Web 设计和开发 HTML5,CSS3,JavaScript,PHP,移动应用 | [https://www.sitepoint.com/web](https://www.sitepoint.com/web) |
| YouTobe:国内的哔哩哔哩一样,各类视频汇聚于此,当然各国编程大神也在这啦 | [https://www.youtube.com/](https://www.youtube.com/) |

[⬆️ 返回顶部](#目录)

### 设计规范

| 项目 | 地址 |
| --- | --- |
| iPhone各设备屏幕尺寸 | [https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) |
| 移动屏幕尺寸设计规范 | [http://screensiz.es/phone](http://screensiz.es/phone) |
| 微信官方小程序UI样式库 | [https://weui.io/](https://weui.io/) |
| 各大尺寸设备响应式屏幕效果显示 | [http://www.responsinator.com/](http://www.responsinator.com/) |

[⬆️ 返回顶部](#目录)

### 可视化

- [**推荐 brick design全场景可视化拖拽低代码前端框架**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/49)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| brick-design:全场景可视化拖拽低代码前端框架 | [https://github.com/brick-design/brick-design](https://github.com/brick-design/brick-design) |

[⬆️ 返回顶部](#目录)

### 代码生成器

- [**GitHub 2W 星:一键生成前后端代码**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/29)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| jeecg-boot:一键生成前后端代码 | [https://github.com/zhangdaiscott/jeecg-boot](https://github.com/zhangdaiscott/jeecg-boot) |

[⬆️ 返回顶部](#目录)
### 下载全网视频

- [**GitHub 5W 星:一行命令下载全网视频的两个开源项目**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/30)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| you-get:一行命令下载全网视频 | [https://github.com/soimort/you-get](https://github.com/soimort/you-get) |
| annie:一行命令下载全网视频 | [https://github.com/iawia002/annie](https://github.com/iawia002/annie) |

[⬆️ 返回顶部](#目录)

### 酷炫的极客界面

- [**被惊艳到了!适用 Win、Mac、Linux,酷炫的极客界面 eDEX-UI**](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/26)
- [**程序员最想要的高逼格,都藏在这个开源项目里了!**](https://github.com/rocksdanister/lively)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| eDEX-UI:酷炫的极客界面 | [https://github.com/GitSquared/edex-ui](https://github.com/GitSquared/edex-ui) |
| lively:拉高程序员电脑桌面逼格 | [http://screensiz.es/phone](http://screensiz.es/phone) |

[⬆️ 返回顶部](#目录)

### 抠图神器

| 项目 | 地址 |
| --- | --- |
| removebg | [https://www.remove.bg/zh](https://www.remove.bg/zh) |
| 在线 ps-uupoop | [https://www.uupoop.com/](https://www.uupoop.com/) |

[⬆️ 返回顶部](#目录)

### 在线绘图

| 项目 | 地址 |
| --- | --- |
| ProcessOn | [https://www.processon.com/](https://www.processon.com/) |
| draw.io | [https://www.draw.io/](https://www.draw.io/) |
| excalidraw | [https://excalidraw.com/](https://excalidraw.com/) |

[⬆️ 返回顶部](#目录)

### 颜色搭配

| 项目 | 地址 |
| --- | --- |
| 中科院色谱的中国传统色 | [http://zhongguose.com/#yuhong](http://zhongguose.com/#yuhong) |
| 在线快速配色生成工具 | [https://coolors.co/](https://coolors.co/) |
| 每天更新一组简洁舒服的配色方案 | [https://colorhunt.co/](https://colorhunt.co/) |
| MaterialDesign强大的在线配色 | [https://www.materialpalette.com/blue/purple](https://www.materialpalette.com/blue/purple) |
| 通过网址获取分析网站配色 | [http://webcolourdata.com/](http://webcolourdata.com/) |
| 炫酷多边形背景色块生成 | [https://trianglify.io/](https://trianglify.io/) |
| 色彩搜索引擎 | [https://picular.co/](https://picular.co/) |
| 流行的网格渐变背景免费下载 | [https://webgradients.com/](https://webgradients.com/) |
| 上传并匹配提取图片风格的颜色 | [http://www.colorfavs.com/](http://www.colorfavs.com/) |

[⬆️ 返回顶部](#目录)

### 开发思想

- [**Github标星1.6W+,程序员不得不知的“潜规则”又火了,早知道就不会秃头了**](https://github.com/biaochenxuying/FrontEndGitHub/issues/3)
- 精彩待续。。。

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

[⬆️ 返回顶部](#目录)

### 技术社区

| 项目 | 地址 |
| --- | --- |
| GitHub:高质量的内容创作和分享平台 | [https://github.com/](https://github.com/) |
| stackoverflow:一个回答技术问题的网站 | [https://stackoverflow.com/](https://stackoverflow.com/) |
| 掘金:目前来看,国内的很多优质前端文章,都在掘金上 | [https://juejin.cn/](https://juejin.cn/) |
| 博客园:一个很纯粹的技术博客平台 | [https://www.cnblogs.com/](https://www.cnblogs.com/) |
| 知乎:很多做技术的同学也开始玩知乎了,阿里的不少前端大牛在知乎上就非常活跃 | [https://www.zhihu.com/](https://www.zhihu.com/) |
| segmentfault:比较低调的技术博客平台 | [https://segmentfault.com/](https://segmentfault.com/) |
| CSDN:广告太多,但奈何你这么老牌 | [https://www.csdn.net/](https://www.csdn.net/) |
| v2ex:一个关于分享和探索的地方 | [https://www.v2ex.com/](https://www.v2ex.com/) |
| Node.js专业中文社区 | [https://www.jstips.co/](https://www.jstips.co/) |
| JS技巧:每天推出一个JS技巧的网站 | [http://cnodejs.org/](http://cnodejs.org/) |
| W3cplus:是一个致力于推广国内前端行业的技术博客 | [https://www.w3cplus.com/](https://www.w3cplus.com/) |
| 印记中文:是最权威是技术中文文档社区 | [https://docschina.org/](https://docschina.org/) |

[⬆️ 返回顶部](#目录)

### 博客团队

| 项目 | 地址 |
| --- | --- |
| 腾讯AlloyTeam | [http://www.alloyteam.com/](http://www.alloyteam.com/) |
| 腾讯社交用户体验ISUX | [https://isux.tencent.com/](https://isux.tencent.com/) |
| 淘系前端团队 | [https://fed.taobao.org/](https://fed.taobao.org/) |
| 阿里巴巴国际UED | [http://www.aliued.com/](http://www.aliued.com/) |
| 京东 凹凸实验室 | [https://aotu.io/](https://aotu.io/) |
| 饿了么前端 | [https://zhuanlan.zhihu.com/ElemeFE](https://zhuanlan.zhihu.com/ElemeFE) |
| 百度前端研发部FEX | [http://fex.baidu.com/](http://fex.baidu.com/) |
| 360 奇舞团 | [https://75team.com/](https://75team.com/) |
| 美团技术团队 | [https://tech.meituan.com/](https://tech.meituan.com/) |
| 夜尽天明 | [https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog) |

[⬆️ 返回顶部](#目录)

### GitHub 统计

| 项目 | 地址 |
| --- | --- |
| GitHub 全球排名:这个排名很权威 | [https://gitstar-ranking.com/](https://gitstar-ranking.com/) |
| GitHub 中文排行榜、高分优秀中文项目 | [https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts](https://github.com/kon9chunkit/GitHub-Chinese-Top-Charts) |

[⬆️ 返回顶部](#目录)

### 前端大会

| 项目 | 地址 |
| --- | --- |
| Vue.js 开发者大会:Vue.js 开发者大会中国 | [https://fequan.com/](https://fequan.com/) |
| 中国 JS 开发者大会:一场专注于 JavaScript 和 Node.js 技术的国际性大会 | [https://jsconfchina.com/](https://jsconfchina.com/) |
| 中国 CSS 开发者大会:提高 css 开发姿势的大会 | [https://css.w3ctech.com/](https://css.w3ctech.com/) |
| D2 前端技术论坛:阿里巴巴举办,分享技术的乐趣,探讨行业的发展 | [http://d2forum.alibaba-inc.com/](http://d2forum.alibaba-inc.com/) |

[⬆️ 返回顶部](#目录)

### 打包工具

| 项目 | 地址 |
| --- | --- |
| NPM | [https://www.npmjs.com/](https://www.npmjs.com/) |
| Yarn | [https://yarnpkg.com/zh-Hans/](https://yarnpkg.com/zh-Hans/) |
| Webpack | [https://webpack.js.org/](https://webpack.js.org/) |
| Gulp | [https://www.gulpjs.com.cn/](https://www.gulpjs.com.cn/) |
| Babel | [https://babeljs.io/](https://babeljs.io/) |
| ESLint:可组装的 JavaScript 和 JSX 检查工具 | [https://cn.eslint.org/](https://cn.eslint.org/) |
| PostCSS:用 JavaScript 工具和插件转换 CSS 代码的工具 | [https://www.postcss.com.cn/](https://www.postcss.com.cn/) |
| rollup: 打包 npm 库 | [https://github.com/rollup/rollup](https://github.com/rollup/rollup) |
| parcel: 和 webpack 类似的打包工具 | [https://github.com/parcel-bundler/parcel](https://github.com/parcel-bundler/parcel) |
| systemjs:针对一些特殊场景会比较有用,比如云 ide,支付宝小程序 IDE 等 | [https://github.com/systemjs/systemjs](https://github.com/systemjs/systemjs) |
| microbundle:基于 rollup,简化配置 | [https://github.com/developit/microbundle](https://github.com/developit/microbundle) |
| bili:基于 rollup,同上 | [https://github.com/egoist/bili](https://github.com/egoist/bili) |
| vue-cli:vue 命令行工具 | [https://github.com/vuejs/vue-cli](https://github.com/vuejs/vue-cli) |
| create-react-app:react 官方脚手架 | [https://github.com/facebook/create-react-app](https://github.com/facebook/create-react-app) |
| prepack:通过预先执行的方式优化打包结果 | [https://github.com/facebook/prepack](https://github.com/facebook/prepack) |
| swc:基于 rust 的语法转换器,babel 的竞争者 | [https://github.com/swc-project/swc](https://github.com/swc-project/swc) |
| nathan/pax:基于 rust,据说是这个星球最快的 JavaScript 打包工具 | [https://github.com/nathan/pax](https://github.com/nathan/pax) |
| pikapkg/web: 浏览器里跑 npm 依赖,面向现代浏览器 | [https://github.com/pikapkg/web](https://github.com/pikapkg/web) |
| lebab/lebab:把 es5 代码转成 es6,反向 babel | [https://github.com/lebab/lebab](https://github.com/lebab/lebab) |
| snowpack:现代Web的更快打包工具系统 | [https://github.com/pikapkg/snowpack](https://github.com/pikapkg/snowpack) |

[⬆️ 返回顶部](#目录)

### 代码托管平台

| 项目 | 地址 |
| --- | --- |
| coding:代码托管平台| [https://coding.net/](https://coding.net/) |
| 码云:代码托管平台 | [https://gitee.com/](https://gitee.com/) |
| github:代码托管平台 | [https://github.com/](https://github.com/) |
| SVN:代码托管平台 | [https://svnbucket.com/?ADTAG=bdss#/](https://svnbucket.com/?ADTAG=bdss#/) |
| SVN:代码托管中心 | [http://www.svnchina.com/](http://www.svnchina.com/) |
| git:官网 | [https://git-scm.com/](https://git-scm.com/) |
| 阿里云 | [https://www.aliyun.com](https://www.aliyun.com/) |
| 腾讯云 | [https://cloud.tencent.com/](https://cloud.tencent.com/) |

[⬆️ 返回顶部](#目录)

### 调试抓包

| 项目 | 地址 |
| --- | --- |
| whistle:代理抓包工具,很好很强大 | [https://wproxy.org/whistle/](https://wproxy.org/whistle/) |
| Easy Mock | [https://www.easy-mock.com](https://www.easy-mock.com/) |
| Fiddler:代理抓包工具 | [https://www.telerik.com/fiddler](https://www.telerik.com/fiddler) |

[⬆️ 返回顶部](#目录)

### 开发工具

- [**推荐 12 个提升程序员软技能与效率的必备工具,爱了爱了 👍**](https://github.com/biaochenxuying/FrontEndGitHub/issues/48)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| VS Code | [https://code.visualstudio.com/](https://code.visualstudio.com/) |
| Sublime Text | [https://www.sublimetext.com/](https://www.sublimetext.com/) |
| WebStorm | [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/) |
| Atom | [https://atom.io/](https://atom.io/) |

[⬆️ 返回顶部](#目录)

### 录屏工具

- [推荐 GitHub 上很火的录屏工具,秒杀 33 种同行工具](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/31)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| screenity | [https://github.com/alyssaxuu/screenity](https://github.com/alyssaxuu/screenity) |

[⬆️ 返回顶部](#目录)

### 买房实用指南

- [推荐 2 个 Github 上超火的程序员买房必备实用指南!](https://github.com/FrontEndGitHub/FrontEndGitHub/issues/32)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| hangzhou_house_knowledge: 杭州 | [https://github.com/houshanren/hangzhou_house_knowledge](https://github.com/houshanren/hangzhou_house_knowledge) |
| hangzhou_house_knowledge:上海 | [https://github.com/ayuer/shanghai_house_knowledge](https://github.com/ayuer/shanghai_house_knowledge) |

[⬆️ 返回顶部](#目录)

### 优质的前端博客

| 公众号 | 作者 | 微信 | 地址 | 简介 |
| --- | --- | --- | --- | --- |
| 全栈修炼 | 夜尽天明 | CB834301747 | [https://github.com/biaochenxuying/blog](https://github.com/biaochenxuying/blog) | 分享大前端开发相关的技术文章,热点资源,全栈程序员的成长之路 |
| 前端下午茶 | SHERlocked93 | qianyu443033099 | [https://github.com/SHERlocked93/blog](https://github.com/SHERlocked93/blog) | 分享前端相关的技术博客、精选文章,期待在这里和大家一起进步! |
| 前端UpUp | 天天 | DayDay2021 | [https://github.com/daydaylee1227/leetcode-Algorithms](https://github.com/daydaylee1227/leetcode-Algorithms) | leetcode算法相关的,从0到1刷leetcode。 |
| 前端从进阶到入院 | ssh | sshsunlight | [https://github.com/sl1673495/blogs](https://github.com/sl1673495/blogs) | 📖全网 100w+ 阅读量的进阶前端技术博客仓库,Vue 源码解析,React 深度实践,TypeScript 进阶艺术,工程化,性能优化实践…… |
| iCSS前端趣闻 | Coco | coco1s | [https://github.com/chokcoco/iCSS](https://github.com/chokcoco/iCSS) | 9300+ Stars 的 CSS 仓库,各种 CSS 奇技淫巧,在这里,都有。 |
| 若川视野 | 若川 | ruochuan12 | [https://github.com/lxchuan12/blog](https://github.com/lxchuan12/blog) | 学习源码整体架构系列多篇,前端面试高频源码 |
| 前端布道师 | 苏南 | su-south | [https://github.com/meibin08/comics-program-life](https://github.com/meibin08/comics-program-life) | 一个用漫画演绎程序员日常轶事、分享前端前沿技术、大厂面经与干货的公众号,号主是个爱画画的前端切图崽,热爱代码的同时,也希望用漫画的形式让更多了解程序员。 |
| 秋风的笔记 | 秋风 | qiufengblue | [https://github.com/hua1995116/vuepress-blog](https://github.com/hua1995116/vuepress-blog) | 分享工程化、开源知识、有趣的前端知识。 |
| 前端食堂 | 童欧巴 | hungryturbo | [https://github.com/Geekhyt/front-end-canteen](https://github.com/Geekhyt/front-end-canteen) | 你的前端食堂,吃好每一顿饭🍥 |
| 深圳湾码农 | Rock | ruanxiongbiao | [https://github.com/qappleh/Interview](https://github.com/qappleh/Interview) | 分享BAT大厂面试题,每天攻破一道题,带你从0到1系统构建web全栈完整的知识体系! |
| 进击的大前端 | 蒋鹏飞 | ffx313 | [https://github.com/dennis-jiang/Front-End-Knowledges](https://github.com/dennis-jiang/Front-End-Knowledges) | 成体系的前端进阶知识 |
| 小鹿动画学编程 | 小鹿 | lxq17853556107 | [https://github.com/luxiangqiang/Blog](https://github.com/luxiangqiang/Blog) | 全Github唯一动画仓库,用动画的形式把前端技术讲的淋漓尽致!也包括自己整理的前端面试和进阶文章分享,欢迎关注哦! |
| 编程如画 | 大鹏 | aaron875499765 | [https://github.com/guanpengchn/blog](https://github.com/guanpengchn/blog) | 全网最特别的画解算法,mdnice作者官方博客 |
| 前端思维框架 | ViktorHub | viktorhub | [https://github.com/ViktorWong/my-docs](https://github.com/ViktorWong/my-docs) | 建设Web全栈数字图书馆,揭秘Web全栈架构师,打造个人核心竞争力。 |

[⬆️ 返回顶部](#目录)

### 图标

| 项目 | 地址 |
| --- | --- |
| Font Awesome:网站开发最流行的图标集 | [http://www.fontawesome.com.cn/](http://www.fontawesome.com.cn/) |
| Feather:简洁美观的开源图标 | [https://feathericons.com/](https://feathericons.com/) |
| Ionicons:精心绘制的开源图标 | [https://ionicons.com/](https://ionicons.com/) |
| Simple Icons:常见品牌的 SVG 图标:轻快、精美的符号图标,包括常见操作和事项 | [https://simpleicons.org/](https://simpleicons.org/) |
| Material Design Icons | [https://material.io/resources/icons/](https://material.io/resources/icons/) |
| Tabler Icons:3500+ 枚可定制的开源 SVG 图标 | [https://tabler-icons.io/](https://tabler-icons.io/) |

[⬆️ 返回顶部](#目录)

### 色彩

| 项目 | 地址 |
| --- | --- |
| Material Design Colors | [https://www.materialui.co/colors](https://www.materialui.co/colors) |
| Flat UI Colors:14 组配色、280 种颜色 | [https://flatuicolors.com/](https://flatuicolors.com/) |
| Color Hunt:分享色彩搭配的自由开放平台,包括成千上万人工选取的配色,可以从中获取配色的灵感 | [https://colorhunt.co/](https://colorhunt.co/) |
| Color Space:配色方案、CSS 颜色渐变生成工具 | [https://mycolor.space/](https://mycolor.space/) |
| uiGradients:美观的颜色渐变 | [http://www.uigradients.com/](http://www.uigradients.com/) |
| Colors and Fonts:色彩和字体工具 | [https://colorsandfonts.com/](https://colorsandfonts.com/) |
| Coolors:配色方案生成工具 | [https://coolors.co/](https://coolors.co/) |

[⬆️ 返回顶部](#目录)

### 插画

| 项目 | 地址 |
| --- | --- |
| Undraw:持续更新的精美的 SVG 插画集 | [https://undraw.co/illustrations](https://undraw.co/illustrations) |
| manypixels:免费插画集 | [https://gallery.manypixels.co/](https://gallery.manypixels.co/) |
| IRA Design:通过调配渐变色、搭配手绘组件定制插画 | [https://iradesign.io/gallery/illustrations](https://iradesign.io/gallery/illustrations) |
| Free Illustrations by Lukasz Adam:免费 SVG 插画 | [https://lukaszadam.com/illustrations](https://lukaszadam.com/illustrations) |
| Blobmaker:在线 SVG 形状生成器 | [https://www.blobmaker.app/](https://www.blobmaker.app/) |
| Get Waves:在线 SVG 波形生成器 | [https://getwaves.io/](https://getwaves.io/) |

[⬆️ 返回顶部](#目录)

### 图片

| 项目 | 地址 |
| --- | --- |
| Unsplash:可供免费使用的图片 | [https://unsplash.com/](https://unsplash.com/) |
| Pexels:精美的免费图片和视频 | [https://www.pexels.com/](https://www.pexels.com/) |
| Burst:免费高分辨率图片,可用于网站和商业用途 | [https://burst.shopify.com/](https://burst.shopify.com/) |
| ISO Republic:使用 CC0 许可的免费高分辨率图片和视频 | [https://isorepublic.com/](https://isorepublic.com/) |
| Pixabay:令人惊叹的免费(公共领域)图片和视频站点 | [https://pixabay.com/](https://pixabay.com/) |
| StockSnap:精美的免费图片,同样使用 CC0 许可 | [https://stocksnap.io/](https://stocksnap.io/) |
| Photopea:在线图片编辑工具,支持大量高级功能 | [https://www.photopea.com/](https://www.photopea.com/) |
| Online Image Compressor:在线图片压缩工具,一次可以压缩多达 20 张图片 | [https://imagecompressor.com/](https://imagecompressor.com/) |
| Bulk Resize Photos:最快的在线图片缩放工具(图片缩放和压缩在本地完成,无需上传到服务器 | [https://bulkresizephotos.com/en](https://bulkresizephotos.com/en) |

[⬆️ 返回顶部](#目录)

### 设计工具

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

[⬆️ 返回顶部](#目录)

### WEB 技术清单

- [**2020-WEB开发路线图,和即将到来的 2021-WEB技术清单**](https://github.com/biaochenxuying/FrontEndGitHub/issues/1)
- 精彩待续。。。

| 项目 | 地址 |
| --- | --- |
| developer-roadmap:开发人员路线图,循序渐进的指南和路径,以学习不同的工具或技术 | [https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap) |
| developer-roadmap:中文地址 | [https://github.com/kamranahmedse/developer-roadmap/blob/master/translations/chinese](https://github.com/kamranahmedse/developer-roadmap/blob/master/translations/chinese) |

[⬆️ 返回顶部](#目录)

### 学习资源

- [1. **160+ 本技术类常用精华电子书开源了,包括 前端、后端、数据结构与算法、计算机基础、设计模式、数据库等书籍**](https://github.com/biaochenxuying/awesome-books)
- [2. 极客时间上的《TypeScript 开发实战》课程资源,包含课件、思维导图、课程源代码](https://github.com/biaochenxuying/blog/tree/master/typescript-in-action)
- [3. 视频资料分享 - Vue、React、Node、MongoDB 全栈、打造商城系统、实战项目汇总](https://mp.weixin.qq.com/s/7f767Y5FHM9i2_GeUSz-Iw)

[⬆️ 返回顶部](#目录)

## 推荐项目

- [大家有什么好的开源项目,可以在这里面推荐哦](https://github.com/FrontEndGitHub/FrontEndGitHub/discussions/13)

## 服务器

笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。

因为笔者就有自己的服务器,而且有两台了,用于平时的学习,还搭建了自己的网站。

有不少读者问过我,为什么我学的那么快的呢 ? 怎么在一年内学了那么知识的...

其实也没什么秘决,就是平时有自己的服务器了,就爱折腾,学到的知识能很快得到验证,所以学起来兴致高一点。

特别是大三和大四的学生、刚入门的初级前端,买了服务器,搭建个项目给面试官看也香,对找工作和面试都加分,还可以熟悉技术栈。

想学得快,就得有自己的服务器来折腾才行。

**阿里云、腾讯云、华为云** 都有,这里购买就是最优惠: [低于 1 折、89/年、229/3年,比学生机还便宜](https://biaochenxuying.cn/articleDetail?article_id=5de65dd90283dc742f8f633a))

比如笔者的两个网站:

> https://biaochenxuying.cn/

> https://www.kwgg2020.com/

## 撩我

猫哥的年终总结在这里: [前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马](https://mp.weixin.qq.com/s/qNxmvFxLCQVst4keREc72w),希望能带给你一点启发。

- [关于猫哥,请点这里](https://github.com/biaochenxuying)

![](https://upload-images.jianshu.io/upload_images/12890819-45092d7cc1d40d4e.gif?imageMogr2/auto-orient/strip)

| 微信: **CB834301747** | 公众号: **前端GitHub** |
| :------: | :------: |
|

![CB834301747](./images/CB834301747.jpeg)
|
![FrontEndGitHub](./images/FrontEndGitHub.png)
|

> 欢迎关注微信公众号 “**[前端GitHub](https://upload-images.jianshu.io/upload_images/12890819-9a13b43f4feb8f84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**”,回复 **电子书** 就送你 **1000+** 本精华编程电子书;回复 **1024** 送你一套完整的 **前端** 视频教程。

![](https://upload-images.jianshu.io/upload_images/12890819-860e00b3a4b6c418.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

有需要的就来拿吧,**绝对免费,无套路获取**。