摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。

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

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

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

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

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

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

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

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

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

gulp詳細(xì)入門教程
前端構(gòu)建工具gulp的使用介紹及技巧
gulp入門指南

（react我剛接觸不久，暫時(shí)看過的網(wǎng)站就這兩個(gè)）
React中國
React 技術(shù)棧系列教程
React組件規(guī)范

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

(Browsersync中文網(wǎng) - 省時(shí)的瀏覽器同步測試工具)

使用npm - NodeSource的絕對(duì)入門指南
Node.js和npm - NodeSource中的Package.json的基礎(chǔ)知識(shí)
配置.npmrc以獲取最佳Node.js環(huán)境

認(rèn)識(shí)與入門 Markdown

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

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

官網(wǎng)
Fiddler教程

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

淺談移動(dòng)前端的最佳實(shí)踐
前端優(yōu)化帶來的思考，淺談前端工程化
前端優(yōu)化實(shí)踐總結(jié)
減少前端代碼耦合
判斷單、多張圖片加載完成
終端代碼重復(fù)率檢測
【組件化開發(fā)】前端進(jìn)階篇之如何編寫可維護(hù)可升級(jí)的代碼
作為一個(gè)web開發(fā)人員，哪些技術(shù)細(xì)節(jié)是在發(fā)布站點(diǎn)前你需要考慮到的
【單頁應(yīng)用】我們?cè)撊绾翁幚砜蚣軓棾鰧訉蛹?jí)關(guān)系？
剝離模板代碼加速Web頁面加載
移動(dòng)前端系列——移動(dòng)頁面性能優(yōu)化
[聊一聊系列]聊一聊百度移動(dòng)端首頁前端速度那些事兒

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

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

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

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

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

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

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

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

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

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

（以上圖片來源網(wǎng)絡(luò)）

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

梁少峰的個(gè)人博客（里面的文章質(zhì)量也不錯(cuò)，各種都有，js,jquery,vue,react,node.js等）
RxJs
deeplearn（谷歌出版，一個(gè)關(guān)于人工智能深度學(xué)習(xí)的框架，有興趣可以看，我看了一會(huì)，沒看懂）

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

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

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

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

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

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

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