New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

frontendgithub

Package Overview
Dependencies
Maintainers
0
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

frontendgithub

frontendgithub

latest
Source
npmnpm
Version
5.6.0
Version published
Maintainers
0
Created
Source

FrontEndGitHub

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

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

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

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

简介

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

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

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

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

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

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

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

欢迎关注微信公众号 “前端 GitHub”，回复 电子书 就送你 1000+ 本精华编程电子书；回复  1024  送你一套完整的 前端 视频教程。

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

目录

文章与项目

软技能

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

⬆️ 返回顶部

前端趋势榜

⬆️ 返回顶部

Vue3

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

⬆️ 返回顶部

Vue 源码解密

| 项目 | 地址 | | -------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------ | | vue-analysis：Vue.js 源码分析 |  https://github.com/ustbhuangyi/vue-analysis | | vue-design：逐行级别的分析 | http://hcysun.me/vue-design/zh/ | | vue-family-mindmap：用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点 | https://github.com/biaochenxuying/vue-family-mindmap | | 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/ |

⬆️ 返回顶部

React 源码解密

项目地址
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 在线简历工具，可在线预览、编辑、设置访问密码和生成 PDFhttps://github.com/geekcompany/DeerResume
markdown-resume：在线简历排版工具，支持切换 4 种模版、自定义和导出功能https://github.com/mdnice/markdown-resume
best-resume-ever：快速生成漂亮简历的工具，它基于 Vue 和 LESShttps://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

⬆️ 返回顶部

JavaScript

项目地址
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 和 APIhttps://developer.mozilla.org/zh-CN/
clean-code-javascript：优秀的 JS 代码规范https://github.com/ryanmcdermott/clean-code-javascript
TypeScript 入门教程：从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScripthttps://ts.xcatliu.com
w3school：前端必须知道的 Web 技术教程平台https://www.w3school.com.cn/js/index.asp
three.js：JavaScript 编辑 3D 模型，各种各样炫酷的效果以及 Documentation 值得你去了解three.jsthree.js](https://threejs.org/)

⬆️ 返回顶部

Flutter

网站说明
dy_flutter斗鱼 APP
flutter_tiktok精仿抖音
flutter-osc开源中国客户端
FlutterDouBan豆瓣客户端

⬆️ 返回顶部

TypeScript

网站说明
TypeScriptTypeScript 官网，TS 扩展了 JavaScript ，为它添加了类型支持
typescript-tutorialTypeScript 入门教程，循序渐进的理解 TypeScript
TypeScriptTypeScript 使用手册
typescript-book-chinese深入理解 TypeScript
clean-code-typescript适用于 TypeScript 的简洁代码概念
TypeScript 入门TypeScript 入门的视频教程
typescript-tutorialTypeScript 速成教程（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，WordPresshttps://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：多张图片合成雪碧图，并生成对应 csshttps://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/

⬆️ 返回顶部

管理后台 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

⬆️ 返回顶部

逼格满满的 PPT

项目地址
reveal-md：使用 Markdown 来做 PPT 展示的开源项目https://github.com/webpro/reveal-md
reveal.js：使用 html、markdown 写静态的文本，创建功能齐全且美观的 PPThttps://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

⬆️ 返回顶部

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/
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.js

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

⬆️ 返回顶部

小程序

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

⬆️ 返回顶部

前端监控

网站说明
前端监控工具 - webfunny 项目一款轻量级前端异常监控和前端性能监控系统

⬆️ 返回顶部

接口文档管理

前端的代码规范

项目地址
腾讯http://tgideas.qq.com/doc/index.html
京东https://guide.aotu.io/index.html
airbnbhttps://github.com/airbnb/javascript
百度https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
JavaScript Standard Stylehttps://github.com/standard/standard
Vue https://cn.vuejs.org/v2/style-guide/index.html
ES6http://es6.ruanyifeng.com/#docs/style
Bootstraphttps://codeguide.bootcss.com/
ESLinthttps://eslint.org/
Prettierhttps://prettier.io/

⬆️ 返回顶部

程序员必备仓库

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

⬆️ 返回顶部

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

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

⬆️ 返回顶部

设计规范

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

⬆️ 返回顶部

可视化

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

⬆️ 返回顶部

代码生成器

项目地址
jeecg-boot：一键生成前后端代码https://github.com/zhangdaiscott/jeecg-boot

⬆️ 返回顶部

下载全网视频

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

⬆️ 返回顶部

酷炫的极客界面

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

⬆️ 返回顶部

抠图神器

项目地址
removebghttps://www.remove.bg/zh
在线 ps-uupoophttps://www.uupoop.com/

⬆️ 返回顶部

在线绘图

项目地址
ProcessOnhttps://www.processon.com/
draw.iohttps://www.draw.io/
excalidrawhttps://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/

⬆️ 返回顶部

博客团队

项目地址
腾讯 AlloyTeamhttp://www.alloyteam.com/
腾讯社交用户体验 ISUXhttps://isux.tencent.com/
淘系前端团队https://fed.taobao.org/
阿里巴巴国际 UEDhttp://www.aliued.com/
京东 凹凸实验室https://aotu.io/
饿了么前端https://zhuanlan.zhihu.com/ElemeFE
百度前端研发部 FEXhttp://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/

⬆️ 返回顶部

打包工具

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

⬆️ 返回顶部

代码托管平台

项目地址
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 Mockhttps://www.easy-mock.com
Fiddler：代理抓包工具https://www.telerik.com/fiddler

⬆️ 返回顶部

开发工具

项目地址
VS Codehttps://code.visualstudio.com/
Sublime Texthttps://www.sublimetext.com/
WebStormhttps://www.jetbrains.com/webstorm/
Atomhttps://atom.io/

⬆️ 返回顶部

录屏工具

项目地址
screenityhttps://github.com/alyssaxuu/screenity

⬆️ 返回顶部

买房实用指南

项目地址
hangzhou_house_knowledge: 杭州https://github.com/houshanren/hangzhou_house_knowledge
hangzhou_house_knowledge：上海https://github.com/ayuer/shanghai_house_knowledge

⬆️ 返回顶部

优质的前端博客

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

⬆️ 返回顶部

图标

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

⬆️ 返回顶部

色彩

项目地址
Material Design Colorshttps://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：持续更新的精美的 SVG 插画集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

⬆️ 返回顶部

WEB 技术清单

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

⬆️ 返回顶部

学习资源

⬆️ 返回顶部

推荐项目

服务器

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

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

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

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

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

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

阿里云、腾讯云、华为云 都有，这里购买就是最优惠： 低于 1 折、89/年、229/3 年，比学生机还便宜）

比如笔者的两个网站：

https://biaochenxuying.cn/

https://www.kwgg2020.com/

撩我

猫哥的年终总结在这里： 前端工程师的 2020 年终总结 - 乾坤未定，你我皆黑马，希望能带给你一点启发。

微信: CB834301747公众号: 前端 GitHub
CB834301747
FrontEndGitHub

欢迎关注微信公众号 “前端 GitHub”，回复 电子书 就送你 1000+ 本精华编程电子书；回复  1024  送你一套完整的 前端 视频教程。

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

Keywords

frontendgithub

FAQs

Package last updated on 18 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Security News

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.

By Sarah Gooding  -  Apr 03, 2026