最全面的前端資源分享

李狗蛋發表於2017-12-27
前端

1.為什麼我會整理這個資源

前段時間，好多朋友私信我，問我有沒有什麼好的前端學習資源,好多小夥伴學習的東西比較雜，所以我就花了一段時間吧比較經典的學習資源整理分享給大家，在我看來這是目前為止比較全面的前端學習資源，裡面的資源大部分是乾貨，希望大家能完完整整看完一個系列教程，都能成為前端大神。

2.推薦大神文章(文字教程)

2.1 綜合類

  1. 前端知識體系
  2. 前端知識結構
  3. Web前端開發大系概覽
  4. Web前端開發大系概覽-中文版
  5. 智慧社 - 精通JavaScript開發
  6. JavaScript中的this陷阱的最全收集--沒有之一
  7. JS函數語言程式設計指南
  8. 騰訊移動Web前端知識庫
  9. 前端開發筆記本

2.2 html5

  1. 深入理解HTML5標籤
  2. 後HTML5時代I
  3. 後HTML5時代II
  4. html5推廣
  5. 匠心打造canvas簽名元件
  6. HTML5/CSS3（湯姆大叔的部落格裡面，想深入瞭解js的原理，首先推薦湯姆大叔的部落格）
  7. 玩轉HTML5移動頁面
  8. HTML5 進階系列：檔案上傳下載
  9. HTML5 進階系列：canvas 動態圖表
  10. HTML5 進階系列：拖放 API 實現拖放排序
  11. 超多經典 canvas 例項，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰、是男人就下100層、心形文字等等等
  12. canvas入門實戰--邀請卡生成與下載

2.3 css3基礎與進階

  1. CSS3屬性教程與案例分享
  2. CSS3實現11種經典的CSS技術
  3. W3cplus demo
  4. 強大的css3
  5. css3經典教程系列
  6. css3 按鈕動畫
  7. 全域性CSS的終結(狗帶 [譯]
  8. browserhacks
  9. HTML5+CSS3 loading 效果收集
  10. 一個純CSS3實現的酷炫翻書效果
  11. 純 CSS 實現波浪效果！
  12. CSS3實現11種經典的CSS技術
  13. 搞定這些疑難雜症，向css3動畫說yes
  14. Effective前端1：能使用html/css解決的問題就不要使用JS
  15. 深入瞭解 CSS3 新特性
  16. 前端如何呼風喚雨
  17. :after和:before炫酷用法總結
  18. 10 個優質的 CSS 與 JS LOGO 動畫示例
  19. 【專案總結】扯一扯電商網站前端css的整體架構設計（1）
  20. CSS佈局方案
  21. 20個實用的CSS技巧程式碼
  22. CSS效能分析，如何優化CSS提高效能
  23. CSS 黑魔法小技巧，讓你少寫不必要的JS，程式碼更優雅
  24. 漸進式動畫解決方案
  25. 奇妙的 CSS shapes(CSS圖形)

2.4 Less,sass

  1. Sass 中文文件
  2. less
  3. Sass使用總結
  4. vue裡怎麼用scss
  5. Sass 中文文件
  6. 編寫Sass的八個技巧

2.5 javascript(前端最最重要的一個模組，一切上層建築的基礎)

  1. javascript簡寫技巧
  2. javascript深入淺出原型
  3. javascript 非同步程式設計魔法
  4. 深入理解JavaScript系列 （深入理解javascript最經典教程之一）
  5. javascript元件化
  6. 從達標到卓越 —— API 設計之道
  7. JavaScript 函數語言程式設計存在效能問題麼？
  8. 前端模板的原理與實現
  9. 150行程式碼教你實現一個低配版的MVVM庫（1）- 原理篇
  10. 150行程式碼教你實現一個低配版的MVVM庫（2）- 程式碼篇
  11. 如何循序漸進、有效地學習JavaScript
  12. JavaScript 進階之深入理解資料雙向繫結
  13. 利用 JavaScript 資料繫結實現一個簡單的 MVVM 庫
  14. 前端模板的原理與實現
  15. 如何監聽頁面 DOM 變動並高效響應
  16. IntersectionObserver API 使用教程
  17. 作為一名前端開發人員，有哪些值得一讀的js程式碼
  18. JavaScript 有什麼奇技淫巧？
  19. 用 JavaScript 可以做哪些有趣的事情？
  20. 反擊爬蟲，前端工程師的腦洞可以有多大？
  21. JavaScript 設計模式 ① 正確使用物件導向程式設計的姿勢
  22. 如何優雅的編寫 JavaScript 程式碼
  23. 如何用原生 JS 實現手勢解鎖元件
  24. Javascript思維導圖
  25. 純前端實現人臉識別-提取-合成
  26. HTTP中GET與POST的真正區別
  27. JavaScript練習網站收集(入門級)
  28. 編寫自己的程式碼庫（javascript常用例項的實現與封裝）
  29. JavaScript原型及原型鏈
  30. 通過示例學習JavaScript閉包
  31. 原生Javascript實現五子棋
  32. JavaScript工程專案的一系列最佳實踐策略

javascript擴充套件(面試題)

  1. 那幾個月在找工作（百度，網易遊戲）
  2. 2014最新面試題
  3. 阿里前端面試題
  4. 2016校招內推 -- 阿里巴巴前端 -- 三面面試經歷
  5. 年後跳槽那點事：樂視+金山+360面試之行
  6. js 也來 - 【拉勾專場】拋棄簡歷！讓程式碼說話！
  7. 前端面試題
  8. Web開發筆試面試題 大全
  9. 5個經典的前端面試問題
  10. 最全前端面試問題及答案總結
  11. 如何面試一名前端開發工程師？
  12. 史上最全 前端開發面試問題及答案整理
  13. BAT及各大網際網路公司2014前端筆試面試題
  14. 牛客網-筆試面經

由於時間有限，暫時只整理了html5,css3,js相關的知識，稍後會整理 es6,typescript,jquery,vue,react,angular2+,webpack,node,express,mongodb,redis,gulp,git,iconfont,seajs,requirejs 效能優化，部落格，技術團隊，比較牛逼的社群，常用的工具 如果對你有幫助，請多多關注我，後續我會把視訊教程也會分享出來，都是比較經典的

相關文章