以前學(xué)習(xí)過(guò)一段時(shí)間的web前端開(kāi)發(fā)，整理了一些我看過(guò)的/我認(rèn)為比較好的學(xué)習(xí)資料（網(wǎng)站、書(shū)籍）。不要問(wèn)我為啥沒(méi)有進(jìn)階版，我只是一條產(chǎn)品汪而已，求輕噴。＝＝

以下引用知乎 @李路 的話。

以我的經(jīng)驗(yàn)，大部分技術(shù)，熟讀下列四類書(shū)籍即可。

入門，用淺顯的語(yǔ)言和方式講述正確的道理和方法，如head first系列
全面，巨細(xì)無(wú)遺地探討每個(gè)細(xì)節(jié)，遇到疑難問(wèn)題時(shí)往往可以在這里得到理論解答，如Definitive Guide/Programming xx系列
實(shí)踐，結(jié)合實(shí)際中經(jīng)常遇到的情景環(huán)境，來(lái)描述如何設(shè)計(jì)和解決問(wèn)題，如cookbook系列
深入，講解一些文化，思路，甚至于哲學(xué)上的東西，真正做到深入一種語(yǔ)言去編程，如unix編程藝術(shù)，程序員修煉之道等等

受李路老師的啟發(fā)，我結(jié)合了自己在學(xué)習(xí)前端過(guò)程中用到的資料如下：

一、 語(yǔ)言基礎(chǔ)（以書(shū)和網(wǎng)站為主）

1.HTML&CSS：

（1）入門：

• Codeademy上的html&css課程——在線交互式編程平臺(tái)，弄清楚基本概念和基本語(yǔ)法
• w3school上的HTML/CSS教程——技術(shù)手冊(cè)式的教程，比較全面，照著實(shí)例敲一遍

（2）進(jìn)階：

• 《精通CSS·高級(jí)Web標(biāo)準(zhǔn)解決方案》——對(duì)CSS有一個(gè)比較深入的學(xué)習(xí)，對(duì)核心技術(shù)了解
• 《HTML5權(quán)威指南》——非常全面的書(shū)，內(nèi)容也很新，包含了HTML5+CSS3+JS DOM

（3）實(shí)戰(zhàn)：

• bootstrap框架: bootstrap中文網(wǎng)/《bootstrap實(shí)戰(zhàn)》——流行的前端框架，注重實(shí)用即可
• Codeademy上的Web Developer Skills+Projects——通過(guò)自己做小頁(yè)面/小網(wǎng)站來(lái)運(yùn)用所學(xué)

（4）提高：

• 《CSS禪意花園》——提高自己的藝術(shù)設(shè)計(jì)能力，通過(guò)實(shí)例來(lái)學(xué)習(xí)如何用CSS設(shè)計(jì)出漂亮的頁(yè)面

2.Javascript：

（1）入門：

• Codeademy上的javascript教程——實(shí)例比較多，比較淺，算是基本了解JS
• w3school上的JS教程——比較詳細(xì)的了解下JS的特性
• 《JavaScript DOM編程藝術(shù)》——講js和DOM的基本知識(shí)和運(yùn)用，了解JS和DOM可以做什么

（2）進(jìn)階：

• ** 《JavaScript高級(jí)程序設(shè)計(jì)》——JS圣經(jīng)，比較全面，非常好的一本書(shū)，比犀牛書(shū)可閱讀性強(qiáng)**
• 《JavaScript權(quán)威指南》——傳說(shuō)中的犀牛書(shū)，好厚好厚的一本書(shū)，不適合入門，適合當(dāng)工具書(shū)看
• 《JavaScript語(yǔ)言精粹》——很薄的一本書(shū)，但是可以幫助你快速了解JS的精華部分

（3）實(shí)戰(zhàn)：

• jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery
• 《jQuery基礎(chǔ)教程》——流行的前端框架，注重實(shí)用

（4）提高：

• 《高性能JavaScript》——講如何提高js性能，以及構(gòu)建和部署文件到生產(chǎn)環(huán)境的最佳實(shí)踐
• 《Secrets of the JavaScript Ninja》——jQuery作者寫的書(shū)，如果你覺(jué)得精通JS了再看這本書(shū)

附錄：前端網(wǎng)站大匯總

1、前端知識(shí)體系：

• 前端知識(shí)體系及修煉攻略：http://blog.csdn.net/borishuai/article/details/8676573——對(duì)前端知識(shí)體系剖析的非常好，尤其是最后對(duì)前端的階段性劃分，對(duì)前端學(xué)習(xí)很有指導(dǎo)意義，推薦！
• 前端開(kāi)發(fā)知識(shí)結(jié)構(gòu)：https://github.com/JacksonTian/fks——有個(gè)前端知識(shí)框架的思維導(dǎo)圖，給了很多鏈接和好書(shū)，推薦！

2、技術(shù)資訊類

• W3Cfuns : http://www.w3cfuns.com/——國(guó)內(nèi)最大的前端站，比較全
• 大前端：http://www.daqianduan.com/——沒(méi)有W3Cfuns那么雜，有些wodpress的主題，“前端導(dǎo)航”也比較好用
• W3Cplus:http://www.w3cplus.com/——也是比較全，有個(gè)“國(guó)外優(yōu)秀譯文”，非常喜歡
• 前端觀察 ：http://www.qianduan.net/——專注于前端設(shè)計(jì)與開(kāi)發(fā)的博客，比較有深度，排版干凈，推薦！**
• 前端亂燉 ：http://www.html-js.com/——有點(diǎn)像前端的知乎，有問(wèn)答平臺(tái)和專欄啥的

3、技術(shù)教程、文檔類

• 慕課網(wǎng)：http://www.imooc.com/course/program
  ——超級(jí)實(shí)用的視頻教程類網(wǎng)站，各種小實(shí)例，非常適合照著“前端學(xué)習(xí)計(jì)劃”計(jì)劃學(xué)習(xí)
• codeademy : http://www.codeademy.com/——英文，簡(jiǎn)單有趣的互動(dòng)編程學(xué)習(xí)網(wǎng)站，非常適合入門，中文版是http://www.fenby.com/
• W3schoo在線教程l: http://www.w3school.com.cn/——中文，適合入門，教程相當(dāng)全，在線實(shí)例可以敲，可惜較淺，有些地方不太準(zhǔn)確和深入
• 火狐開(kāi)發(fā)者網(wǎng)絡(luò)MDN：https://developer.mozilla.org/zh-CN/——中文，不僅有技術(shù)文檔，而且有相當(dāng)多的參考資料和資源、工具，推薦！
• W3C標(biāo)準(zhǔn)：http://www.w3.org/standards/
  ——英文，不解釋，官方文檔，真前端和偽前端就在于此?？上в⑽牡?，而且可讀性差。極不適合入門，適合提高。
• Web平臺(tái)文檔：http://www.webplatform.org/——英文，權(quán)威性僅次于W3C標(biāo)準(zhǔn)，可讀性高于W3C標(biāo)準(zhǔn)，W3C官方認(rèn)可，高質(zhì)量。