專註於挖掘優秀的前端開源項目，抹平你的前端信息不對稱，涵蓋 JavaScript、Vue、React、Node、小程式、Flutter、Deno、HTML、CSS 等。

前端最強的學習導航: https://www.kwgg2020.com

貓哥的技術部落格地址：https://github.com/biaochenxuying/blog

簡介

初級前端與高級前端之間，很大原因就是投入學習前端的時間、經驗的差別，其實就是信息差。

如果有一個地方能又快又好的獲得這些優質的前端信息，那麼將會大大縮短從初級到高級的時間。

基於這個初衷，於是就誕生了這個倉庫，能幫助前端開發人員節省時間的倉庫！

本項目專註於挖掘 GitHub 上優秀的前端開源項目，並以專題的形式推薦，每專題大概 10 個好項目，每周會有一到三篇精華文章推送。

已經推薦了 麵試項目、css奇技淫巧項目、代碼規範項目、數據結構與算法項目、管理後臺模闆、前端必備在線工具 等專題的近 200 個優秀項目了。

希望你在瀏覽、學習了超級貓推薦的這些開源項目的過程中，你能學習到更多編程知識、提高編程技巧、找到編程的樂趣。

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目。

歡迎關註公衆號：前端GitHub，後臺回複 “電子書”，獲取 160+ 本前端精華電子書哦。

目錄

• 簡介
• 目錄
• 文章與項目
  • 軟技能
  • Vue3
  • Vue 源碼解密
  • React 源碼解密
  • 麵試專題
  • 簡曆專題
  • JavaScript
  • Flutter
  • TypeScript
  • 前端必備在線工具
  • 計算機內功秘籍
  • 在線的代碼轉圖片
  • 管理後臺 admin
  • 逼格滿滿的 PPT
  • 數據結構與算法
  • CSS 學習專題
  • 小程式
  • 前端的代碼規範
  • 程式員必備倉庫
  • 拓展程式員技術與視野的國外網站
  • 設計規範
  • 代碼生成器
  • 下載全網視訊
  • 酷炫的極客界麵
  • 摳圖神器
  • 在線繪圖
  • 顔色搭配
  • 開發思想
  • 技術社區
  • 部落格團隊
  • GitHub 統計
  • 前端大會
  • 打包工具
  • 代碼托管平臺
  • 調試抓包
  • 開發工具
  • 錄屏工具
  • 買房實用指南
  • 優質的前端部落格
  • 圖示
  • 色彩
  • 插畫
  • 圖片
  • 設計工具
  • WEB 技術清單
  • 學習資源
• 推薦項目
• 撩我

文章與項目

軟技能

• 自從掌握了Google和百度的 16 個高級搜索技巧，我再也冇有解決不了的 bug 了
• 恕我直言，你可能連 GitHub 搜索都不會用 - 如何精準搜索的神仙技巧
• 精彩待續。。。

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

⬆️ 返回頂部

Vue3

• Vue3 的學習教程匯總、源碼解釋項目、支援的 UI 組件庫、優質實戰項目
• 精彩待續。。。

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

⬆️ 返回頂部

Vue 源碼解密

• **推薦 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/

⬆️ 返回頂部

React 源碼解密

• **推薦一個 React 技術揭秘的項目，自頂嚮下的 React 源碼分析 **
• 精彩待續。。。

項目	地址
just-react：嚴謹、易懂的 React 源碼分析教程	https://github.com/BetaSu/just-react

⬆️ 返回頂部

麵試專題

• 推薦這 10 個 GitHub 上超火的前端麵試項目，打造自己的加薪寶庫！
• 精彩待續。。。

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

⬆️ 返回頂部

簡曆專題

• 10 個 GitHub 上最火的程式員簡曆項目，2021 金三銀四必備！
• 精彩待續。。。

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

⬆️ 返回頂部

JavaScript

