前端最强的学习导航

FrontEndGitHubLogo

专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称，涵盖 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 上能挖矿的神仙技巧 - 如何发现优秀开源项目 (opens new window)。

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

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

前端
后端

# 文章与项目

# 软技能

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

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

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

网站	说明
TypeScript (opens new window)	TypeScript 官网，TS 扩展了 JavaScript ，为它添加了类型支持
typescript-tutorial (opens new window)	TypeScript 入门教程，循序渐进的理解 TypeScript
TypeScript (opens new window)	TypeScript 使用手册
typescript-book-chinese (opens new window)	深入理解 TypeScript
clean-code-typescript (opens new window)	适用于TypeScript的简洁代码概念
TypeScript入门 (opens new window)	TypeScript 入门的视频教程
typescript-tutorial (opens new window)	TypeScript 速成教程（2小时速成）

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

前端最强的学习导航

# 简介

# 目录

# 文章与项目

# 软技能

# 前端趋势榜

# Vue3

# Vue 源码解密

# React 源码解密

# 面试专题

# 简历专题

# JavaScript

# Flutter

# TypeScript

# 前端必备在线工具

# 计算机内功秘籍

# 在线的代码转图片

# 管理后台 admin

# 逼格满满的 PPT

# 数据结构与算法

# CSS 学习专题

# Node.js

# 小程序

# 前端监控

# 接口文档管理

# 前端的代码规范

# 程序员必备仓库

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

# 设计规范

# 可视化

# 代码生成器

# 下载全网视频

# 酷炫的极客界面

# 抠图神器

# 在线绘图

# 颜色搭配

# 开发思想

# 技术社区

# 博客团队

# GitHub 统计

# 前端大会

# 打包工具

# 代码托管平台

# 调试抓包

# 开发工具

# 录屏工具

# 买房实用指南

# 优质的前端博客

# 图标

# 色彩

# 插画

# 图片

# 设计工具

# WEB 技术清单

# 学习资源

# 推荐项目

# 服务器

# 撩我