前端教程 & 開發模塊化 / 規范化 / 工程化 / 優化 & 工具 / 調試 & 值得關注的博客 / Git & 面試...

本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方.

有好友反應和斧正，會及時更新，平時業務工作時也會不定期更新...

內容精簡

資源這么多，多看看多學習再總結肯定是好的。多讀讀就算看重了不算浪費時間，畢竟一千個讀者就有一千個林黛玉，還有溫故而知新，說不定多讀一些內容，就發現驚喜了呢。不過，在此也精簡一些內容，就1~2項，只供參考。更多內容細看分類。

• js：JavaScript 標準參考教程

• js：JavaScript 秘密花園

• Es6：ECMAScript 6入門

• Es6：深入淺出ES6

• css：CSS 參考手冊

• jquery：從零開始學習jQuery

• jquery：前端開發者都應知道的 jQuery 小技巧

• 移動Web：騰訊移動Web前端知識庫

• 移動Web：移動web知識資料集-白樹

• 小程序：微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件...

• Git：Git教程 - 廖雪峰

• Git：設置Git快捷命令

• React：React 入門實例教程 - 阮一峰

• Angular：Angular.js 的一些學習資源

• underscore：underscore.js 手冊

• vue：vue.js API 中文

• vue：vue.js 中文入門 - vuejs作者

• RegExp：RegExp對象 - 阮一峰

• RegExp：正則表達式&常用代碼

• Node：Node.js 包教不包會

• Node：七天學會NodeJS

• Express：Express 4.x API 中文手冊

• Koa：Koa 手冊

• 前端：Front-End-Develop-Guide 前端開發指南

• 模塊化：JavaSript模塊規范 - AMD規范與CMD規范介紹

• 規范化：通過分析github代碼庫總結出來的工程師代碼書寫習慣

• 工程化：前端工程——基礎篇

• 關注：github上值得關注的前端項目

• 博客：淘寶前端團隊

• 博客：Tencent AlloyTeam 2016

• 博客：FEX 百度WEB前端研發部

• 工具：sublime-text & 資料齊聚

• 工具：chrome 開發者工具的 15 個小技巧

• 優化：轉一篇Yahoo關于網站性能優化的文章，兼談本站要做的優化

• 面試：前端開發面試題

• 面試：前端開發面試題 - GitHub

• 面試：前端開發面試問題及答案整理

前端資源教程類

各種教程會有很多，我也精簡的挑選了一些。選擇一兩個合適的就好了。有時間多看看多比比也是極好的。

JavaScript

• Javascript教程-小白的零基礎JavaScript全棧教程-瘳雪峰

• JavaScript 標準參考教程

• 重新介紹 JavaScript（JS 教程）

• 前端入門教程

• 前端開發者手冊

• JavaScript學習總結-trigkit4

• 溫故js系列-對知識點進行回顧知新

• JS函數式編程指南

• JavaScript Promise迷你書（中文版）

• 精通JavaScript開發-智能社

• JavaScript秘密花園

• JavaScript 資源大全中文版

• JavaScript闖關記 - 編輯中

• 統一回復《怎么學JavaScript？》

• runjs - js在線編輯學習

• 常用的Javascript設計模式

• 45個實用的JavaScript技巧、竅門和最佳實踐

• 給JavaScript初學者的24條最佳實踐

• 編寫快速、高效的JavaScript代碼

• javascript功能插件大集合

ES6

• ECMAScript 6入門

• 深入淺出ES6

• 探索ES6

HTML5

• HTML5與CSS3權威指南（書籍）

• HTML5菜鳥教程

• 玩轉html5<canvas>畫圖

• HTML5+NodeJs實現WebSocket即時通訊

CSS3

• CSS 語法參考

• CSS 參考手冊

• 騰訊css3動畫制作工具

• css3 js 移動大雜燴

• Animate.css

• Sass guide

• Sass中文文檔

• less

jQuery

• 從零開始學習jQuery

• jQuery API 中文文檔

• learn JQuery

• JQuery 源碼查找

• 前端開發者都應知道的 jQuery 小技巧

• 10 個 jQuery 圖表插件推薦

移動WEB

• 騰訊移動Web前端知識庫

