摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。

6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就把看過的一些學習資源（主要是博客，博文）推薦分享給大家。從我接觸前端的開始，到發稿時間截止的這段時間我看過很多的博客，開源項目也了解過一些，質量有參差不齊（甚至還出現過廣告文，雞湯文）。但下面的推薦的博客，博文，項目或者其它資源都是我接觸過的。不敢說資源最好，最全，適合每一個人，但是內容質量上讓我滿意的。可能有些資源我未必看完，看懂，看細。但我覺得是可以幫到大家的，能讓大家提升技術水平的。希望能給大家起到一個引導，指路或者解惑的作用。如果大家有什么好的資源，也歡迎分享！

有一些資源鏈接，在后面我會加上括號的注釋！比如：“ html5推廣（介紹html5開發的創意廣告） ”，我加上注釋的原因可能有以下幾點： 
1.資源很不錯，干貨比較多，提醒大家看！
2.資源是一個系列的其中一個資源。比如一個系列有20多篇文章，每一篇都有用，我不可能把20多篇鏈接都貼上，所以一般我貼這個系列的第一條，提醒大家不要忘記讀完所在系列！
3.資源里面的內容有些我個人覺得很有用，有些我覺得沒什么用！提醒大家挑著看，按需求看！
4.資源的標題可能會有些小誤導，或者資源的其它注意事項，我加以自己的解釋和備注。

后HTML5時代I
后HTML5時代II（簡單粗暴的介紹html5的api，沒什么廢話）
html5推廣（介紹html5開發的創意廣告）
匠心打造canvas簽名組件
HTML5/CSS3（湯姆大叔總結的html5和css3的新特性）
H5動畫開發快車道
移動H5前端性能優化指南
玩轉HTML5移動頁面
HTML5 進階系列：文件上傳下載
HTML5 進階系列：canvas 動態圖表
HTML5 進階系列：拖放 API 實現拖放排序（這個系列的文章都不錯，值得大家一看）
H5動效的常見制作手法
超多經典 canvas 實例，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰、是男人就下100層、心形文字等等等
打造高大上的Canvas粒子動畫

CSS3屬性教程與案例分享（大漠的CSS3干貨，進去里面可以逐個看，對css3的學習很有用）
CSS3實現11種經典的CSS技術（大漠的CSS3經典實例干貨，對css3的學習很有用）
W3cplus demo（w3cplus的案例，非常值得一看）
強大的css3（概括性的說明css3的新特性的一篇文章）
css3經典教程系列（不要忘記看完這個系列，文章都不錯）
如何編寫輕量級 CSS 框架
21條CSS高級技巧
原創：CSS3技術-雪碧圖自適應縮放與精靈動畫方案
Flex 布局教程：語法篇
Flex 布局教程：實例篇
奇妙的 CSS shapes(CSS圖形)
使用CSS3制作各種形狀的圖形（轉自others）
有趣的CSS題目（1）： 左邊豎條的實現方法（看了第一篇，可以往下面看，總會會幫助的，不過這個網站有時候加載不出圖片，如果加載不出圖片，放棄還是堅持，大家抓主意）
純 CSS 實現波浪效果！
使用瀏覽器開發者工具檢測CSS動畫性能
搞定這些疑難雜癥，向css3動畫說yes
Effective前端1：能使用html/css解決的問題就不要使用JS
如何讓你的動畫更自然
css畫圖形
css各種鼠標效果
深入了解 CSS3 新特性（也是概括性的總結，這個系列值得推薦）
前端如何呼風喚雨
:after和:before炫酷用法總結
神奇的 conic-gradient 圓錐漸變
10 個優質的 CSS 與 JS LOGO 動畫示例
被解放的GPU-提高CSS3性能
【項目總結】扯一扯電商網站前端css的整體架構設計（1）（看了第一篇，別忘了看下面的一個系列）
（以下幾篇是我自己的文章，主要就是總結css3新特性，css3動畫和過渡的實例，覺得對大家也會有幫助的 (^__^)）
個人總結（css3新特性）
CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）
編寫自己的代碼庫(css3常用動畫的實現)

