對於一些前端小白來說，如何找到一些有用的學習前端的知識，以及及可能的不走彎路，下面我來提供一些學習前端的書籍以及網站，下面的書籍以及網站，親測可用，而且還是很不錯的。

入門書

入門可以通過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關注技術的新動態。這裡推幾本我覺著不錯的書：

《JavaScript高階程式設計》：可以作為入門書籍，但同時也是高階書籍，可以快速吸收基礎，等到提升再回來重新看

《JavaScript權威指南》：不太適合入門，但是必備，不理解的地方就去查閱一下，很有幫助

《編寫可維護的JavaScript》和：

《Node.js開發指南》：不錯的Nodejs入門書籍

《深入淺出Node.js》：Nodejs進階書籍，必備

《JavaScript非同步程式設計》：理解JS非同步的程式設計理念

《JavaScript模式》和《JavaScript設計模式》：JavaScript的程式碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書

《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎麼轉起來的，講解很詳細，從原始碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西

《Dont make me think》：網頁設計的理念，瞭解使用者行為，非常不錯

《CSS禪意花園》：經久不衰的一部著作，同樣傳遞了網頁設計中的理念以及設計中需要注意的問題

《高效能JavaScript》和《高效能HTML5》：強調效能的書，其中不只是效能優化，還有很多原理層面的東西值得學習

《HTML5 Canvas核心技術》：我正在讀的一本書，對於canvas的使用，動畫的實現，以及動畫框架的開發都非常有幫助

《HTTP權威指南》：HTTP協議相關必備，前端開發除錯的時候也會經常涉及到其中的知識

《響應式Web設計》：技術本身不難，重要的是響應式網頁的設計理念，以及移動先行的思想

《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發思維的一本好書，非常適合入門

一些不錯的網站

github：沒啥好說的，多閱讀別人的原始碼，多上傳自己的原始碼，向世界各地的大牛學習

codepen：感受前端之美的必選之地，裡面有很多酷炫的效果和優秀的外掛

echojs：快速瞭解js新資訊的網站

stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答

google web fundamentals：每篇文章都適合仔細閱讀

static files：開放的CDN，很好用

iconfont：阿里的向量圖示庫，非常不錯，支援CDN而且支援專案

html5 rocks: 一個不錯的網站，很多瀏覽器的新特性以及前沿的技術，都能在這上面找到文章

css tricks：如何活用CSS，以及瞭解CSS新特性，這裡可以滿足你

JavaScript 祕密花園 JavaScript初學必看，非常不錯

w3cplus：一個前端學習的網站，裡面的文章質量都挺不錯的

node school：一個不錯的node學習網站

learn git branch：一個git學習網站，互動很棒

前端亂燉：一個前端文章分享的社群，有很多優秀文章

正則表示式：一個正則表示式入門教程，非常值得一看

阮一峰的部落格和張鑫旭的部落格：快速瞭解某些知識的捷徑，但是如果需要深挖，還需要其他的資源

各路大牛的部落格：這個太多了，就不貼了，知乎上有很全的

各種規範的官方網站，不懂得時候讀規範

前端部落格，如湯姆大叔的部落格也是很不錯的。後來開始更多的關注各路大牛的部落格和一些比較深的書籍，以及關注一些新的知識和框架，並且不斷地練手提交程式碼到github，這樣也學到了很多知識。在實習的過程中，切身參與到實際專案開發之中，能學到很多在學校學不到的理念和思維，這點也有很有幫助的。

收集癖和知識管理

前端學習有個特點，很多東西都很零碎，分散，需要你自己去整理、歸納和總結。在微博、知乎上follow了眾多的大神，你不僅僅是為了聽八卦，大神們的隻言片語有時候留下的是無盡的餘味，很有可能一個不經意提到的一個詞就成為你下一個學習的目標。收集這些資訊，善用google，提問，思考。就像遊戲裡的收集要素，前端學習也是充滿蒐集要素的一個“遊戲”，只不過你需要一個知識管理工具來充當物品欄和倉庫，我所知道的大牛們無一不是知識管理工具的重度使用者。以前用的oneNote，那時候還沒繫結到雲端儲存，現在基本上用evernote。書籤一直打算用delicious，因為它是基於tag管理的，但一直沒用起來。當然重點不在於這些工具，但是趁手的工具可以提高你的學習效率。最關鍵當然是隨時保持旺盛的學習慾望，你的目標是瞭解有關前端的一切(當然不是所有都要掌握，因為畢竟你的精力有限，而且現實的說這也不太可能)。

跟對神

