前言
由於本人著重學習 JS，框架則是學 React 比較多，所以分享的方向比較有偏向性一點，可能我比較少碰的框架或者技術資源會從缺，大家也可以在評論區分享一些自己常逛而我沒有提到的網站，我會補充上來。
本篇文章會一直繼續更新，所有排名不分先後順序。
有紅色標誌＊的代表我個人認為適合新手的資源，僅供參考（個人網站就不標註了）。
2022/07/09
新增性能優化與安全、瀏覽器、Git、Vue、CSS、TypeScript 大類和新增更多內容。
個人網站
- akashmittal
https://www.akashmittal.com/
分享的內容偏向 ReactJS & React Native。 - TypeOfNaN
https://typeofnan.dev/
Nick Scialli is a software engineer at the U.S. Digital Service.
這個部落格比較特別，沒有分類、標籤和搜索的功能，基本上你只能抱著尋寶的心情去探索。
每篇文章都不會太長，簡潔有力，多看看能收獲不少。
分享的內容偏向 React & JavaScript & TypeScript。 - PJCHENder 那些沒告訴你的小細節
https://pjchender.blogspot.com/ - 卡斯伯’s Blog
https://wcc723.github.io/ - Robin Wieruch ‘s Blog
https://www.robinwieruch.de/blog
一位德國的開發人員，部落格關鍵字包括：React、JavaScript、Webpack、Eslint、React Native、Node.js、Docker…等。 - W3cplus
https://www.w3cplus.com/
是一個致力於推廣中國前端行業的技術博客。主要以CSS3、HTML5、JavaScript、Vue、React、Mobile、動畫等教程、譯文和案例為主。 - LogRocket
https://blog.logrocket.com/
內容包括：UI/UX、JS、React、Flutter、Next.js…等。 - Eddy思考與學習
https://eddychang.me/
Eddy Chang 是一名軟體開發者，部落格主要發布 React、JS、React Native、Typescript 的文章。
他的舊blog：https://oldblog.eddychang.me/ - 阮一峰的網絡日志
https://www.ruanyifeng.com/blog/javascript/
這個應該就不需要我特別介紹了，一位已經很牛但還是一直再學習的大神的blog。 - Noob’s Space
https://noob.tw/ - DWB
https://davidwalsh.name/
一位專攻前端的大神，在部落格中分享了很多前端的乾貨，內容包括：JS、React、Node.js、HTML、CSS…等。 - James K Nelson
http://jamesknelson.com/
一位使用JS已經超過他半輩子人生的大神，部落格中分享的主要內容為 JS與React。 - Ponyfoo
https://ponyfoo.com/
一位JS大神的部落格，自創了 Pony Foo Weekly 每週四會發布前端Web開發及相關技術期刊，部落格中會分享ES6、React、Angular、Node.js…等內容。 - 2ality – JavaScript and more
https://2ality.com/
一位 JS、Web開發的大神，出過很多JS相關書籍並且免費放在網路上提供初學者們學習，部落格也主要分享的是 JS 相關的教學，Dr. Axel Rauschmayer 的文章都寫得很簡潔易懂且條理分明，值得一看。 - Let’s Write
https://www.letswrite.tw/category/frontend/
我常逛的網站之一，部落格的樣式和作者寫文的風格都很簡潔明了，有很多乾貨可以學習，看著也很舒服。 - BezKoder
https://www.bezkoder.com/
網站內容包括：Vue、Angular、React 三大框架。 - Emma goto
https://www.emgoto.com/
網站內容包括：React、gatsby、preact、redux、jest。 - CodeSource
https://codesource.io/
網站內有 Web 和應用程序開發的高級教程，涵蓋的主題包括 Vue、JavaScript、Laravel、Flutter、Golang、Python 等 - JoshWComeau
https://www.joshwcomeau.com/
部落格文章包括：React、CSS、Gatsby、Next.js…等前端內容，真的全是乾貨，特別推薦各位訂閱他的推送，都是前端的開發資訊和一些在網路上很難找到相同類型的特別內容，看他的文章能學習到很多。 - Smashing Magazine
https://www.smashingmagazine.com/
網站文章包括：CSS、JS、React、Vue、UX…等前端及網頁設計開發類內容。 - mmazzarolo
https://mmazzarolo.com/blog/
Matteo 是一名軟體工程師，他的部落格文章主要分享 React、React Native、 Webpack、Next.js…等前端內容。
學習網站
- Code Cademy
https://www.codecademy.com/
這是一個逐步學習編程的學習網站，涉及的範圍很廣，有前端、後端、全棧…等。 - ＊freeCodeCamp
https://www.freecodecamp.org/
與第一個類似的編程學習網站，但它的所有課程皆為免費，且Github star 數高達 328k。
如果遇到不會的題目或者卡關，也可以在它的 Github repo 找到解答：https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/src
課程內容包括：響應式網頁設計、JS演算法和資料結構、前端開發庫(jQuery、Bootstrap、SASS、React、Redux、React Redux)、D3、API和微服務、Python數據分析、科學計算、機器學習…等。
並且它每一類課程都會有實戰項目題，在你認為你已經學習完畢後可以嘗試挑戰項目來驗證自己所學。
單項領域課程全部通過會有免費的認證可以申請。
中文社區：https://chinese.freecodecamp.org/forum/
專欄：https://chinese.freecodecamp.org/news/
註：可以選擇中文 - udemy
https://www.udemy.com/
這是一個老牌學習網站，在這個網站上有免費、付費的課程，課程類別涵蓋廣泛，不僅僅只有程式語言的課程，還有商業、財務會計、市場行銷、健康健身…等。
我自己是在這個網站上購買了 JS 和 React 的課程，也白嫖了一些免費課程。其實花錢學習不是必須，找到合適自己的才是真的，免費的也有不少好課程。 - ＊30 seconds of code
https://www.30secondsofcode.org/
把很多細碎的概念單獨發成一篇文章，每篇文章都特別簡短有力，讓你能在三分鐘之內閱讀完畢，可以節省時間去看沒有必要的文字和找尋你想要的內容。 - ＊尚硅谷
https://space.bilibili.com/302417610/video
尚硅谷是大陸一個課程培訓機構(?)，他們有分享許多免費的前後端影片課程，我自己有學完過尚硅谷的 React、ES6、JAVA的課程，因為都是名師授課所以課程質量還是有保證的，重點是完全免費。
尚硅谷的官方網站有分享各科學習路線，並且附上尚硅谷自己出的影片教程，讓你能夠每一步都能穩扎穩打有方向的去學。 - ＊W3Schools
https://www.w3schools.com/
主要有HTML、CSS、JS的教學，以及一部分的後端語言、服務器端和數據分析…等教程。 - ＊W3Cschool
https://www.w3cschool.cn/tutorial
這個不是推薦過了怎麼又推薦一次？其實這是一個跟 W3Schools 名字很像、分享程式入門教程的網站，最重要的是它都是中文的教成，對於看英文教學比較吃力的初學者來說算是不錯的選擇。 - ＊菜鳥教程
https://www.runoob.com/
個人認為是中文版的 W3Schools，教學方向和內容基本上差不多，都是比較基礎的教程。 - The Code Player
https://thecodeplayer.com/
免費學習 HTML5, CSS3, Javascript… 等。 - HiSKIO
https://hiskio.com/
這是台灣自己的工程師教學平台，有影片教學以及書籍，大部分是付費但也有少部分免費，課程涵蓋前後端、移動裝置、人工智慧、物聯網…等，個人認為目前的課程還不算多，但是大概看了一下質量算是還不錯(小嫖了一下免費的ES6書籍)。 - GeeksforGeeks
https://www.geeksforgeeks.org/web-development/?ref=shm
包括 HTML、CSS、JS、BootStrap、jQuery、Angular、React、PHP、NodeJS、SQL的教程，內容非常豐富並且部分會有練習測驗。 - javaTpoint
https://www.javatpoint.com/
包括 HTML、CSS、JS、Angular、React …等非常多的教程，且不只包含前端。 - MOOC
https://www.icourse163.org/
課程涉及範圍廣且免費的也不少。 - Coursera
https://zh-tw.coursera.org/
也是國外有名氣的在線課程學習平台之一，不錯的一點是它支援繁體中文。 - edX
https://www.edx.org/
同上，不過沒有中文。 - LintCode
https://www.lintcode.com/
類似 Leetcode 的刷題網站，支援簡體中文，程式語言可以選擇Java、Python、C++、Go以及JavaScript。目前題庫包括：演算法、資料庫、平行計算、JAVA、物件導向、Python、系統設計、大數據、人工智能、Django、Linux命令行、Git命令行。網站中也有提供教程，不過目前教程還不夠完善，僅有人工智能和SQL的教程。
推薦一個題集：新手必刷編程50題 - hihoCoder
https://hihocoder.com/
一樣是刷題網站，能直觀看見所有題目的答題人數排序，以及問題的難度。 - 牛客網
https://www.nowcoder.com/
大陸的刷題網站，包括演算法、SQL、SHELL和前端的題庫，有模擬筆試、考研真題、期末考題、精華專題…等多種類別的題集，還有各大企業AI模擬面試跟自己出的教程。 - egghead.io
https://egghead.io/
有 React、JS、CSS、Angular、TypeScript、Next.js、Vue.js…等教學內容，大部分教學都是免費的，並且會將課程內容分為初階、中階以及進階，讓你能更精準的找到適合自己的教學。 - Kirupa
https://www.kirupa.com/learn/index.htm
提供了一些HTML、CSS、JS的詳細教學，值得一提的是網站做的很好看。 - 書棧網
https://www.bookstack.cn/cate
蒐集了部分iT開源編程免費電子書資源，前端部分除JS、CSS、HTML(5)之外還包括框架 React、Vue、Angular 以及比較熱門的幾個庫的免費電子書資源。 - SitePoint
https://www.sitepoint.com/
數百本關於 Web 開發的書籍、課程和技術講座中進行選擇。學習 HTML、CSS 和 JavaScript 到 React、Docker 和 Python。
趨勢追蹤
- ＊decipherzone
https://www.decipherzone.com/blog
這個部落格會分享許多前端、後端…等方向的趨勢乾貨，有興趣的話可以去挖挖寶。
關鍵字涵蓋：開發路線圖、網頁設計、雲服務、資料庫、技術趨勢…等。 - Developer Roadmaps
https://roadmap.sh/
前端、後端、Android、DevOps、React…等開發者路線圖分享。 - React Newsletter Archives
https://reactnewsletter.com/issues
React 週報，會推薦優質的 React 文章、教程、項目、影片…等。 - ＊JavaScript Weekly
https://javascriptweekly.com/
內容包括：Javascript 優質文章、教學、代碼和工具。 - Echo JS
https://www.echojs.com/
Echo JS 是一個 JS 消息網站，完全專注於 JavaScript 開發、HTML5 和前端新聞。 - 前端週刊
https://frontend-weekly.com/
全面的前端開發週刊。 - HTML5 Weekly
http://html5weekly.com/ - CSS Weekly
http://css-weekly.com/ - Web Design Weekly
https://web-design-weekly.com/ - ＊React status
https://docschina.org/weekly/react/
印記中文所作的 React 週刊網站，主要分享一週熱門消息以及優質教程、工具、repo…等。 - RWD Weekly Newsletter
https://responsivedesign.is/newsletter/
免費的、每週一次的響應式設計文章、工具、技巧、教程和鼓舞人心的鏈接匯總。 - Dev tips
https://umaar.com/dev-tips/
一些前端開發時的技巧分享。 - Web Design Weekly
https://web-design-weekly.com/
會分享每週網頁設計新聞、值得瀏覽的文章、工具以及資源。 - ＊Tools for Web Developers
https://webtoolsweekly.com/
是一份專注於工具的前端開發和網頁設計時事通訊。 - ＊Daily.dev
https://app.daily.dev/
開發者趨勢社區，可以了解所有語言的趨勢以及目前的流行話題，可以根據自己的興趣訂閱不同的內容。資源來源於 Hacker News、DEV、HashNode、freeCodeCamp…等，可安裝瀏覽器擴展（Chrome、Firefox、Edge）來使用。
社區與論壇
- iT邦幫忙
https://ithelp.ithome.com.tw/
台灣自己的iT論壇，你可以在這裡詢問以及分享iT資訊，但是特別注意在這個論壇不要做伸手牌(其實是在哪個社區都不要…)。 - ＊Medium
https://medium.com/
Medium是一個部落格發布平台，你可以在這個平台找到各式各樣的文章，也有不少前後端相關的文章，可以嘗試輸入關鍵字去挖寶。 - 掘金
https://juejin.cn/
一個幫助開發者成長的社區，是給開發者用的Hacker News，給設計師用的Designer News，和給產品經理用的Medium。 - 知乎
https://www.zhihu.com/
嚴格來說，知乎並不能算是學習論壇，因為內容還滿雜的，而且質量參差不齊，但還是有一些乾貨可以挖挖看。 - SegmentFault 思否
https://segmentfault.com/
有專欄、課程以及問答區，算是一個滿全面的技術社區，重點是全都是中文，程式學習者的福音。 - CSDN
https://www.csdn.net/
CSDN(Chinese Software Developer Network)開發者的iT學習和交流平台，水平和文章質量比較參差不齊，因為發表文章的門檻不高。 - ＊Stack Overflow
https://stackoverflow.com/questions
形同開發者的知識+，提問社區，你搜索的開發相關問題90%都會通往這裡。 - MDN
https://developer.mozilla.org/zh-TW/
包含 CSS、HTML 和 JavaScript 文檔的網站，適合用來學習和複習 Web 技術，最近 UI 改版，變得比以前更清爽了。 - OSCHINA
https://www.oschina.net/
中國最大的開源技術社區，擁有超過300萬會員，形成了由開源軟件庫、代碼分享、資訊、協作翻譯、討論區和博客等幾大頻道內容，為IT開發者提供了一個發現、使用、並交流開源技術的平台。 - ＊Github
https://github.com/
就像是開發者的寶藏庫，就算是沒有目的的去看流行趨勢庫也能發掘到不少好東西。 - ＊DEV Community
https://dev.to/
是一個開發者交流社區，不分前後端，論壇人氣標籤包含：Javascript、webdev、react、python、css…等。 - ＊Designer News
https://www.designernews.co/
Designer News 是一個大型的全球社區，由對設計和技術工作或感興趣的人組成。 - Qiita
https://qiita.com/
日本的軟體工程師社交知識共享論壇，如果有懂日文的可以看看。
JavaScript
- ＊现代 JavaScript 教程
https://zh.javascript.info/
免費 JavaScript 教學電子書，講解的很詳細、淺顯易懂，若是曾學過 JS 但沒有學得很系統的話可以再回過頭來複習，絕對能學到不少。 - ＊ES6 入门教程
https://es6.ruanyifeng.com/
這是阮一峰所寫的 ES6 入門電子書，如果是學寫程式的應該沒有人不知道阮一峰是誰，他的表達能力以及技術水平很高，即使我重看好幾遍Promise 对象這章節，我每次還是能學到不少東西。 - JavaScript Promise迷你书（中文版）
http://liubin.org/promises-book/#introduction
學這本之前需要有 JS 的基礎，不然學起來很吃力。主要是在介紹 JS 中的 Promise。 - javascript30
https://javascript30.com/
這是 Javascript 的 30 天挑戰，沒有框架、IDE、庫…等其他混雜，純粹學習 JS，針對希望熟悉 JavaScript 基礎知識和在沒有庫的情況下在 DOM 中工作的初學者到中級開發人員和設計人員。
你可以透過輸入 Email 註冊然後獲得 30 天的影片以及初始文件。
不止 JS30，他還有發布其他課程，包括React & GraphQ、Gatsby、CSS、Node.js、Redux…等，有興趣可以看：https://wesbos.com/ - JavaScript 祕密花園
http://bonsaiden.github.io/JavaScript-Garden/zhtw/
主要分享JS比較古怪的部分，這份文件會一直更新。 祕密花園會提出一些意見來防止遇到一些常見的錯誤和一些難以發現的問題，以及性能問題和不好的習慣。 初學者也可以藉此去了解 Javascript 這項語言的特性。 - ＊JavaScript 教程 – 網道
https://wangdoc.com/javascript/
一樣是阮一峰老師所寫，非常詳細的介紹了 JS 的大部分特性，ES6部分可以參考第二個。 - “JavaScript patterns”中译本 – 《JavaScript 模式》
https://github.com/jayli/javascript-patterns
原作者是 Stoyan Stefanov，由 拔赤、goddyzhao、TooBug 翻譯。主要從 JS 的實際使用場景出發，提煉了不少可以讓前端們”偷懶”的實用招式。 - JavaScript语言精粹
https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md
作者整理了一些 JS 的精華部分來介紹為何 JS 是一門傑出的動態語言。 - Douglas Crockford’s JavaScript
https://www.crockford.com/javascript/
算作一本JS小書，主要是說明 JS 的一些特性，以及 JS 為什麼是世界上最容易被誤解的程式語言。 - 深入理解 JavaScript 系列
https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html
湯姆大叔所寫的 JS 系列文章，內容稍微進階一點，需要有一點JS基礎。 - JS Tips
https://www.jstips.co/
每天推出一個JS技巧的網站。 - JavaScript 资源大全中文版
https://github.com/jobbole/awesome-javascript-cn - ＊從ES6開始的JavaScript學習生活
https://hiskio.com/ebooks/87/lectures/2051
這是在 hiskio 的一本免費電子書，內容為 ES6，分為關於本書、介紹、工具、基礎和特性五個章節來介紹，講解的很詳細、內容很實用，非常適合初學者學習，也適合想要複習的人查補缺漏。 - ES2015+ cheatsheet
https://devhints.io/es6
一個能讓你快速概覽 ES2015、ES2016、ES2017、ES2018 及更高版本中 JavaScript 新特性的網站。 - JavaScript演算法與資料結構
https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-TW.md
Github上star數高達116k的一個JS庫，主要內容為 JavaScript 的資料結構與演算法的基礎範例，並且一直在更新。 - 你不懂JS – 第一版 中文
https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN
這是一本很有名的JS教學書籍，但是在 Github 上也有免費開源電子書。目前出到第二版，不過第二版不夠全加上沒有中文版，所以上方附上第一版中文的連結，有興趣想讀第二版可以自己修改分支。 - clean code JavaScript
https://github.com/ryanmcdermott/clean-code-javascript
教你如何寫出更好的 Javascript程式碼，提升程式碼的可讀性。 - JavaScript Stuff
https://www.javascriptstuff.com/
專注於分享 JS 與 React 相關技術文章的網站。 - Eloquent JavaScript 3RD EDITION(2018)
https://eloquentjavascript.net/
講解詳細的JS電子書，比較多篇幅在講原理與概念，對初學者來說閱讀起來可能會比較吃力，並且對英語程度要求較高。 - Speaking JavaScript
http://speakingjs.com/es5/index.html
這本電子書是針對已經學過Java,PHP,C++,Python…等主流程式語言，大致了解物件導向概念的程序員閱讀。這本電子書比較專注於JS語言本身，所以不會有Web相關(DOM、非同步)…等的內容。分為快速入門和深入了解兩部分。雖然這本電子書主要是講ES5，但講解細緻且條理分明，還是很值得一看。 - JavaScript for impatient programmers (ES2021 edition)
https://exploringjs.com/impatient-js/toc.html
可以說是最新的JS新手入門電子書，比較著重於較新的功能，並且每個章節都會提供練習測驗題來加深印象，涵蓋JS所有基本功能包括ES2021，也有比較進階的部分，適合沒有JS基礎但有其他程式語言學習經驗的人學習。 - Exploring ES6
https://exploringjs.com/es6.html
基本上涵蓋了所有 ES6 特性講解的電子書。 - must-watch-javascript
https://github.com/AllThingsSmitty/must-watch-javascript
關於 JavaScript 的必看教學影片收藏。 - ECMAScript 6 — New Features: Overview & Comparison
http://es6-features.org/
一個 ES6 與 ES5 特性比較(舉例說明)的網站。 - ＊JavaScript Essence
https://openhome.cc/Gossip/JavaScript/
內容包括 JS 核心、函式、物件、DOM以及Ajax…等。 - JavaScript 語言核心
https://openhome.cc/Gossip/CodeData/EssentialJavaScript/index.html
包含 ES5 及更早之前的 JQ 語法，比較深入了解語言的核心。 - ECMAScript Essence
https://openhome.cc/Gossip/ECMAScript/index.html
ES5 ES6的特性講解 - ＊JavaScript – The Right Way
http://jstherightway.org/zh-tw/
這是一份為 JavaScript 新手準備的指南，同時也包含了可以給老手學習的最佳範本。將一些頂尖開發者的文章、提醒及技巧收集於此。 - ＊JavaScript in Plain English
https://javascript.plainenglish.io/
每天都會分享新的 JavaScript 和 Web 開發內容，就像它的網站標題所說，文章都是全英文。 - JavaScript documentation (refrence)
https://devdocs.io/javascript/
TypeScript
- TypeScript 入門教程
https://ts.xcatliu.com/
從 JavaScript 工程師的角度總結思考，循序漸進的理解 TypeScript。 - TypeScript-for-Beginner-Programmers
https://github.com/chibicode/TypeScript-for-Beginner-Programmers
面向初學者的 TypeScript 教學 - type-challenges
https://github.com/type-challenges/type-challenges
TypeScript 的練習題目庫 - TypeScript exercises
https://github.com/typescript-exercises/typescript-exercises
讓每個人都可以使用許多不同的 TypeScript 功能，並大致了解 TypeScript 的功能和原理。 - transform
https://transform.tools/json-to-typescript
自動將 JSON 檔轉為 TypeScript 的 interface
UI 庫和設計靈感
- ＊MATERIAL-UI
https://material-ui.com/
React 的 UI 庫，是我開始學 React 時第一個接觸的 UI 庫。 - ＊Ant Design
https://ant.design/docs/react/introduce-cn
基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後台。 - Ulkit UI
https://getuikit.com/docs/introduction
UI 庫。 - Semantic UI
https://semantic-ui.com/
UI 庫。 - ＊mantine UI
https://github.com/mantinedev/mantine
一個很新的React組件庫，今年五月份才出的 1.0.0 版，目前已經更新到 2.4.1 版，star數已達到2k。所有組件自帶暗色主題，也有自己的 hooks，功能齊全，樣式也是屬於簡潔優雅的。 - evergreen UI
https://github.com/segmentio/evergreen
React UI庫。我很喜歡這個組件庫的樣式，又簡潔又優雅，個人喜歡它的 alert、toaster、popover(會隨著卷軸改變位置)、dialog，預設的就很美。 - Element UI
https://elemefe.github.io/element-react/#/zh-CN/quick-start
Vue、React、Angular 的 UI 庫。預設樣式也是屬於簡潔優雅類型的組件庫，組件內容還是挺豐富的，除了基本的之外還有自帶幻燈片、空狀態、計數器、時間選擇器、上傳、評分、穿梭框、幻燈片、時間線、日曆…等。 - Blueprint UI
https://github.com/palantir/blueprint
React UI 庫。star 數 18.1k，也是滿熱門的一個組件庫，樣式較其他組件庫來說比較具有特色，並且針對部分組件有很深入的細節功能，比如說 hotkeys、select (關聯詞、Omnibar…等封裝在一起)、date range input、time zone select - React Suite UI
https://rsuitejs.com/
React 組件UI庫，專為中台和後端產品設計，自3.0版本開始不再支援IE<=9的版本，並且React Suite主要針對電腦而不是移動裝置。支持服務器端渲染。支持Next.js構建應用程序。 - ＊colordrop
https://colordrop.io/
這個網站會將四個顏色整合在一組，點選色彩後就會跳出對應色彩值（HEX、RGB），讓你能將顏色運用到其他設計開發。 - Siteinspire
https://www.siteinspire.com/
模板樣式靈感參考網站。 - ＊Font Awesome
https://fontawesome.com/
是一個基於CSS和LESS的字體和圖標工具套件。 - ＊優設導航
https://hao.uisdc.com/
免費設計相關的資源，包括高清圖庫、介面設計、模板、字型、設計教程、靈感創意…等。 - webgradients – Itmeo
https://webgradients.com/
這個網站提供了 180 種漸變配色，可以直接複製CSS樣式或者下載成 png 檔。 - ＊Adobe Color
https://color.adobe.com/zh/create/color-wheel
這是由 Adobe 開發用來協助設計師進行配色的一個工具，主要功能有色輪配色、從圖片擷取主題色及漸層色，還有色盲衝突顏色檢測功能。 - 響應式網格設計網站
http://www.responsivegridsystem.com/
其實是一個工具網站，可以快速針對你輸入的一行中的列數及邊距為你生成網格的 HTML 和 CSS。 - ＊Dribbble
https://dribbble.com/alexplyuto/shots
找尋 UI 設計靈感的網站，包括網頁及APP UI。
CSS
- * 一文梳理CSS必会知识点
https://juejin.cn/post/6854573212337078285
用短短幾句話總結了一些 CSS 中常見的知識點。 - * 最强大的 CSS 布局 —— Grid 布局
https://juejin.cn/post/6854573220306255880
Grid 佈局即網格佈局，是一種新的 CSS 佈局模型，比較擅長將一個頁面劃分為幾個主要區域，以及定義這些區域的大小、位置、層次等關係。號稱是最強大的的 CSS 佈局方案，是目前唯一一種 CSS 二維佈局。 - * 30个你必须熟记的CSS选择器
https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize–net-16048
你學會了基本的id，class類選擇器和descendant後代選擇器，然後就覺得完事了嗎？如果這樣，你就會錯過許多靈活運用CSS的機會。雖然本文提到的許多選擇器都屬於CSS3，並且只能在現代的瀏覽器中使用，但學會這些是大有好處的。 - CSS盒模型之内边距、边框、外边距 十九问 （持续更新）
https://juejin.cn/post/6880111680153059341
本篇文章主要探討盒模型，以及內邊距、邊框、外邊距的面試題與思考 - A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS flexbox 佈局綜合指南。這份完整的指南解釋了有關 flexbox 的所有內容，重點介紹了父元素（flex 容器）和子元素（flex 項）的所有不同可能屬性。它還包括歷史、演示、模式和瀏覽器支持圖表。 - * FLEXBOX FROGGY
https://flexboxfroggy.com/
一款您可以通過編寫 CSS flex 布局代碼來幫助 Froggy 的遊戲 - * CSS Reference
https://cssreference.io/
通過圖片和動畫示例來解釋一些常用的 CSS 屬性。 - 學習CSS版面配置
https://zh-tw.learnlayout.com/
通過引導循序漸進的教你如何使用CSS進行版面配置。 - Learn to Code HTML & CSS
https://learn.shayhowe.com/html-css/
針對前端基礎 HTML 及 CSS 的教學，文字搭配示例對於前端小白更容易上手。 - CSS-Guidelines
https://github.com/doggy8088/CSS-Guidelines
撰寫可管理、可維護的 CSS 高階技巧。 - Design & Development Related Blog
https://cssauthor.com/
如網站標題所示，是一個分享設計相關的部落格，包括一些網站模板的分享和CSS的教學。 - * CSS-Tricks
https://css-tricks.com/
專門分享 CSS 相關的教學，乾貨滿滿。 - CSS可樂
http://csscoke.com/
這個網站分享了非常多的CSS技巧乾貨，你可以在這裡看到很多新穎的點子和效果，並且都有附上源碼供你學習。 - CSS 基礎進階教程彙總
https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/css3-tutorial.md - Loaders.css
https://connoratherton.com/loaders
提供了很多純 CSS 的加載動畫。 - Hint.css
https://kushagra.dev/lab/hint/
提供許多提示 CSS 動畫。 - Hover.css
http://ianlunn.github.io/Hover/
提供許多鼠標移入效果 CSS 動畫。 - ＊You-need-to-know-css
https://github.com/l-hammer/You-need-to-know-css
Web 開發者需要知道的 CSS 技巧 - ＊TailwindCSS
https://tailwindcss.com/
近幾年越來越流行的 CSS 框架，自定義樣式彈性大。 - ＊MasterCSS
https://www.facebook.com/mastercorg/posts/124741430132010/
全球第一個 Virtual CSS 框架，MIT 台灣人開發，解決了很多市面上流行的 CSS 框架痛點。 - Tailwindhelper
https://www.tailwindhelper.com/?ref=producthunt
一個 tailwind 單位換算工具
jQuery
- jQuery API 字典
https://oscarotero.com/jquery/?fbclid=IwAR0oM6J0iSWfhTjfhpGIVmV90sxFaM2W9o63nhEazvZvw56x3D68M2J2yio
jQuery 線上快速 API 參考網站，你可以在這邊找到所有 jQuery 的 API。若 API 被已在新版被移除會用刪除號標示。 - 男丁格爾的 jQuery 教學
http://abgne.tw/jquery-apply-list?fbclid=IwAR1qLjpG5s0v8A-Qodlvx5ln6-aMYu1GTC7e3-IWmxkcVH0xzWkzsUOh-3Y
一些比較早期的 jQuery 教學文章，作為初學者可以參考一下。
React
- ＊React.js 小書
https://hyf.js.org/react-naive-book/
這本書適合有一點前端基礎但對 React 零基礎的人學習，可以快速掌握 React.js 並且應用到實際項目中。學完這本書中可以實作出一個評論系統。 - ＊尚硅谷2021版React技术全家桶（零基础入门到精通）
https://www.bilibili.com/video/BV1wy4y1D7JT
非常推薦給零基礎的人學習，這套影片是尚硅谷的名講師錄的，基本上是手把手教，對於有點基礎或者學習過其他前端框架的人來說可能會嫌說得太仔細太慢，可以調倍速觀看。 - React技术揭秘
https://react.iamkasong.com/
嚴謹易懂的 React 源碼分析教程。 - ＊從 Hooks 開始，讓你的網頁 React 起來
https://ithelp.ithome.com.tw/users/20103315/ironman/2668
這是 pjchender 19年在 iT邦參加的鐵人賽，可以從中學如何使用 React Hooks 以及做一些簡單的實戰項目。 - React 模式
https://sangka.github.io/react-in-patterns-cn/
本書的目標讀者是對 React 是什麼以及如何使用 React 有基礎了解的開發者。本書並不是完整的 React 使用指南，而是對 React 流行的概念及設計模式的介紹。這些範式或多或少都是由開源社區所引入的，其主要目的在於引導你的抽象思維。 - React.js cheatsheet
https://devhints.io/react
一個很棒的 React 備忘清單網站，可以讓你快速瀏覽版本React v15 到 v16的一些新特性。這個網站不僅有 React，還有其他程式語言。 - 30 seconds of React
https://github.com/30-seconds/30-seconds-of-react
一些 React 開發時會用到的簡短的程式碼整理。 - Examples of large production-grade, open-source React apps (大型生產級開源 React 應用範例)
https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps
包含 Jira、RealWorld、Real World App、HospitalRun、Simorgh、AST Explorer、Excalidraw、Spectrum、Sentry、Grafana、GoAlert 的源碼。 - ＊React 核心知识点 — Virtual Dom 与 Diff
https://github.com/pfan123/Articles/issues/62
React 最值得稱道部分就是 Virtual DOM 和 Diff ，這兩塊核心點方便我們更好的抽象化的開發組件，提高渲染效率。 - How Virtual-DOM and diffing works in React
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
介紹 Virtual DOM 和 Diff 的運作及例子 - 彻底理解 React hook useCallback和useMemo的区别
https://juejin.cn/post/6844904032113278990
釐清兩個 API 之間的區別以及使用場景 - ＊React hooks 最佳实践【更新中】
https://mp.weixin.qq.com/s/0sykIHDM_Ih3W3md-DwFkw
hooks 將一個生命週期鉤子的集合變成了一個從頭到尾即插即用的模式，從某種意義上來說，我們的組件設計更加靈活了。 - ＊React 性能优化 | 包括原理、技巧、Demo、工具使用
https://juejin.cn/post/6935584878071119885
本文分為三部分，首先介紹 React 的工作流，讓讀者對 React 組件更新流程有宏觀的認識。然後列出筆者總結的一系列優化技巧，並為稍複雜的優化技巧準備了 CodeSandbox 源碼，以便讀者實操體驗。最後分享筆者使用 React Profiler 的一點心得，幫助讀者更快定位性能瓶頸。 - ＊react-philosophies
https://github.com/mithi/react-philosophies
React當我寫代碼時我會想到的事情、每當我審查別人的代碼或我自己的代碼時，我都會在腦海中浮現、只是指導方針而不是嚴格的規則。 - 關於React，那些我不知道的
https://ithelp.ithome.com.tw/users/20130721/ironman/3820
一些少用的 hooks、狀態管理和 Event handler 的介紹
Vue
- 前端路由简介以及vue-router实现原理
https://zhuanlan.zhihu.com/p/37730038
這篇文章詳細的介紹了路由的模式和在 Vue 中管理路由的方法，基本上適用於全部前端框架。 - ＊awesome-vue
https://github.com/vuejs/awesome-vue
🎉與 Vue.js 相關的精選文章、第三方庫、項目、開發工具…等。 - Vue 實作模式 (vue-patterns) 中文版
https://github.com/yoyoys/vue-patterns-cht
集結了許多有用的 Vue 實作模式、技術、技巧、以及有幫助的參考連結。 - Vue.js 技术揭秘
https://github.com/ustbhuangyi/vue-analysis
這本電子書的目標是全方位細緻深度解析 Vue.js 的實現原理，讓同學們可以徹底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0。
Git
- 如何规范你的Git commit？
https://zhuanlan.zhihu.com/p/182553920
commit message應該如何寫才更清晰明了？團隊開發中有沒有遇到過讓人頭疼的git commit？本文分享在git commit規范建設上的實踐，規定了commit message的格式，並通過webhook在提交時進行監控，避免不規範的代碼提交。 - Learn Git Branching
https://learngitbranching.js.org/?demo=&locale=zh_TW
是一個用於學習 git 指令的挑戰小遊戲。
Mock
- mockapi
https://mockapi.io/
簡單模擬 API 和生成自定義數據(RESTful API)，且可以進行CRUD。 - ＊apiary
https://apiary.io/
類似 Swagger 的 API Design Stack，可以製作 API 文檔以及自動產生 mock server 提供測試。
圖片資源
- ＊Removebg
https://www.remove.bg/zh
這個應該大家都知道，最有名氣的線上自動圖片摳圖網站。 - ＊Favicon
https://www.ifreesite.com/favicon/
最有名氣的網站 favicon 線上生成器。 - Diverse UI
https://diverseui.com/
如果你的 project UI設計時需要用到用戶頭像或者顯示用戶頭像的版面，可以使用這個網站，它提供一組免費的用戶頭像，可用於個人或商業項目。 - Httpster
https://httpster.net/2021/oct/
是一個靈感資源網站，展示了來自世界各地的人們製作的完全震撼的網站。 - ＊優設導航
https://hao.uisdc.com/
設計師網址導航，有免費高清圖庫、設計教程、介面設計、靈感創意、設計工具…等資源。 - ＊Unsplash
https://unsplash.com/
免費無版權圖庫，圖片資源多、類型廣，並且有提供非常健全的 API 服務，對開發者來說是很棒的圖片利器。Unsplash 也有針對 Chrome 瀏覽器、iOS、Apple TV、WordPress、Figma…等提供官方的應用程序使用。 - PxHere
https://pxhere.com/
世界著名的免費攝影圖庫，網站中的所有圖片皆為免費、無版權，可用於商業用途。有提供各種尺寸的圖片下載，包括安卓和蘋果的解析度，以及提供 html 直接嵌入網站中使用。 - 阿里巴巴矢量圖標庫
https://www.iconfont.cn/
阿里巴巴旗下的圖標庫網站，搜索關鍵字可以找到大量的圖標使用，免費的居多。 - ＊Noun Project
https://thenounproject.com/
這個網站提供大量免費的 icon 和圖片，icon 都很精美，我網站的 favicon 也是在這裡下載的。 - ＊tabler icons
https://tabler-icons.io/
超過 1250 個免費和開源圖標網站。支援 SVG、PNG 下載，提供 SVG、JSX、Data URI、React、Webfont、SCSS 引入。可自選尺寸16px~40px及邊框寬度 1~2。圖示的質量還是滿高的，簡潔大氣還免費，不會要求你註冊網站才能下載。
在線開發
- ＊jsfiddle
https://jsfiddle.net/
HTML、JS、CSS 線上編譯器，有提供 jQuery、Vue、React、Bootstrap、SCSS、CoffeeScript、Preact、TypeScript…等模板。 - CodePen
https://codepen.io/your-work
是一個在線社區，用於測試和展示用戶創建的HTML，CSS和JavaScript代碼段。 - ＊CodeSandBox
https://codesandbox.io/?from-app=1
和 CodePen 一樣，可以在線開發程序，並且在 sandbox 與人共同協作。 - ＊StackBlitz
https://stackblitz.com/ - Replit
https://replit.com/ - ＊codeshare
https://codeshare.io/
與開發人員實時共享程式碼，用於面試、故障排除、教學等的在線程式碼編輯器。 - CodeCollab
https://codecollab.io/
CodeCollab是一個在線實時協作程式碼編輯器和編譯器。 - Gitpod
https://www.gitpod.io/
線上 IDE，可連結 gitlab , github, bitbucket, 可模擬VSCode , IDEA, GoLand, PyCharm IDE。
UI設計工具
- ＊Figma
https://www.figma.com/
用於團隊協作UI開發的在線工具，適用於多平台，是這幾年異軍突起的 UI 設計工具。比較知名的 UI 設計工具還有 Sketch 和 Adobe XD…等，但個人認為 Figma 的功能和易上手程度還是優於這兩個，所以不在這裡推薦。 - Mastergo
https://mastergo.com/
團隊協作開發 UI/UX 設計工具，與 figma 相比多了自帶的素材資源庫(免費無版權)、在線評論、校對…等功能，並且是語系是中文，能更快的上手。
瀏覽器
- ＊深入了解現代網絡瀏覽器
https://developer.chrome.com/blog/inside-browser-part1/
從 CPU、GPU、內存和多線程架構這 4 部分深入了解 Chrome 瀏覽器，從高級架構到渲染管道的細節。 - ＊瀏覽器的工作原理
https://web.dev/howbrowserswork/
了解現代瀏覽器內部操作的內容。 - What happens when…
https://github.com/alex/what-happens-when
嘗試回答面試問題，例如：“當您在瀏覽器中輸入 google.com 並按 Enter 時會發生什麼？” - 从输入 URL 到页面加载完成的过程中都发生了什么事情？
https://fex.baidu.com/blog/2014/05/what-happen/
開發規範
- 凹凸實驗室 – 前端代碼規範
https://guide.aotu.io/
內容包括：HTML、CSS、JS、React、圖片、命名規範。 - JSON风格指南
https://github.com/darcyliu/google-styleguide/blob/master/JSONStyleGuide.md
該風格指南是對在Google創建JSON APIs而提供的指導性準則和建議。總體來講，JSON APIs應遵循JSON.org上的規範。這份風格指南澄清和標準化了特定情況，從而使Google的JSON APIs有一種標準的外觀和感覺。這些指南適用於基於RPC和基於REST風格的API的JSON請求和響應。 - JSON Schema 規範
http://json-schema.org/understanding-json-schema/
JSON Schema 是用於驗證 JSON 數據結構的工具。主要是基於 JSON Schema Draft 7。 - 前端開發規範手冊
https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/27-front-end-style-guide
內容包括HTML、CSS、JS及移動端優化…等。 - CSS 2.2 規範
https://www.w3.org/TR/CSS22/ - HTML 規範
https://html.spec.whatwg.org/
性能優化與安全
- ＊前端性能优化之旅
https://github.com/alienzhou/fe-performance-journey
性能優化一直以來都是前端工程領域中的一個重要部分。很多資料表明，網站應用的性能（加載速度、交互流暢度）優化對於提高用戶留存、轉化率等都有積極影響。可以理解為，提升你的網站性能，就是提升你的業務數據（甚至是業務收入）。 - ＊Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word)
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/ - ＊还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下
https://juejin.cn/post/6850037270729359367
性能優化相關的文章其實網上挺多，但是大部分都是在講如何優化性能，也就是講方法論。但是在實際工作中，如何量化性能優化也是相當重要的一環。本文會介紹谷歌提倡的七個用戶體驗指標（也可以認為是性能指標）。 - 做性能优化时，我们关注哪些指标？
https://mp.weixin.qq.com/s/SlS0J9eSb20PCLW062sQVg - 一文读懂 Web 安全
https://segmentfault.com/a/1190000023396707
Web 安全是互聯網中不可或缺的一個領域，這個領域中誕生了大量的黑帽子與白帽子，他們都是安全領域的王者，在平時裡，他們利用各種巧妙的技術互相博弈，時不時就會掀起一場 Web 安全浪潮，真可謂神仙打架，各顯神通。 - 如何进行 web 性能监控？
http://www.alloyteam.com/2020/01/14184/
我們希望通過監控來知道 web 應用性能的現狀和趨勢，找到 web 應用的瓶頸？某次發布後的性能情況怎麼樣？是否發布後對性能有影響？感知到業務出錯的概率？業務的穩定性怎麼樣？
面試題目
- 前端開發筆試面試知識整理
https://github.com/paddingme/Front-end-Web-Development-Interview-Question
有非常多的題目，目錄也整理的很乾淨直白。 - 從面試到終面 全面為您保駕護航 – 前端樂園
https://github.com/abc-club/js-paradise/blob/master/INTERVIEWMOCK.md - ＊web前端面试 – 面试官系列
https://vue3js.cn/interview/
是JS每日一題群維護的前端面試題庫，包含不限於Vue面試題，React面試題，JS面試題，HTTP面試題，工程化面試題，CSS面試題，算法面試題，大廠面試題，高頻面試題
其他資源
- 前端開發知識架構
https://github.com/JacksonTian/fks - ＊Caniuse
https://caniuse.com/
用於查看瀏覽器對各種新特性的兼容情況。 - OverAPI
https://overapi.com/
蒐集了眾多程式語言的API在線搜索手冊。 - ＊Carbon
https://carbon.now.sh/
很漂亮的程式碼片段高亮截圖工具。 - Web前端導航
http://www.alloyteam.com/nav/ - 前端学习路径
https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/26-front-end-learning-path - MapLibre
https://maplibre.org/
Web 和移動應用程序可用的開源可交互式地圖庫集合。 - CODELF
https://unbug.github.io/codelf/
變數取名神器，輸入中文自動幫你取幾個可用作變數的英文名，要注意的是這個網站只支援簡體中文不支援繁體。 - 印記中文
https://docschina.org/
中國Web開發人員導航。 - ＊Can include
https://caninclude.glitch.me/
根據 WHATWG HTML 規範替你判定該標籤是否可以包含在另一個標籤中，比如 a 可不可以包含在 div 標籤中，並且會列出所有瀏覽器的支援情況。 - ＊Down for Everyone or Just Me
https://downforeveryoneorjustme.com/
當你連不上某個網站的時候可能會懷疑要不是網站連結掛了，要不是網站伺服器掛了，再不然就是自己網路的問題，這個網站可以幫助你得知查詢的網站目前是否正常運行中，告訴你究竟是你自己的問題還是網站的問題。 - ＊Git 教學
https://zlargon.gitbooks.io/git-tutorial/content/
從 0 到 1 學習 Git，無論你是前端後端，只要需要與團隊協作開發都必須知道如何玩轉 Git。 - 亂數假文產生器
http://www.richyli.com/tool/loremipsum/
產生沒有意義的文字組合，供排版時填充版面用。 - Lorem Ipsum(英文假文產生器)
https://www.lipsum.com/
同上，只不過是英文文章。 - HTML reference
https://htmlreference.io/
免費的 HTML 指南，會列出所有HTML元素和屬性。 - CSS reference
https://cssreference.io/
免費的 CSS 指南，會列出流行的屬性，並通過插圖和動畫的方式來示範。 - Best-websites-a-programmer-should-visit
https://github.com/sdmg15/Best-websites-a-programmer-should-visit
一些對程序員有用的網站。 - thiscodeWorks
https://www.thiscodeworks.com/
保存程式碼片段到雲端、瀏覽器、VS Code 中以便之後獲取。
持續更新中…
![未命名 [轉譯] 2021 年最新前端開發者路線圖](https://namepluto.com/wp-content/uploads/2021/08/%E6%9C%AA%E5%91%BD%E5%90%8D-150x150.png "[轉譯] 2021 年最新前端開發者路線圖 未命名")
