前端學習資源收集

前言

本文是在現階段自學過程用到過的優秀資源的總結，並與大家分享。希望可以對大家，尤其是像我一樣的初學者有所幫助，少走彎路。

主要包括：視頻網站、文本網站、書籍、博客以及優化工具等等

一、視頻學習網站

就自學而言，我感覺還是看視頻教學來得輕鬆些，也容易理解。下面就介紹幾個視頻網站

慕課網——程序員的夢工廠

我個人極力推薦的一個學習網站，前端的啓蒙網站，主要針對互聯網的開發。
課程有前端開發、後端開發、移動開發、數據庫、大數據、運維、UI等，非常適合前端人員。有很多的前端課程，也根據難易程度分爲初、中、高三級。還有許多的職業路徑、實戰教程(大部分實戰課程是要付費的)。課程非常的全面。
課程裏還能查看源碼資源、課後小題以及在線的編輯器。
總之，這是一個非常棒的國內學習網站。

---

二、文本類學習網站

• HTML
  w3chool在線教程
  涵蓋比較全面，包括html、css、javascript等

• CSS
  框架：Bootstrap中文網
  預處理器：Sass 基礎教程

• JavaScript
  JavaScript教程
  JavaScript 標準參考教程（alpha）
  ECMAScript 6 入門
  全棧工程師培訓

• jQuery
  jQuery API 中文文檔

• Vue
  Vue.js API

• NodeJs
  Node.js v8.2.1 API文檔

---

三、書籍

• HTML
  《head first of html》

• CSS
  《css權威指南》
  《css揭祕》

• Javascript
  《javascript DOM 編程藝術》
  《javascript權威指南》
  《javascript高級程序設計》
  《javascript面向對象編程》
  《鋒利的jQuery》

---

四、博客

阮一峯的網絡日誌
張鑫旭-鑫空間-鑫生活

---

五、資源類型

• icon

Iconfont——阿里巴巴矢量圖標庫
Font Awesome——爲Bootstrap設計
比特蟲——在線製作ico圖標

• 圖片優化

tinypng（在線壓縮）
picturefill（插件）
sm.ms（圖片轉爲網址）

• 瀏覽器兼容

Can I Use（查看兼容）
BROWSERHACKS（解決方案）

• 自動化構建工具

Gulp中文網
Grunt
gulp plugins 插件介紹

• 包管理工具

NPM
淘寶 NPM 鏡像
cdn