• 移動web知識資料集-白樹

• 移動端布局終極解決方案 --- 讓移動端布局開發更加容易

• 移動端學習 - mobileTech

• 移動前端的一些坑和解決方法（外觀表現）

• zepto

• jqmobile 手冊

• 移動開發大雜燴

• 特色的HTML框架可以創建精美的iOS應用-框架

微信小程序

• 微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件...

Git

• Git教程 - 廖雪峰

• GitHub 漫游指南

• 企業開發git工作流模式探索

• Git資料

• Git常用命令

• 設置Git快捷命令

React

• react.js 官方文檔

• React 入門實例教程 - 阮一峰

• React Native 中文版

Angularjs

• Angularjs開發指南

• Angular.js 的一些學習資源

• 有jQuery背景，該如何用AngularJS編程思想

• AngularJS 源碼分析

Underscore.js

• underscore.js 手冊

• underscore.js源碼分析

vue.js

• vuejs 官網

• vue.js API 中文

• vue.js 中文入門 - vuejs作者

• vue github

• Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的組件庫

• vue2.0 發布了

• Welcome to the Vue Forum!

正則表達式

• RegExp對象 - 阮一峰

• 正則表達式&常用代碼

• 進階正則表達式

• 正則表達式 - MDN

• ES6正則的擴展

• 在線正則表達式測試

NodeJs

• 深入淺出NodeJs（推薦書籍）

• Node.js 包教不包會

• 七天學會NodeJS

• NodeJs學習筆記

• NodeJs-阮一峰

• Node.js 究竟是什么？

• NodeJs的代碼調試和性能調優

• Express 框架學習

• Express 4.x API 中文手冊

• Koa 框架學習

• Koa 手冊

簡單算法

• 數據結構與算法 JavaScript 描述. 章節練習

• 常見排序算法（JS版

• JS算法 數據結構 精華集

• 算法系列15天速成——第一天 七大經典排序【上】

• 常見排序算法及優化

前端綜合

• Front-End-Develop-Guide 前端開發指南

• 前端知識體系

• 前端知識結構

• 前端工程師必備的PS技能——切圖篇

• 結合個人經歷總結的前端入門方法

• w3help

• 響應式布局指南

• 關于前端開發談談單元測試

前端模塊化開發類

• JavaSript模塊規范 - AMD規范與CMD規范介紹

• Javascript模塊化編程（一）：模塊的寫法 阮一峰

• Javascript模塊化編程（二）：AMD規范 阮一峰

• Javascript模塊化編程（三）：require.js的用法 阮一峰

• RequireJS入門（一）Snandy

• RequireJS入門（二）Snandy

• RequireJS入門（三）Snandy

• RequireJS進階（一）Snandy

• RequireJS進階（二）Snandy

• RequireJS進階（二）Snandy

• RequireJS 入門指南

• Seajs 提供簡單、極致的模塊化開發體驗

前端開發規范類

• 通過分析github代碼庫總結出來的工程師代碼書寫習慣

• HTML&CSS編碼規范 by @mdo

• Javascript編碼規范-Max Yu

• CSS編碼規范-Max Yu

• 前端編碼規范之JavaScript-小胡子哥

• 前端編碼規范之css-小胡子哥

• 前端開發規范手冊

• 前端代碼規范 及 最佳實踐

• 百度前端規范

• 網易前端規范

前端工程化類

工程化的工具都不是絕對的，選擇合適的使用，項目多了，說不定你都用上了也不一定。反正在我身邊我知道的項目中，不同項目用著不同工具，基本都包含了。

• 前端工程——基礎篇

• Gulp中文網

• Gulp官網

• Gulp：任務自動管理工具 - 阮一峰

• Gulp 入門指南

• Gulp入門教程

• Grunt中文網

• Grunt官網

• fis 前端工具框架

• fis 文檔

• Webpack

• Webpack 中文指南

• Webpack傻瓜式指南（一）

• Webpack傻瓜指南（二）開發和部署技巧

• 入門Webpack，看這篇就夠了

前端開源Git類

• 非死book Projects

• Baidu FEX team

• nzakas

• chrome開發團隊成員

• 玉伯 -支付寶前端Leader

