一、團隊組織
| 網站 | 說明 |
|---|---|
| 騰訊 AlloyTeam 團隊 | 騰訊Web前端團隊，代表作品WebQQ，致力於前端技術的研究 |
| ISUX | 騰訊社交使用者體驗設計，簡稱ISUX，騰訊設計團隊網站 |
| CDC | 騰訊使用者研究與體驗設計部 |
| FEX | 百度Web前端研發部出品 |
| 淘寶前端團隊（FED） | 用技術為體驗提供無限可能 |
| 凹凸實驗室 | 京東使用者體驗設計部出品 |
| 奇舞團 | 奇虎360旗下前端開發團隊出品 |
| 阿里巴巴國際UED團隊 | 在更新的螢幕裡創造出更好的產品和更優的體驗 |
| EFE | 由百度多個遵循統一技術體系的前端團隊所組成 |
| UXC | 覆蓋了百度85%以上的產品體驗設計 |
二、開發社群
| 網站 | 說明 |
|---|---|
| StackOverflow | 加入世界上最大的開發者社群 |
| SegmentFault | 中文領域最大的技術問答交流社群平臺 |
| 知乎 | 中文網際網路最大的知識分享和社交平臺 |
| 開源中國 | 目前國內最大的開源技術社群 |
| w3ctech | 中國最大的前端技術社群 |
| 掘金 | 一個幫助開發者成長的社群 |
| V2EX | 創意工作者們的社群 |
| 部落格園 | 一個面向開發者的知識分享社群 |
| CNode | 國內最大最具影響力的 Node.js 開源技術社群 |
| Ruby China | 由眾多愛好者共同維護的 Ruby 中文社群 |
三、前端門戶
| 網站 | 說明 |
|---|---|
| 前端網 | 一個專注於Web前端開發行業的綜合性入口網站 |
| 大前端 | 一個集前端開發和Wordpress內容為一體的雙軌獨立網站 |
四、前端大牛
| 網站 | 說明 |
|---|---|
| AlloyTeam | 騰訊Web前端團隊 |
| taobaofed | 淘寶前端團隊（FED） |
| alinode團隊部落格 | 基於 Node 執行時的應用效能管理解決方案 |
| 鑫空間-鑫生活 | 張鑫旭,上海閱文資訊科技有限公司使用者體驗設計師 |
| 廖雪峰的官方網站 | 廖雪峰，著有《Spring 2.0核心技術與最佳實踐》一書。 |
| 阮一峰的個人網站 | 阮一峰,2014年出版《ECMAScript 6入門》 |
| JavaScript 祕密花園 | 三生石上 |
| 囧克斯 | 勾三股四 |
| w3cplus | 大漠，就職淘寶，CSS3、CSS處理器和Drupal中國佈道者。2014年出版《圖解CSS3：核心技術與案例實戰》。 |
| 酷 殼 – COOLSHELL | 陳皓，就職經歷Amazon中國任研發經理；阿里北京研發中心、商家業務部資深專家；阿里核心系統和阿里雲ECS相關的虛擬化平臺的開發工作。 |
| html5ify | 樸靈，阿里資料產品部資深工程師。致力前端、資料視覺化、Node等領域 |
| Ruby`s Louvre | 鍾欽成,網名司徒正美,著名的JavaScript專家,去哪兒網前端架構師 |
| CSS森林 | GhostZhang,微信支付設計中心，負責重構前端團隊的管理工作。 |
| 99css | ytzong,就職經歷139 郵箱前端工程師；騰訊 ISUX 前端工程師； iOS 獨立開發者 |
| [米隨隨] s5s5 | 劉小超，現在就職於 Tencent ISUX ，崗位 UI Engineer，主要從事UI開發方面工作。 |
| 小鬍子哥的個人網站 | Barret李靖，阿里巴巴職員 |
| Jerry Qu | 屈光宇，奇虎 360，前端開發 |
| EVILCOS | 餘弦，知道創宇 |
| WEB前端開發 | 愚人碼頭，內容涵蓋Web前端開發原創教程、技術中文文件、前端工具、資源分享、疑難解答、最新技術、招聘資訊等 |
| 伯樂線上 | 黃餘糧，黃利民 |
| Aimingoo`s Blog | 周愛民，一名程式設計師、架構師，就職物聯網公司（ruff.io） |
| justjavac(迷渡) | justjavac，天津維基科技有限公司研發工程師 |
| Be For Web | C7210，互動設計師、UX熱愛者、譯者 |
| Alon`s Blog | Alon Zhang，網際網路資訊博主 |
| I`m qiqiboy! | qiqiboy，wordpress開發、web前端 |
五、活躍微博
| 網站 | 說明 |
|---|---|
| 掘金技術社群 | 挖掘最優質的網際網路技術 |
| w3c中國 | 全球資訊網聯盟中國辦事處官方微博 |
六、書籍推薦
| 書籍 | 作者 | 譯者 |
|---|---|---|
| 《Web標準設計》 | 劉傑（嗷嗷） | |
| 《大巧不工 Web前端設計修煉之道》 | 賴定清 / 林堅 | |
| 《高效能網站建設指南 前端工程師技能精髓》 | Steve Souders | 劉彥博 |
| 《高效能網站建設進階指南 Web開發者效能優化最佳實踐》 | Steve Souders | 口碑網前端團隊 |
| 《Web站點優化》 | 金 | |
| 《Node.js開發指南》 | 郭家寶（BYVoid） | |
| 《JavaScript高階程式設計（第3版）》 | [美] 尼古拉斯·澤卡斯 | 李鬆峰 / 曹力 |
| 《JavaScript權威指南》 | 弗拉納根 | 李強 |
| 《JavaScript語言精粹》 | Douglas Crockford | 趙澤欣/ 鄢學鵾 |
| 《深入淺出Node.js》 | 樸靈 | |
| 《CSS開發王》 | 張亞飛 | |
| 《JavaScript DOM程式設計藝術 （第2版）》 | [英] Jeremy Keith / [加] Jeffrey Sambells | 楊濤 / 王建橋 / 楊曉雲 等 |
七、前端教程
| 網站 | 說明 |
|---|---|
| W3C中國 | Web技術領域最具權威和影響力的國際中立性技術標準機構 |
| MDN Web 文件 | 學習 Web 開發的最佳實踐 |
| w3cschool | 學程式設計，從w3cschool開始 |
| Microsoft Web 開發 | Developer Network |
八、HTML(5)
| 網站 | 說明 |
|---|---|
| HTML(超文字標記語言)MDN | MDN Web 文件 |
| 後HTML5時代Ⅰ | TGideas 萬技師 |
| 後HTML5時代Ⅱ | TGideas 鬼爪手 |
| HTML5 進階系列 | 愛前端 林鑫 |
| 匠心打造canvas簽名元件 | 翟燦東，網名路易斯，平安健康前端工程師。 |
| HTML5 有哪些讓你驚豔的 demo？ | 知乎 關注者 8K |
| 一隻會飛的魚 | 每週一點canvas動畫 |
九、CSS(3)
| 網站 | 說明 |
|---|---|
| CSS Reference | 從基礎知識中學習CSS的所有重要屬性 |
| You Don`t Know CSS | 楊健 |
| 強大的css3 | Wayne Zhu |
| 深入瞭解 CSS3 新特性 | 周 翔 |
| Flex 佈局教程：語法篇 | 阮一峰 |
| Flex 佈局教程：例項篇 | 阮一峰 |
| 如何編寫輕量級 CSS 框架 | 敘帝利 |
| CSS 專業技巧 | 一個幫你提升 CSS 技巧的收藏集 |
| CSS3技術-雪碧圖自適應縮放與精靈動畫方案 | 慕課網 艾倫 Aaron |
| 搞定這些疑難雜症，向css3動畫說yes | IMWeb 結一 |
| Effective前端1：能使用html/css解決的問題就不要使用JS | 會程式設計的銀豬 |
| 前端如何呼風喚雨 | IMWeb coverguo |
| 預設的checkbox、input、radio太醜了？我來教你改變使用純css3改寫的帶動畫的預設樣式 | 掘金 sunshine小小倩 |
| CSS效能分析，如何優化CSS提高效能 | 部落格園 樓蘭小騎士 |
| CSS 黑魔法小技巧，讓你少寫不必要的JS，程式碼更優雅 | 思否 微醺歲月 |
| CSS-Tricks | The Shapes of CSS |
十、ECMAScript
| 網站 | 說明 |
|---|---|
| Understanding ECMAScript 6 | Nicholas C. Zakas |
| 探索 ES6 | 翻譯自《 Exploring ES6 》 |
| ECMAScript 6 入門 | 阮一峰 |
| ES5合集 | 顏海鏡 |
| ES6 你可能不知道的事 – 基礎篇 | 化辰，淘寶前端團隊（FED） |
| ES6 你可能不知道的事 – 進階篇 | 化辰，淘寶前端團隊（FED） |
十一、JavaScript
| 網站 | 說明 |
|---|---|
| JavaScript 標準參考教程（alpha） | 阮一峰 |
| JavaScript 祕密花園 | 三生石上 中文翻譯 |
| JavaScript Promise迷你書（中文版） | 原著：azu / 翻譯：liubin、kaku、honnkyou |
| JS 函數語言程式設計指南 | Linghao Li |
| JavaScript 闖關記 | stone0090 |
十二、jQuery
| 網站 | 說明 |
|---|---|
| 學習jQuery | Learning Center |
| jQuery API 中文文件 | 官方 |
| jQuery API中文文件 | 愚人碼頭 |
| jQuery UI API中文文件 | 愚人碼頭 |
| jQuery中文手冊 | hemin |
| YOU MIGHT NOT NEED JQUERY | 你可能不需要JQUERY |
十三、Vue.js
| 網站 | 說明 |
|---|---|
| Vue.js | 官方網站 |
| vuejs | 官方倉庫 |
| Vue 專業中文社群 | 全球最大的 Vueframework 中文開源技術社群 |
| vuefe.cn | Vue.js 中文文件 |
| Vue Forum | Vue 論壇 |
| Vue Land | Vue 聊天室 |
| vue-devtools | 用於除錯Vue.js應用程式的瀏覽器devtools擴充套件 |
| Vue Loader | 一個 webpack 的 loader |
| vue-router | 官方路由 |
| Vuex | 狀態管理模式 |
| Vue 服務端渲染 | Vue.js 伺服器端渲染指南 |
| Vue package | Find the best packages for your Vue app! |
| awesome-vue | Awesome Vue.js |
| Element | 一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫 |
| iView | 一套基於 Vue.js 的高質量 UI 元件庫 |
| Vue + webpack 專案實踐 | 勾三股四 |
| vue 效能優化 | 島書,Coffcer |
十四、AngularJS
| 網站 | 說明 |
|---|---|
| Angular 中文版 | 官方網站 |
| AngularJS入門教程 | 嚴清 , 李詩劍 (譯者) |
| AngularJS線上教程 | 喬樂共享 |
| AngularJS學習筆記 | 鄒業盛 |
| Angularlearning | Angular.js 的一些學習資源 |
| UI Bootstrap | Bootstrap components written in pureAngularJSby theAngularUI Team |
| AngularStrap | AngularJS 1.2+ native directives for Bootstrap 3 |
| AngularLearning | dolymood |
十五、React
| 網站 | 說明 |
|---|---|
| React | 官方網站 |
| React 中文索引 | Made by 題葉 & Feifei Hang |
| React China | React 中文的論壇 |
| React 入門例項教程 | 阮一峰 |
| React Router 使用教程 | 阮一峰 |
| React Native 中文版 | 極客學院 |
| React.JS教程 | PHPERZ |
| React.js 2016 最佳實踐 | 騰訊全端 AlloyTeam 團隊 Blog |
| React 導讀 | 小擼,國雙科技 |
| Redux 中文文件 | 收到 Redux 作者 Dan 的多次點贊 |
| React Router 中文文件 | 官方文件中文翻譯 |
| React 介紹及實踐教程 | 董越 和 徐新茹 |
| React 設計思想 | React 核心開發者、有 React API 終結者之稱的 Sebastian Markbåge 撰寫 |
| React Webpack 小書 | 作者 Christian Alfoni and Juho Vepsäläinen 中文譯者 Fakefish |
| Material-UI | React 前端 UI 庫 |
| Amaze UI React | 基於 React.js 開發的 Web 元件庫 |
| dva | 基於 redux、redux-saga 和 react-router 的輕量級前端框架 |
| Ant Motion | 能夠快速在 React 框架中使用動畫 |
十六、Node.js
| 網站 | 說明 |
|---|---|
| NODESCHOOL | 教你 Web 開發技能的開源課程，自學或者參加一個附近的教學活動 |
| Node入門 | 作者： Manuel Kiessling 翻譯： goddyzhao & GrayZhang & MondayChen |
| 七天學會NodeJS | Alibaba.com |
| Node.js 包教不包會 | alsotang |
| 從零開始nodejs系列文章 | 粉絲日誌 |
| NodeJS的程式碼除錯和效能調優 | 小鬍子哥 |
| Express | 基於 Node.js 平臺，快速、開放、極簡的 web 開發框架 |
| Express框架 | 阮一峰 |
| Koa 框架 | 阮一峰 |
| Koa | Koajs 中文文件 |
十七、RequireJS
| 網站 | 說明 |
|---|---|
| Javascript模組化程式設計 | 阮一峰 |
| RequireJS學習 | 葉小釵 |
| RequireJS入門 | Snandy |
| RequireJS 入門指南 | 參與翻譯 NCThinker, 姜鵬飛, super0555 |
十八、Sass和Less
| 網站 | 說明 |
|---|---|
| Sass中文網 | 世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言 |
| SASS中文文件 | Sass 是成熟、穩定、強大的 CSS 擴充套件語言 |
| SASS用法指南 | 阮一峰 |
| Sass入門 | 大漠 |
| Less中文文件 | 給 CSS 加點料 |
十九、Webpack
| 網站 | 說明 |
|---|---|
| webpack | 官方網站 |
| webpack 中文 | 中文官網 |
| webpack | github |
| webpack-demos | 阮一峰 |
二十、Markdown
| 網站 | 說明 |
|---|---|
| Markdown 語法說明 (簡體中文版) | riku |
| Markdown 入門參考 | LearnShare |
| GitBook | 幫助團隊線上撰寫，協作和釋出內容 |
| Cmd Markdown | Cmd Markdown 編輯閱讀器 |
| StackEdit | 瀏覽器中的Markdown編輯器 |
| Mditor | 一款輕量級的markdown編輯器 |
二十一、Git和GitHub
| 網站 | 說明 |
|---|---|
| Git-Book | 官方文件 |
| git – 簡明指南 | 羅傑·杜德勒 |
| 猴子都能懂得GIT入門 | backlog |
| 廖雪峰的官方網站 Git教程 | 廖雪峰 |
| Learn Git Branching | 通過一系列刺激的關卡挑戰，逐步深入的學習 Git 的強大功能 |
| Git工作流指南 | 李鼎(哲良),taobao |
| 有關 git 的學習資料 | xirong,alibaba |
| GitHub 漫遊指南 | Phodal Huang,黃峰達,ThoughtWorks 高階諮詢師 |
| GitHub祕籍 | Star 24.8k Fork 3.8k |
二十二、Github大牛
| 網站 | 說明 |
|---|---|
| AlloyTeam | 騰訊 AlloyTeam |
| fex-team | Baidu FEX team |
| tmallfe | 天貓前端團隊 |
| nzakas | 尼古拉斯·澤卡斯 Nicholas C. Zakas，雅虎首頁的前端技術主管， YUI 庫的貢獻者，目前在 Box 公司任職 |
| tj | TJ Holowaychuk，Koa、Co、Express、jade、mocha、node-canvas、commander.js等知名開源專案的建立和貢獻者 |
| JacksonTian | 樸靈(田永強)，就職阿里巴巴資料平臺，Node.js佈道者 |
| lifesinger | 玉伯，支付寶前端，seajs作者 |
| jobbole | 伯樂線上 |
| paulirish | Google Chrome |
| kejun | Douban Inc |
| fengmk2 | fengmk2，Alipay |
| fool2fish | Zhouxuan Yang，Alipay |
| jayli | Taobao |
二十三、框架類庫
| 網站 | 說明 |
|---|---|
| WeUI | 微信官方設計團隊為微信 Web 開發量身設計 |
| ZUI | 一個基於 Bootstrap 深度定製開源前端實踐方案，幫助你快速構建現代跨屏應用。 |
| MZUI | 為移動端設計，基於 Flex 的 UI 框架 |
| SUI Mobile | 阿里他她，一套基於 Framework7 開發的UI庫 |
| KISSY | 一款跨終端、模組化、高效能、使用簡單的 JavaScript 框架 |
| nice validator | 領先的表單驗證解決方案 |
| Underscore.js | 一整套函數語言程式設計的實用功能 |
| Lodash | 通過解決陣列，數字，物件，字串等問題，讓JavaScript變得更輕鬆。 |
| Metro UI CSS | 一個 BizSpark Startup |
| Kite CSS | 一個靈活的佈局助手 |
| Creative Link Effects | 創意連結或選單項效果 |
| JAVASCRIPTING | 最優的javascript庫、框架和外掛。 |
| Microjs | 神奇的微型框架 |
二十四、動畫
| 網站 | 說明 |
|---|---|
| Animate.css | 一個跨瀏覽器的CSS動畫庫 |
| Bounce.js | 觸控庫 CSS3關鍵幀動畫 |
| Waves.js | 點選按鈕或背景動畫 |
| 緩動函式 | 指定動畫效果在執行時的速度，使其看起來更加真實 |
二十五、移動端
| 網站 | 說明 |
|---|---|
| 騰訊移動Web前端知識庫 | Mars – mobile needs a hero |
| Mobi Tips | TGideas |
| mobileTech | jtyjty99999-Alibaba，收集移動端開發所需要的一些資源與小技巧 |
| 無線Web開發經驗談 | 支付寶 |
| Mobile Web Favorites | hoosin |
| 移動web資源整理 | 白樹，就職微信支付，負責移動端產品，擅長小程式、H5前端開發 |
| Zepto.js API 中文版 | 愚人碼頭,一些可選功能是專門針對移動端瀏覽器的 |
| Framework7 | 阿里他她，特色的HTML框架 可以建立精美的iOS應用 |
| SUI Mobile | 阿里他她，一套基於 Framework7 開發的UI庫 |
| Swiper | 開源、免費、強大的移動端觸控滑動外掛 |
二十六、開發平臺
| 網站 | 簡介 |
|---|---|
| JSFiddle | 一款線上的程式碼編輯器,通過流行的JS框架建立自定義的環境,以簡化JS程式碼 |
| JSBin | Collaborative JavaScript Debugging |
| BabelJS | 一個 JavaScript 編譯器 |
| RunJS | 線上編輯、展示、分享、交流你的 JavaScript 程式碼 |
| JSDM | 一個WEB前端線上編輯器，可同時編輯HTML、CSS、JAVASCRIPT程式碼，並即時預覽！ |
| CodePen | 面向前端設計人員和開發人員的社交開發環境 |
| IDeone | 一個線上編譯器和除錯工具，它允許您編譯原始碼並線上執行超過60種程式語言 |
| HCODE | 一個線上程式碼測試、託管、分享的工具，方便與別人一起除錯、分享程式碼，具有程式碼高亮、一鍵程式碼格式化、貼心的快捷鍵等功能。 |
| Thimble | 一個線上程式碼編輯器，用它可以很輕鬆地建立和釋出一個您自己的網頁，一切伴隨著 HTML、CSS 和 JavaScript。 |
二十七、線上工具
| 網站 | 簡介 |
|---|---|
| CanIUse | 檢視瀏覽器版本對HTML5和CSS3的支援情況 |
| ECMAScript 6 compatibility table | ECMAScript 6相容性表 |
| CSS Validation Service | W3C CSS 驗證服務 |
| BROWSERHACKS | browser specific CSS and JavaScript hacks |
二十八、正規表示式
| 網站 | 簡介 |
|---|---|
| 正規表示式 MDN | MDN Web 文件 |
| RegExp物件 | 阮一峰 |
| 正則的擴充套件 | 阮一峰 |
| 進階正規表示式 | 小鬍子哥 ( Barret Lee ) |
| 正規表示式30分鐘入門教程 | deerchao |
| 正規表示式前端使用手冊 | 路易斯 |
| JS正規表示式元字元 | 思否 小弟調調 |
二十九、CDN
| 網站 | 簡介 |
|---|---|
| 百度靜態資源公共庫 | 穩定，快速，全面，開源的國內CDN加速服務。 |
| 360網站衛士常用前端公共庫CDN服務 | 常用前端公共庫以及和諧使用Google公共庫&字型庫的呼叫方法 |
| 前端庫CDN服務 | 微信，主要包括一些常用的 JS 庫，CSS庫，甚至是SWF檔案。 |
| BootCDN | Bootstrap 中文網支援並維護的前端開源專案免費 CDN 服務 |
| TAONPM | 淘寶 NPM 映象,可以用此代替官方版本(只讀) |
| Staticfile CDN | 免費、快速、開放的 CDN 服務 |
| jQuery CDN | 最新的穩定版本 |
三十、API
| 網站 | 簡介 |
|---|---|
| OverAPI.com | Collecting All Cheat Sheets |
| 常用API文件索引 | 開源中國社群 線上API文件 |
閱讀更多
本文在GitHub的地址GitHub Front-end-resources