• 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目，找到寫 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 和 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
three.js：JavaScript編輯3D模型，各種各樣炫酷的效果以及Documentation值得你去了解three.js	three.js](https://threejs.org/)

⬆️ 返回頂部

Flutter

• 推薦 4 個基於 Flutter 的重磅高仿開源項目
• 精彩待續。。。

網站	說明
dy_flutter	鬥魚 APP
flutter_tiktok	精仿抖音
flutter-osc	開源中國客戶端
FlutterDouBan	豆瓣客戶端

⬆️ 返回頂部

TypeScript

• 推薦 7 個學習 TypeScript 的寶庫，2021 是時候給自己加薪了！
• 精彩待續。。。

網站	說明
TypeScript	TypeScript 官網，TS 擴展了 JavaScript ，為它添加了類型支援
typescript-tutorial	TypeScript 入門教程，循序漸進的理解 TypeScript
TypeScript	TypeScript 使用手冊
typescript-book-chinese	深入理解 TypeScript
clean-code-typescript	適用於TypeScript的簡潔代碼概念
TypeScript入門	TypeScript 入門的視訊教程
typescript-tutorial	TypeScript 速成教程（2小時速成）

⬆️ 返回頂部

前端必備在線工具

• 白嫖 11 個超火的前端必備在線工具，終於有時間上班摸魚了
• 推薦 12 個學習前端必備的神仙級工具類項目與網站
• 精彩待續。。。

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

⬆️ 返回頂部

計算機內功秘籍

• 推薦 7 個 Github 上近 200k Star 的計算機學習資源，練好前端內功的秘籍！
• Ｂ站收藏 12.5w+！GitHub 標星 6.6k+！這門神課拯救了我薄弱的計算機基礎
• 精彩待續。。。

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

• 10 個 GitHub 上超火和超好看的管理後臺模版，後臺管理項目有著落了單
• 精彩待續。。。

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

• GitHub 標星 54K + 2K！這才是程式員寫逼格滿滿的 PPT 的正確姿勢！
• 精彩待續。。。

項目	地址
reveal-md：使用 Markdown 來做 PPT 展示的開源項目	https://github.com/webpro/reveal-md
reveal.js：使用 html、markdown 寫靜態的文本，創建功能齊全且美觀的 PPT	https://github.com/hakimel/reveal.js

⬆️ 返回頂部

數據結構與算法

• 7 個GitHub上最火的、最值得前端學習的數據結構與算法項目！冇有之一
• 精彩待續。。。

項目	地址
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 學習專題

• [10 個 GitHub 上超火的 CSS 技巧項目，找到寫 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/

⬆️ 返回頂部

小程式

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

⬆️ 返回頂部

前端的代碼規範

• 恕我直言，這幾個大廠的前端代碼規範你可能還不會 - 能精進前端的代碼規範
• 精彩待續。。。

項目	地址
騰訊	http://tgideas.qq.com/doc/index.html
京東	https://guide.aotu.io/index.html
airbnb	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/

⬆️ 返回頂部

程式員必備倉庫

• 推薦程式員必備的 10 大 GitHub 倉庫，前端佔了 7 個！
• 精彩待續。。。

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

⬆️ 返回頂部

拓展程式員技術與視野的國外網站

• 漲姿勢了！22 個拓展程式員技術與視野的國外網站！
• 精彩待續。。。

項目	地址
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：在線學習的網站，並且免費，裏麵有各種技術、各個知識點的講解和demo	https://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/

⬆️ 返回頂部

代碼生成器

• GitHub 2W 星：一鍵生成前後端代碼
• 精彩待續。。。

項目	地址
jeecg-boot：一鍵生成前後端代碼	https://github.com/zhangdaiscott/jeecg-boot

⬆️ 返回頂部

下載全網視訊

• GitHub 5W 星：一行命令下載全網視訊的兩個開源項目
• 精彩待續。。。

項目	地址
you-get：一行命令下載全網視訊	https://github.com/soimort/you-get
annie：一行命令下載全網視訊	https://github.com/iawia002/annie

⬆️ 返回頂部

酷炫的極客界麵

• 被驚豔到了！適用 Win、Mac、Linux，酷炫的極客界麵 eDEX-UI
• 程式員最想要的高逼格，都藏在這個開源項目裏了！
• 精彩待續。。。

項目	地址
eDEX-UI：酷炫的極客界麵	https://github.com/GitSquared/edex-ui
lively：拉高程式員電腦桌麵逼格	http://screensiz.es/phone

⬆️ 返回頂部

摳圖神器

項目	地址
removebg	https://www.remove.bg/zh
在線 ps-uupoop	https://www.uupoop.com/

⬆️ 返回頂部

在線繪圖

項目	地址
ProcessOn	https://www.processon.com/
draw.io	https://www.draw.io/
excalidraw	https://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/

⬆️ 返回頂部

開發思想

• Github標星1.6W+，程式員不得不知的“潛規則”又火了，早知道就不會禿頭了
• 精彩待續。。。

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

⬆️ 返回頂部

部落格團隊

項目	地址
騰訊AlloyTeam	http://www.alloyteam.com/
騰訊社交用戶體驗ISUX	https://isux.tencent.com/
淘係前端團隊	https://fed.taobao.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/
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，反嚮 babel	https://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 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/

⬆️ 返回頂部

錄屏工具

• 推薦 GitHub 上很火的錄屏工具，秒殺 33 種同行工具
• 精彩待續。。。

項目	地址
screenity	https://github.com/alyssaxuu/screenity

⬆️ 返回頂部

買房實用指南

• 推薦 2 個 Github 上超火的程式員買房必備實用指南！
• 精彩待續。。。

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

⬆️ 返回頂部

優質的前端部落格

公衆號	作者	微信	地址	簡介
全棧修煉	夜盡天明	CB834301747	https://github.com/biaochenxuying/blog	分享大前端開發相關的技術文章，熱點資源，全棧程式員的成長之路
前端下午茶	SHERlocked93	qianyu443033099	https://github.com/SHERlocked93/blog	分享前端相關的技術部落格、精選文章，期待在這裏和大家一起進步！
前端UpUp	天天	DayDay2021	https://github.com/daydaylee1227/leetcode-Algorithms	leetcode算法相關的，從0到1刷leetcode。
前端從進階到入院	ssh	sshsunlight	https://github.com/sl1673495/blogs	📖全網 100w+ 閱讀量的進階前端技術部落格倉庫，Vue 源碼解析，React 深度實踐，TypeScript 進階藝術，專案化，性能優化實踐……
iCSS前端趣聞	Coco	coco1s	https://github.com/chokcoco/iCSS	9300+ Stars 的 CSS 倉庫，各種 CSS 奇技淫巧，在這裏，都有。
若川視野	若川	ruochuan12	https://github.com/lxchuan12/blog	學習源碼整體架構係列多篇，前端麵試高頻源碼
前端佈道師	蘇南	su-south	https://github.com/meibin08/comics-program-life	一個用漫畫演繹程式員日常軼事、分享前端前沿技術、大廠麵經與幹貨的公衆號，號主是個愛畫畫的前端切圖崽，熱愛代碼的同時，也希望用漫畫的形式讓更多了解程式員。
秋風的筆記	秋風	qiufengblue	https://github.com/hua1995116/vuepress-blog	分享專案化、開源知識、有趣的前端知識。
前端食堂	童歐巴	hungryturbo	https://github.com/Geekhyt/front-end-canteen	你的前端食堂，吃好每一頓飯🍥
深圳灣碼農	Rock	ruanxiongbiao	https://github.com/qappleh/Interview	分享BAT大廠麵試題，每天攻破一道題，帶你從0到1係統構建web全棧完整的知識體係！
進擊的大前端	蔣鵬飛	ffx313	https://github.com/dennis-jiang/Front-End-Knowledges	成體係的前端進階知識
小鹿動畫學編程	小鹿	lxq17853556107	https://github.com/luxiangqiang/Blog	全Github唯一動畫倉庫，用動畫的形式把前端技術講的淋漓盡緻！也包括自己整理的前端麵試和進階文章分享，歡迎關註哦！
編程如畫	大鵬	aaron875499765	https://github.com/guanpengchn/blog	全網最特別的畫解算法，mdnice作者官方部落格
前端思維框架	ViktorHub	viktorhub	https://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 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

⬆️ 返回頂部

設計工具

項目	地址
墨刀：原型設計工具	https://modao.cc/
藍湖：一款産品文檔和設計圖的在線協作平臺	https://lanhuapp.com
PxCook（像素大廚）：高效易用的自動標註工具	https://www.fancynode.com.cn/pxcook

⬆️ 返回頂部

WEB 技術清單

• 2020-WEB開發路線圖，和即將到來的 2021-WEB技術清單
• 精彩待續。。。

項目	地址
developer-roadmap：開發人員路線圖，循序漸進的指南和路徑，以學習不同的工具或技術	https://github.com/kamranahmedse/developer-roadmap

前端開發路線圖

後端開發路線圖

運維開發路線圖

⬆️ 返回頂部

學習資源

• 1. 160+ 本技術類常用精華電子書開源了，包括 前端、後端、數據結構與算法、計算機基礎、設計模式、數據庫等書籍
• 2. 極客時間上的《TypeScript 開發實戰》課程資源，包含課件、思維導圖、課程源代碼
• 3. 視訊資料分享 - Vue、React、Node、MongoDB 全棧、打造商城係統、實戰項目匯總

⬆️ 返回頂部

推薦項目

• 大家有什麼好的開源項目，可以在這裏麵推薦哦

撩我

貓哥的年終總結在這裏： 前端專案師的 2020 年終總結 - 乾坤未定，你我皆黑馬，希望能帶給你一點啓發。

• 關於貓哥，請點這裏

歡迎關註公衆號：前端GitHub，每周會有一到三篇的文章推送，後臺回複 “電子書”，獲取 160+ 本前端精華電子書哦。

微信: CB834301747	公衆號: 前端GitHub