JavaScript核心概念歸納整理（概括性的說明js的一些核心概念）
從達標到卓越 —— API 設計之道
我眼中的 JavaScript 函數式編程
深入理解JavaScript系列（湯姆大叔寫的JavaScript系列，對學習和深入js很有用）
javascript組件化
如何寫出小而清晰的函數？（JS 版）
javascript對象詳解：__proto__和prototype的區別和聯系
理清javascript中的面向對象（一）——原型繼承（這個專欄（實用至上）文章質量不錯，值得留意）
微前端-Javascript常用的設計模式詳解
10 個你需要了解的最佳 javascript 開發實踐
深入理解javascript原型和閉包系列
JavaScript學習總結（一）基礎部分（這個系列的文章不錯，不要忘記看完這個系列不過大家得在發文章的專欄找下這個系列的文章，因為作者在這個專欄發文不是連著發一個系列，中間也夾雜著其它文章，不過也很好找。在這專欄（trigkit4）里面，即使不是這個系列的文章，我看過其中幾篇，感覺也很好，大家可以留意下）
JavaScript設計模式與開發實踐 | 01 - 面向對象的JavaScript（這個系列的教程不錯，《JavaScript設計模式與開發實踐》的筆記，這本書我也看過，這本書不錯，作者整理總結得也不錯，大家看完，收獲不少）
JavaScript 函數式編程存在性能問題么？
如何讓 JS 寫得更漂亮
JS的平凡之路--學習人氣眼中的效果（上）
你還在用for循環大法麼？
前端模板的原理與實現
只有20行Javascript代碼！手把手教你寫一個頁面模板引擎
【教學向】150行代碼教你實現一個低配版的MVVM庫（1）- 原理篇
【教學向】150行代碼教你實現一個低配版的MVVM庫（2）- 代碼篇（可以關注這篇文章對應的專欄，寫得不錯，不知道作者還會不會寫下一篇）
如何循序漸進、有效地學習JavaScript？
過目不忘JS正則表達式
JavaScript 進階之深入理解數據雙向綁定
利用 JavaScript 數據綁定實現一個簡單的 MVVM 庫
正則表達式30分鐘入門教程
如何監聽頁面 DOM 變動并高效響應
IntersectionObserver API 使用教程（利用這個API可以更簡單的實現圖片懶加載和其它事情，性能也更高）
（下面三個連接，是知乎上的幾個話題，里面的回答質量參差不齊，大家可以挑些高質量的回答看，絕對有幫助）
作為一名前端開發人員，有哪些值得一讀的js代碼？
JavaScript 有什么奇技淫巧？
用 JavaScript 可以做哪些有趣的事情？
（以下幾篇是我自己的文章，前兩篇主要是寫js常用的一些小實例，雖然覺得跟很多大牛的文章比起來有差距，但是我覺得寫得也不錯，對大家也是有用，就貼上鏈接，最后一篇是關于我印象深刻的面試題）
編寫自己的代碼庫（javascript常用實例的實現與封裝）
編寫自己的代碼庫（javascript常用實例的實現與封裝--續）
讓我印象深刻的javascript面試題

阮一峰 es6（可以當作es6文檔用的在線書籍）
ES6 你可能不知道的事 - 基礎篇
ES6 你可能不知道的事 - 進階篇
30分鐘掌握ES6/ES2015核心內容（簡單粗暴介紹es6核心）
八段代碼徹底掌握 Promise
ECMAScript 6 新特性（總結性描寫常用的es6新特性）