這個可控性貌似不大…跟對老大這個就不多說了，一定程度要看造化。不過話說回來，多跟身邊的高手交流是王道，這個高手不一定要多高，但是一定要對技術有熱情。研一的時候熱情高漲，每天7點進實驗室門，然後發現有個傢伙居然比我還早到。後來發現這傢伙上午就走了，下午又來了，而且導師對此習以為常，原來這傢伙晚上不睡覺通宵寫程式碼，上午才跑回去睡。後來經常和這位神討論問題，每次感覺經驗值蹭蹭蹭的往上漲。然後實驗室還有一位神，被前面這位通宵神形容為“只能望其項背，一直在追趕，從來沒趕上”，兩位神的特點都是什麼都瞭解一點，所以什麼都能跟你討論得起來，和神們也能扯得很high了。

總之就是這兩位神把我拉進了坑，或者說從一個坑跳進另一坑，雖然兩位神都不是搞前端的，不過技術之間總有相通之處。

前端的定位

前端的定位關乎到你需要吸收什麼樣的知識和技能，決定在技術世界裡你對什麼需要格外敏感。如果你認為前端僅僅停留在切頁面，實現互動和視覺的要求，那你對前端的認識還停留在初級階段。阿里終面的時候我問了考官這麼個問題：前端技術日新月異，範圍越擴越寬，標準越來越豐富，似乎任何一個觸角都能伸出很遠。怎麼給前端一個合適的定位?考官給我分析了半天，然後總結成一句話，就是使用者和網站的聯結者，使用者體驗的創造者(原話不是這樣，但大體是這個意思)。也就是說前端的終極目標其實就是創造使用者體驗，提升使用者體驗，以使用者體驗為中心。不管你是從互動設計上下手，還是從效能優化出發，或者改進工作流提升工作流效率，最終都是為了創造和提升使用者體驗，最終都要體現到使用者體驗這一點上來。我認為這個總結非常有道理(當然“使用者體驗”這個詞太寬泛了，並且不僅僅是前端工程師的範疇，比如開發後臺的時候對一個數據處理過程進行優化，提升了整體效能，這也是對使用者體驗的一個提升)。

現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現互動等更深入的問題，比如前端自動化、影象程式設計、效能優化等等，再往後推一點就是PHP/JSP/ASP/nodeJs，過去後端模板一般屬於後端的範疇，現在隨著前端架構的演進，可能會讓你去寫後端模板的程式碼，需要用到後端語言(PHP/Java/C#等)，這就是所謂大前端(然而這與前端的定位並不是相背離的，大前端處理的依然是與使用者接觸的部分，仍然是對使用者體驗的優化)。可能最常見或者被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說百度用PHP比較多，阿里用node比較多。

玉伯在他的部落格裡提過所謂全端是橫向的，全棧是縱向的。全端即所有的終端說白了都是前端，因為都關乎到使用者體驗，直接和使用者接觸。適應多終端的開發，要求你在web前端的基礎上，可能還要去擴充套件android開發和ios開發的知識，好在由於hybrid開發方式的流行，對使用native語言開發的技能會要求的不那麼深入。

全棧可以說是最適合初創公司的一種發展型別，廣義上認為是從前端幹到後端，從開發幹到運維，這種就不說了，一般人應該不會想要去往這個方向發展，想要成為這種意義上的full-stack dev的，可能用不著來看我這篇文章了;而狹義上的全棧特指使用js語言從前端寫到架設在nodeJs上的後端，前後端統一語言，統一程式設計模型，甚至公用同一套程式碼。更多瞭解全棧開發可以看看玉伯這篇說說全棧工程師。

以上是我對前端以及衍生出來的技術路線的一些淺薄理解，學習一個領域掌握它的整體上的走向和趨勢還是挺重要的。另外如果想要對前端學習方向、職業成長路徑有一個整體的認識，推薦看看拔赤總結的這篇前端開發十日談。

最後

貢獻幾個對前端學習、面試有幫助的連結：

前端面試問題合集(Front-end-Developer-Interview-Questions)(https://github.com/darcyclarke/Front-end-Developer-Interview-Questions)

前端技能彙總(JacksonTian)(https://github.com/JacksonTian/fks)

另一張前端技能彙總圖(http://www.f2er.info/)

前端那點事兒(書列)(http://book.douban.com/doulist/13701898/)

與grunt相比，學習gulp會比較簡單

做SPA的話，推薦backbone.js和 backbone.marionette.js

翻牆不用折騰，花十塊錢買一個月的 紅杏。

把基礎打紮實了再學這些都沒問題。

html 沒什麼好說的，有空學學html5。

css 儘量看文件 ，因為很多中文資料都各執一辭，看多了反而會糊塗。

有個網站可以查詢html/css標籤、屬性在各個瀏覽器中的支援情況，挺好用的。

javascript 就看 javascript高階程式設計 。不過這麼厚的書看過就會忘。對javascript核心概念的講解：物件/原型鏈/ 建構函式/執行上下文/作用域鏈/閉包/this，這裡有篇不錯的文章。

jquery 有很多 API,這個網站可以方便查到。有時間弄清楚jquery deferred 的用法。

多給 sublimetext 裝外掛，比如說檢查程式碼錯誤的，新建目錄檔案的，整理程式碼的。