• 豆瓣前端Leader

• JacksonTian 樸靈

• 伯樂在線

• 淘寶UED北京團隊

• 國外TJ大神

• substack

• 支付寶前端美女沉魚~

• fengmk2

• github上值得關注的前端項目

前端知名博客類

SF內有很多高手，可以前去排行榜看看。。。

• 淘寶前端團隊

• Tencent AlloyTeam 2016

• FEX 百度WEB前端研發部

• EFE 百度EFE(Excellent FrontEnd)技術體系

• qunaer UED

• Ruby-China

• CNodeJs

• 伯樂在線

• 博客園

• justjavac - 迷渡

• 阮一峰的網絡日志

• 三生石上-專注于前端（JavaScript、jQuery、ExtJS）

• 司徒正美-Ruby's Louvre

• 張鑫旭 - CSSCSSCSS

• Snandy

前端開發工具類

• sublime-text & 資料齊聚

• SublimeText-快捷鍵大全

• Gif多圖：我常用的 16 個 Sublime Text 快捷鍵

• AngularJS最理想開發工具WebStorm

• Fiddler調式深入研究(一)

• Fiddler實戰深入研究(二)

• 移動web調式利器---Rosin研究

• 移動開發中Fiddler的那些事兒

• 微信內移動前端開發抓包調試工具fiddler使用教程

• Google Chrome 官方

• Chrome開發者工具不完全指南（一、基礎功能篇）

• Chrome開發者工具不完全指南（二、進階篇）

• Chrome開發者工具不完全指南（三、性能篇）

• Chrome開發者工具不完全指南（四、性能進階篇）

• Chrome開發者工具不完全指南（五、移動篇）

• chrome開發工具快捷鍵

• Chrome 開發工具 Workspace 使用

• chrome 開發者工具的 15 個小技巧

• 天啦嚕！原來Chrome自帶的開發者工具還能這么用！

• 神器——Chrome開發者工具(一)

• 使用Chrome開發工具調試Canvas

• WEB調試工具---Firebug-慕課網

• Firefox 開發工具 WebIDE

• Firebug入門指南 - 阮一峰

• Firebug控制臺詳解 - 阮一峰

• 移動端前端開發調試

• 屌爆了,完美調試 微信webview(x5)

• 微信調試的那些事

• 在線二維碼圖片生成器

• Smart PNG and JPEG compression在線圖片壓縮

• easyicon 圖標下載

• Icon Hover Effects

前端性能優化類

• Javascript高性能動畫與頁面渲染

• 移動H5前端性能優化指南

• 給網頁設計師和前端開發者看的前端性能優化

• 轉一篇Yahoo關于網站性能優化的文章，兼談本站要做的優化

• Yahoo!團隊實踐分享:網站性能優化的34條黃金守則(一)—內容

• 網站性能優化指南：什么使我們的網站變慢？

• 分享網頁加載速度優化的一些技巧

• 【高性能前端1】高性能HTML -

• 【高性能前端2】高性能CSS

• 前端工程精粹（一）：靜態資源版本更新與緩存

• 前端工程精粹（二）：靜態資源管理與模板框架

• 讓網站提速的最佳前端實踐

• 阿里無線前端性能優化指南 (Pt.1 加載期優化)

• pagespeed - 檢測網頁性能及優化建議

前端面試類

面試題可以供我們學習補漏，但面試題始終有一種應對面試的感覺。請相信面試官能輕易的看出你的斤兩，掌握基礎和提升技術才是最重要的。這些面試題也是極好的。

• 前端開發面試題

• 前端開發面試題 - GitHub

• 前端開發面試問題及答案整理

• front-end development interview questions and answers

• 如何面試一名前端開發工程師？

• 前端實習生面試總結

• 前端開發面試題大收集

• 如何面試前端工程師？ - 知乎

• 5個經典的前端面試問題

• 10個常見的Node.js面試題

• 百度FEX 的面試

• 40 個重要的 HTML5 面試問題及答案

• BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇

• TCP三次握手&Render Tree頁面渲染=>從輸入URL到頁面顯示的過程

• 前端進階-讓你升級的網絡知識

 

來自：https://segmentfault.com/a/1190000007062464