jquery源碼分析
jQuery中的100個技巧（譯）（看了這篇文章，感覺自己學的是假jquery，不過很多技巧我沒有親身試過，保留意見）
這幾條JQuery提升性能的規則你需要牢記
JQuery坑，說說哪些大家都踩過的坑（對于剛接觸的新人而言，這篇文章還有幫助）
jQuery學習筆記（總結性說明jquery常用的api，也不錯）
jQuery插件開發總結

vue官網
Vue2.x踩坑與總結
Vue 中你不知道但卻很實用的黑科技
一個栗子實踐vue2.0與1.0的區別
我從未見過如此簡潔易懂的Vue教程
vue-API（2.3版本的API大全）
Vue.js 插件開發詳解
vue插件編寫與實戰（從開發到發布的一個流程，實例簡單易懂）
使用 Vue.js 創建的 Calendar
加薪DAY10」Vue開源項目庫匯總（雜七雜八的庫都有，質量當然也是有高有低，大家挑著看。）
Vue.js 的實用技巧（一）(看了第一篇，別忘記剩下的)
深入vue2.0底層思想--模板渲染
Vue.js——vue-router 60分鐘快速入門
Vue2.1.7源碼學習
剖析Vue實現原理 - 如何實現雙向綁定mvvm
Vue.js入門（一）--MVVM框架理解
Vue2 源碼分析——邏輯梳理
vue快速入門的三個小實例（我自己的文章，比較基礎的用法，覺得也還不錯，就放上來了）

（下面的文章，有些是webpack1.x和2.x的，考慮到現在已經更新到3.x了，大家看時候要注意區別）
webpack中文網
webpack官方文檔
webpack使用優化（基本篇）
webpack常用功能介紹
開發工具心得：如何 10 倍提高你的 Webpack 構建效率
Webpack 大法之 Code Splitting
webpack多頁應用架構系列（一）：一步一步解決架構痛點（看了第一篇不要忘記剩下的，這個系列的文章不錯）

gulp詳細入門教程
前端構建工具gulp的使用介紹及技巧
gulp入門指南

（react我剛接觸不久，暫時看過的網站就這兩個）
React中國
React 技術棧系列教程
React組件規范

猴子都能懂的GIT入門
Git教程 - 廖雪峰的官方網站

(Browsersync中文網 - 省時的瀏覽器同步測試工具)

使用npm - NodeSource的絕對入門指南
Node.js和npm - NodeSource中的Package.json的基礎知識
配置.npmrc以獲取最佳Node.js環境

認識與入門 Markdown

教你從零開始搭建一款前端腳手架工具

這是一個具有一致接口、模塊化、高性能等特性的 JavaScript 工具庫。
4.17.4版本

官網
Fiddler教程

分享幾個日常調試方法讓js調試更簡單
用 Chrome 調試你的 JavaScript
JavaScript 中 console 的用法（看了這篇和上面一篇文章，你可能會感覺以前根本不會使用console）

淺談移動前端的最佳實踐
前端優化帶來的思考，淺談前端工程化
前端優化實踐總結
減少前端代碼耦合
判斷單、多張圖片加載完成
終端代碼重復率檢測
【組件化開發】前端進階篇之如何編寫可維護可升級的代碼
作為一個web開發人員，哪些技術細節是在發布站點前你需要考慮到的
【單頁應用】我們該如何處理框架彈出層層級關系？
剝離模板代碼加速Web頁面加載
移動前端系列——移動頁面性能優化
[聊一聊系列]聊一聊百度移動端首頁前端速度那些事兒

socket.io 中文手冊 socket.io 中文文檔
WebSocket 與 Socket.IO
VR進化論|教你搭建通用的WebVR工程
RxJS 入門
deeplearn.js：瀏覽器端機器智能框架

雞年大吉！繼續前行的前端周刊（第十五期）
前端收藏夾（和上面那篇一樣，都是別人的總結的，干貨不少，但是‘前端收藏夾’，可能是資源太多了，給我的感覺也有點一股腦放資源的感覺，只要是資源，都放進去，少部分資源質量有點低，建議大家帶參考思想看）
移動web干貨收藏夾
awesomes（前端一個巨大的資源庫，里面的資源應有盡有）
知識庫（擁有很多語言，框架，庫的知識圖譜，值得一看！能讓你了解哪個語言，框架，庫所包含的知識點，每一個知識點的詳情講解，也有栗子和文章，如：javascript知識圖譜，html5知識圖譜，react知識圖譜）
前端資源分享
送給前端的你，推薦幾篇前端匯總文章。 - 知乎專欄
前端面試問題合集（Front-end-Developer-Interview-Questions）
github上值得關注的前端項目
前端那點事兒（書列）
FPB 2.0：免費的計算機編程類中文書籍 2.0（迷渡大神分享的書籍，各類圖書都有，也有前端的，大家可以挑著看）
騰訊 Web 工程師的前端書單
前端開發者手冊
印記中文-手冊（各種開發文檔，webpack,vue,sass等）
（以下幾個鏈接，不是文章，也不算問題吧，都是segmentfault官方舉行的比賽，分享或者討論的內容，在上面看大神的分享，代碼，絕對有收獲）
1024 HackGame 第四關面壁人這些題目是怎么想出來的？
把 SegmentFault 全部帶回家 —— 碼文章，送周邊
官方送書活動第二彈 —— 增長姿勢之SF喊你來談開發
官方活動，深入淺出之SF喊你來談開發！一起來分享一下你的開發知識？
官方30行js比賽：30行js你能做出什么？
【官方比賽】社區 1111 秀代碼，讓你來秀讓你飛！

淘寶前端團隊fed
阿里巴巴
百度前端團隊
360奇舞團
奇舞團視頻教程
京東設計體驗部-凹凸實驗室
騰訊網前端研發中心
騰訊alloyteam
騰訊前端IMWEB團隊
騰訊前端IMWEB團隊-github
騰訊游戲
新浪UED
大前端（餓了么）
（上面的團隊博客，值得關注，博文內容質量很高，但是就是更新不頻繁，下面的更新會比較多，質量也不錯）
搜車大無線團隊博客
極樂科技
IMWeb前端社區
愛前端-知乎專欄
前端雜貨鋪
前端外刊評論
前端解憂雜貨鋪
DDFE 技術周刊
前端之巔
Fed匯總

十年蹤跡
張鑫旭
阮一峰
葉小釵
司徒正美博客
廖雪峰
勾三股四
chokCoCo
chokCoCo-github

我看過的書比較雜七雜八，與前端有關的，推薦的就是下面這些了！下面的書，我都看過，區別就在于有些我是整本都看完了(有些也來回看過幾次)，有些粗略的看了其中一部分（有些就看了幾頁）！

關于看書的建議，下面的書，大家可以根據自己的需求興趣去挑著看。一本書，不要看完就可以了，要弄懂書中的內容。有些書值得大家來回看幾遍的！

關于書的資源，下面的推薦的書（我看的是電子書）我都是從網上下載的。為避免侵權，我在這里就不放資源的鏈接了！大家自行購買紙質書或者電子書，或者到網上找資源！

《JavaScript高級程序設計》：（紅皮書或者紅寶石書）可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：（犀牛書）可以說是js最經典的一本書了，新手看著可能會有點吃力，但是對于學js的人來說，必備的，不理解的地方就去查閱一下，很有幫助。
《數據結構與算法JavaScript描述》（刺猬書）
《編寫可維護的JavaScript》（烏龜書）
《JavaScript DOM編程藝術 第2版》
《JavaScript語言精粹》（蝴蝶書）：經典的書，也是普及JavaScript的開發思維的一本書。
《JavaScript設計模式 》-張榕銘（百度員工寫的一本書，案例生動易懂，涉及的設計模式比較全）
《JavaScript設計模式與開發實踐》-曾?。v訊員工寫的一本書，講了js里面更加常用的14個設計模式）
《單頁Web應用 JavaScript從前端到后端》
《ECMAScript 6 入門》可以作為es6新特性文檔的一本書，而且這本書開源了，直接看就好！需要的也可以購買！
《HTML5移動Web開發實戰》
《HTML5移動Web開發指南》
《HTML5 Canvas核心技術》：對于感受canvas的魅力，使用，動畫的實現，都非常有幫助。
《html5與css3權威指南 第三版》-陸凌牛，這本書貌似有同名的，注意作者，另外該書分上冊和下冊的。我當時看的是第二版，現在已經出了第三版就推薦第三版了。
《鋒利的jquery》：我學jquery就是看這本書，這本書給我身邊的同行印象不是很好，但是我感覺不錯，而且我學jquery就看了這一本書，就推薦這本了！
《了不起的Node js 將JavaScript進行到底》
《css揭秘》：看了這本書，我再也不敢說自己會css了！里面很多都是你想不到的！

我推薦社區雖然有這么多個，但是我注冊賬號并且活躍的只有兩三個，其它的社區基本都是我在學習的時候偶然接觸到的，并且覺得不錯的，所以也推薦下。至于大家想活躍哪幾個社區，就看大家的選擇了。如果大家有什么好的社區資源，也不妨推薦下！

github：這個起初我經常在上面找資源。但是沒注冊賬號，但是后來被老大催著注冊，就去了。在里面可以閱讀別人的代碼，向大家學習！
segmentfault：我現在活躍的一個社區，主打問答，也有文章和講堂，質量也很不錯！
知乎：雖然不是單純的IT社區，但是里面有很多大牛和高質量的專欄！
stackoverflow：一個問答社區，基本上各種問題都能在上面獲得解答
w3cplus：一個前端學習的網站，里面的文章質量都挺不錯的，特別是關于CSS(3)的
前端網
前端亂燉：一個前端文章分享的社區，有很多優秀文章
開發者頭條
前端周刊
HTML5夢工場
畢業僧
慕課網（貌似現在很多視頻收費了，以前我看的時候，基本都是免費的）
稀土掘金
匯智網

（以上圖片來源網絡）

vue
react（我只接觸過幾次react，使用起來還不錯，現在也正在學習）
gulp
webpack
d3
chart（和d3一樣，屬于數據可視化方面，體驗過。但是在項目上沒用過，感覺功能強大，就推薦下）
element-ui（基于vue2.x開發的一個組件庫，一般用于后臺管理系統開發，現在我們公司開發的后臺管理就是用這個）
muse-ui（同樣是基于vue的組件庫，ui非常的漂亮）
一起學 Node.js
AlloyTeam移動端手勢解決方案
frontend-dev-bookmarks（前端各方面的學習清單）
免費的編程中文書籍（中文分享書籍，不止前端，各方面都有，大家按需查看）
animate.css
hover.css
muse-ui（基于vue2.0的一個UI庫，樣式漂亮，種類全）
CSS3 實現各類3D效果的博客（和下面三個連接同屬一個作者，這個大牛的作品不錯，效果酷炫，雖然star數量與其它幾個推薦項目沒法比，但是很值得推薦）
chokcoco/boomJS
chokcoco/magicCss
chokcoco/iCSS

梁少峰的個人博客（里面的文章質量也不錯，各種都有，js,jquery,vue,react,node.js等）
RxJs
deeplearn（谷歌出版，一個關于人工智能深度學習的框架，有興趣可以看，我看了一會，沒看懂）

（下面這兩個是我自己的開發的項目，雖然跟其他項目比較欠缺火候，但是還不至于用不了或者拿不出手的地步，也算是我的一個小廣告吧！(●"?"●)）
ec-do（封裝了日常開發常用的javascript實例，實例為日常開發常用的小實例，包括數組去重，打亂數組，字母大小寫轉換，cookie操作的封裝等。）
ec-css（基于css3開發的代碼庫，包括日常使用的hover過渡效果，動畫效果，以及預設動畫）

騰訊css3 ui庫
NEC : 更好的CSS樣式解決方案（網易的一個css3解決方案，但是貌似挺舊了，不維護了，但是里面的案例大家可以參考，絕對有收獲）

使用node.js + socket.io + redis實現基本的聊天室場景
前端開發，從草根到英雄（第一部分）
前端開發，從草根到英雄（第二部分）
我的前端進階之路（看著標題以為是雜談，實際上感覺是一篇總結性文章，大家可以看下）
為你的移動頁面尋找一絲新意——手機互動網頁項目總結（上）
為你的移動頁面尋找一絲新意——手機互動網頁項目總結（下）
前端開發指南2017
【實戰HTML5與CSS3 第一篇】初探水深，美麗的導航，絢麗的圖片爆炸?。。赐陝e忘記下面的，是葉小釵大神仿智能社官網的實戰）
基于 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)組件.
發現最好的你-設計中如何打造最合適的組件
webpack+vue項目實戰（一,搭建運行環境和相關配置）（我自己的文章，關于使用vue+webpack開發一個單頁應用，一個后臺管理系統的開發搭建，這個系列一共有五篇文章）

OpenDoc - 前端簡歷評級標準（美團出的一份簡歷評級，可以適當參考下，對比下自己的實力和美團評級。當然有興趣的也可以去面試）
前端代碼規范及最佳實踐
Vue.js 很好，但是比 Angular 或 React 更好嗎？
聊聊技術選型 - Angular2 vs Vue2
寫給前端工程師看的，移動應用選型指南
網站架構-從無到有
前端架構那些事兒
技術大牛養成指南，一篇不雞湯的成功學實踐
6 個值得好好學習的 JavaScript 框架
更快學習 JS 的 6 個簡單思維技巧
程序員怎么學英語
8個讓程序員追悔莫及的職業建議
當心！程序員應警惕七種錯誤的職業規劃
1024程序員節，寫給年輕程序員的建議
給新程序員的10條建議
前端框架這么多，該何去何從？
2017年前端開發工具趨勢
現代前端開發技術棧
聽說2017你想寫前端？
如何跟上前端開發的最新前沿
前端開發人員必須了解的七大技能圖譜
前端技能匯總（JacksonTian）
另一張前端技能匯總圖（和上面的鏈接一樣，但是看的話，建議大家帶參考的思想看）
怎樣成長為一個優秀的 Web 前端開發工程師？
月薪10-12k的前端人員應該具備怎樣一種技術水平？
作為一名前端開發人員，有哪些值得一讀的js代碼？
hexo高階教程：教你怎么讓你的hexo博客在搜索引擎中排第一（有興趣的可以看一下，有用）
開放源碼的法律面（因為國外對版權，許可證很是注重，該文章就講代碼開源后關于許可證的文章，看得我有點蒙，但是最終整理后，我以后的開源項目就用MIT）

MDN-web技術文檔
智圖_圖片壓縮在線工具_在線制作webp
多視通圖片轉換Base64
微信JS-SDK說明文檔
草料二維碼
菜鳥教程
w3cschool

好了，我學前端看過的博客文章，關注過的大牛和項目，項目技術棧的教程基本都在這里了！我分享的這些，不敢說最好，最全，適合每個人。但是都是我看過或者接觸過的，至少內容上讓我滿意的，讓我覺得是對學習有用的，能幫到大家的。如果大家有什么學習資源推薦的，我也希望大家不吝嗇的共享給我，給大家！
還有一個建議就是，學習web前端，上面分享的可以起到一個引導，指路，解惑的作用。但是，大家不要忘記多練，畢竟實操最重要！大家有空余的時間或者周末也可以自己做下自己有興趣的項目，并且用在自己工作的項目開發上！項目不求比別人好，只求自己能練習，提升自己的技術水平！

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