怎麼學習前端開發？求推薦學習路線？
首先，我是軟體工程系的研究生，女生
說這個原因就是，我有代碼能力，但不強悍。。
作為一個女生對樣式也很感興趣。。。現在做測試開發崗位，我的工作主要是python+Django開發內部使用的平台（所以這也是我的工作需求）
django使用了約1年，不算熟練，也是夠用了。
在寫Django時，因為測試部門往往不會有那麼好的前端工程師支持，所以前台頁面我們一般拿了bootstrap的東西在用，
問題就是，沒有系統的學習過前端開發，很多不懂，七拼八湊的，前端代碼現在慘不忍睹。決定下狠心學習前端開發。
說前端基礎，像html，css等，真是一知半解，現在各種理不清楚的感覺。求各路大神給點意見，萬分感謝啊
不答題，我就是順手撕個搞小白培訓的摳腳大漢。
這種字裡行間等於是告訴你「我是騙子，我是摳腳大漢，我在為培訓班攢傻×」的回答，也是可以有人上當的。
你以為剪裁一下就搜不出來了？你以為搜圖是逐個像素對比嗎？你以為大家都用百度嗎？
還動輒「小女子」「小女子」的，顯擺啥？第一天做女生是嗎？
西遊記裡面妖怪幻化人形的時候也自稱「小女子」，這蠢得就跟相親時叫女方「花姑娘」一樣。
現在騙子都對智商沒有要求了嗎？
知乎把它推到我時間線上來，等於是知乎也有責任啊。
=====================================分割線==========================
已經這麼多贊同了，不說點有用的也不好意思了。
首先，不推薦w3school 在線教程，兩個原因，一是過時，二是不全。這個東西是非官方的，也很久沒維護了。
如果是搜索和學習API,推薦DevDocs API Documentation 兩個原因，一是實時更新，二是作為手冊涵蓋非常全面，用法和例子很清晰。有時候正看著的時候它就彈個消息告訴你內容更新了。
如果是系統學習標準知識，推薦Standard ECMA-262
當然，初學可以先不用看這個。等你進階的時候可以一邊工作一邊看。國內也有人翻譯過中文版，你可以自己找找。
其次，不推薦各種亂七八糟小論壇QQ群，這種東西最終就是把你引導到付費培訓班去。上上主流的技術網站、業界知名的論壇足矣，大部分時候以搜索為主。
再有就是，以當今社區的開放程度，自學是能實現系統的學習的。那麼多項目開源在那任你閱覽，主流技術都有文檔和無數的線上問答。唯一能約束你的就是時間和精力。
而在一手資料那麼多的情況下去找尋所謂的更舒服的學習方式是得不償失的，這除了延長你的學習時間外並沒有什麼好處。
況且在當前日益嚴峻的就業環境下，時間才是最寶貴的東西。一屆又一屆的畢業生都在擠佔為數不多的初級崗位。你還想低效地再多學一年和更多的失業人口競爭實習崗么？
取匿。
v1.0 基礎版
v1.1 選擇編程系統化學習方法請參考：如何學習編程？ - 知乎
v1.2 如果你是零基礎，不妨先看下這篇：零基礎開始學 Web 前端開發，有什麼建議嗎？
v1.3 選擇編程語言請參考：程序員學哪種語言最好？ - 知乎
這個問題不夠準確，你當然是為了找到工作，所以應該是
如何依據最短路徑學習前端開發並找到工作
恐怕很少人因興趣而學習，所以目的還是找到工作，那我們反推下，公司需要什麼樣的人？
需要能幹活的人，來之能戰、戰之能勝，即插即用的人才。
什麼樣的人才是能幹活的？
有項目經驗
有些人可能會質疑，不對呀，我同學剛畢業，啥都沒做過，怎麼能找到工作呢？
他很可能是985、211學校學生，這種人，公司會看潛力。因為他們能考上985、211，就意味著他們聰明，學習能力強，至於項目經驗，可以培養嘛，大家心知肚明學校的教育就是一坨xiang，只要你有潛力，公司又有這個實力，可以培養嘛。
那麼，如果是普通高校，或是不是前端專業，那怎麼辦呢？
還是，看你有沒項目經驗
學校又不具備讓你做項目的能力，於是很多人進了培訓機構，這裡不對培訓機構做任何評價，但是切記，要多做項目、要動手、要實踐，光聽課沒有任何意義。
於是，這篇文章中列舉了一些項目，只要能真正的完成這些項目，相信就能夠勝任公司里前端的基本工作。
所以：學習前端開發＝做項目
我剛開始學編程也是一個人抱著書在圖書館猛看，結果完全沒有鳥用，為什麼有人在學校是一條蟲，而到公司就nb了？因為公司提供了學習環境，提供了項目，團隊，幫帶，因此學習第一位的是先找環境，而絕不是一個人看書，一方面看書沒用，另一方面一個人太孤獨了，打敗人的並不是挫折，而是孤單，所以第一位的是先找切入點，加入一個學習環境，先上車，再買票：）
所以，我建了個web前端純自助學習qq群：370423482 互助、刷項目、交友：）
看書沒用，看視頻也沒用，除了做項目，沒有其它方法
每一個環節都必須用項目來檢驗自己的學習成果
一 初級篇：HTML/CSS/JavaScript基礎知識
1.1 Html（視頻+文檔+項目）
視頻教程
imooc(全免費、全自學):HTML+CSS基礎課程-慕課網
網易前端微專業（1000+軟妹幣、有答疑、便宜、夠用）：前端開發工程師微專業
參考文檔
菜鳥學院（基礎、簡單）：HTML 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高，詳細）：MDN HTML Doc
項目
完成零基礎Html基礎編碼：百度前端技術學院
1.2 CSS（視頻+文檔+項目）時間：1周
視頻教程
imooc(全免費、全自學):HTML+CSS基礎課程-慕課網
網易前端微專業（1000+軟妹幣、有答疑、便宜、夠用）：前端開發工程師微專業
參考文檔
菜鳥學院（基礎、簡單）：CSS 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高，詳細）：MDN CSS Doc
完成項目
完成Htm/Css基礎編碼的所有項目：百度前端技術學院 - HTML/CSS所有項目
1.3 JavaScript初級(視頻+文檔+項目）時間：1周
imooc(全免費、全自學):JavaScript入門篇-JavaScript入門視頻教程-慕課網
網易前端微專業（1000+軟妹幣、有答疑、便宜、夠用）：前端開發工程師微專業
參考文檔
菜鳥學院（基礎、簡單）：JavaScript 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高，詳細）：MDN JavaScript DOC
完成項目
完成該頁面中的前三個項目：百度前端技術學院 - JavaScript
1.4 JavaScript高級(視頻+文檔+項目）時間：2周
imooc(全免費、全自學):JavaScript進階篇_JavaScript視頻教程-慕課網
網易前端微專業（1000+軟妹幣、有答疑、便宜、夠用）：前端開發工程師微專業
參考文檔
菜鳥學院（基礎、簡單）：JavaScript 教程 | 菜鳥教程
Mozila官方文檔（全E文、逼格高，詳細）：MDN JavaScript DOC
完成項目
完成該頁面中的所有項目：百度前端技術學院 - JavaScript
1.5 Web基本操作（純項目）時間：2周
Html/CSS/Javascript的內容到此學習完畢，剩下的之需要用項目來打磨，所以你需要完成頁面中直到任務7的項目：百度前端技術學院 - 所有課程
--------------------------------初級篇結束----------------------------------------
到此為止你就算入門了，已經稱的上是一名入門級的碼農了，夠簡單吧：）但離找到工作還有一定差距，本人qq：693605668 有問題的直接問俺吧，或者留言即可，方便俺更好的補充答案，請註明「web前端」。
說明：框架並不重要，你應該成為做框架的人，而非只會用。會框架說明不了什麼問題，本文只寫前端中最核心的知識點，相信會了這些核心，框架只是順手捻來。
-------------------------------------------------------------------------------------
二 中級篇：項目構建、實戰開發
到此為止，你就已經算入門了，但是還缺乏真正的項目，找工作看什麼？就是看項目經驗，沒項目人家可不會認可你，讓我們再補充一些項目相關知識吧。
2.1 Git操作
視頻教程：版本管理工具介紹-Git篇-慕課網
完成項目：自己照著視頻教程擼幾遍吧
2.2 Nodejs（不會Nodejs都不敢稱自己是前端仔：） ）
視頻
Nodejs教程1(node,grunt,restful,npm...)：進擊Node.js基礎(一)-慕課網
NodeJs教程2(node,grunt,restful,npm...)：進擊Node.js基礎(二)-慕課網
Mongodb視頻教程3：mongoDB入門篇_mongoDB入門視頻教程-慕課網
文檔
官方文檔非常棒（全E文）：Guides | Node.js
好吧，中文文檔 : ) ：Node.js 教程 | 菜鳥教程
mongodb: MongoDB 教程 | 菜鳥教程
完成項目
實戰德州撲克項目：百度前端技術學院 - 所有課程
到此為止你就能就行完整項目開發了，如果能吃透其中的代碼，就能找到工作。
------------------------------找到工作-------------------------------------------
到此為止還是只能找到工作，意思是雖然你的水平已經達到大眾水平了，但很不幸的說如果你是非科班出生，專業不對口，學校也一般，那你投100份簡歷可能找到1份工作，你只是分母，沒有達到前10%。
「要劫就劫皇糧，要嫖就嫖娘娘」 - by Jun.雷。下面這些才能確保你成為前10%的人才
-----------------------------------------------------------------------------------
三 中級篇（續）
3.1 設計模式
3.2 CSS模塊化
視頻
網易雲課堂：電商模塊化布局實戰視頻教程 - 網易雲課堂
imooc : 前端開發_Sass/Less入門基礎到高級教程_慕課網
文檔參考
sass: sass入門 - sass教程
less: Less 中文網
完成項目
沒找到好的，待之後更新。先跟著視頻擼吧 ：）
3.3 javascript組件化
寫的好點個贊哦，更多點贊，更強動力
頂! 就一個字
致謝，放到最後吧，免得說俺寫軟文：）
@袁少成 @祖明
第一 CSS篇
1. 2個小時的時間去看html & 2.4個小時的時間去看CSS 3.2個小時的時間，開始寫一個九宮格的小程序 4.2個小時的時間，去配置一下Nginx 5.4個小時的時間，去學習一下 px,em,rem和百分比。 6.2個小時的時候，學習一下Chrome的F12 7.花8個小時的時候去學習各種居中 8.花4個小時的時間去學習製作表單 9. 花4個小時的時間去學習製作導航欄 10.NND，忘了說了，在6條的時候就應該學會Svn或者是Git，去買一台伺服器，把自己的代碼放上去。 學習使用源碼管理工具。 11.花4個小時的時間去練習清除浮動 12.花2個小時的時間去學習PS的切圖。 13.花4個小時的時間去理解雪碧圖。 14.花8個小時間的時間去找一個PSD的源文件，然後去做出一個整站的完整頁面。 15.花8個小時的時間，去把這個頁面做成響應式的。 16.花16個小時的時間，將這個網頁的內容全部左右調換反轉。 17.花4個小時的時間去學習前端編碼規範和命名規則 18.花4個小時的時間去學習各種彈框 19.花16個小時的時間去學習一下Bootstrap 20花8個小時的時間去用Bootstrap把之前的頁面全部重寫。 21 花4個小時的時間同樣的把頁面元素全部左右反轉。 22.花8個小時的時間去學習Less，用Less來重寫你之前的任務 23.花8個小時的時間學習一下Flex布局 24.花48個小時的時間去完成一個完整的PC端 25.花48個小時的時間去完成一個完整的H5. 第二 JS篇 好吧，開始更新JS篇。 1.在CSS結束之前，準備學JS之後，就去看JS的基礎語法，推薦的哪本書我忘記了，修真院官網有。每天看1個小時，10天左右就差不多了。 2。JS語法的基礎部分，可以分成三大塊。第一部分 數據類型，變數 ，函數，控制項語句。預計30分鐘到60分鐘之內。 3。第二部分 Dom操作，先從簡單的input,div,label開始，不需要學會太多，知道不懂的去百度，學會讀和寫，預計30分鐘到2個小時之間。 4。第三部分，Ajax。學會Http的請求和響應，Json數據格式，非同步和同步，超時這些基本的概念。預計在4個小時到16個小時之間。 5。如果以上學的都不好，沒關係，知道不懂哪裡查就好。然後花2天左右的時間，實現九宮格隨機變換顏色。 6。再花5天的時間去實現一個簡單的殺人遊戲簡化版分配角色的規則，給一個框輸入總人數，然後依據殺人遊戲的規則給每一個人隨機分配角色。 未完待續
就學會&
就學會 color,position就夠了，花點時間看一下盒子模型
很簡單，用Div，畫出九個格子，心情好就隨便給點顏色
很簡單，配置好了之後就可以在PC上打開，也可以在手機上訪問了
確保不同手機屏幕下看到的九宮格比例不失調，學習一下自適應。
感受一下盒子模型，學習在F12下調試，看大小，更改值，看盒子寬度什麼的。
很簡單的表單，登錄註冊就行，學會Placeholder.
檢查自己的命名，樣式是否能夠勝任PM異想天開的思路。
不要謝我~~~，不要放棄~~~
在完整APP的遷移之後，終於可以好好寫這些內容了。第一篇就是對之前的《前端技能圖譜》進行一些細緻的解釋。當然這些是個人的經驗，所以可存在一些區別，不過總的來說還是差不多的。
入門
在我理解下的基礎知識，就是我們可以寫一些基本的樣式，並能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個博客，然後我們可以用jQuery來對頁面進行一些簡單的操作，並可以調用一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事，這需要很多實戰經驗。隨後，我們還需要有JavaScript的經驗，要不怎麼做前端呢？
同時，我們還需要對DOM有一些基礎的了解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。
中級篇
中級篇就更有意思了，現在我們就需要對頁面進行更複雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠程獲取最新的數據結果。並且我們也需要提交表單到伺服器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。
除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令行這類工具。並且，在這時候我們已經開始構建單頁面應用了。
高級篇
JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，現在人們有了ES6、TypeScript和WebPack來做這些事。儘管現在瀏覽器支持不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對於某些瀏覽器來說也是不支持的。而這些都是基於語言本來說的，要寫好代碼，我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。
工程化
這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是只使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，可以幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，並生成測試覆蓋率的報告等等。這一切都需要你有一個自動構建的工作流。
兼容性
雖然我們離兼容IE6的時代已越來越遠了，但是我們仍然有相當多的兼容性工作要做。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不同的操作系統上對同一瀏覽器的測試，某些情況下可能表現不一致。如不同操作系統的字體大小，可能會導致一些細微的問題。
而隨著移動設備的流行，我們還需要考慮下不同Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不同版本問題，常見於IE。。
前端特定
除了正常的編碼之外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，可惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得準備四種不同類型的字體文件。因此，產生了一種東西SVG Sprite，在以前這就是CSS Sprite，只是CSS Sprite不能縮放。最後，我們還需要掌握一些基本的圖形和圖表框架的使用。
軟體工程
這一點上和大部分語言的項目一樣，我們需要使用版本管理軟體，如git、svn，又或者是一些內部的工具。總之你肯定要有一個，而不是 2016.07.31.zip這種文件。然後，你還需要一些依賴管理工具，對於那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來說，npm還是挺好用的。不過就個人來說，對於傳統的項目來說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件，才能使其他人更容易開始項目。
調試
作為一個工程師來說，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——如果你使用過的話。在調試的過程中，直接用Console就可以輸出值、計算值等等。如果你的項目在構建的過程中有一些問題，你就需要debugger這一行代碼了。
在一些調用遠程API的項目里，我們還需要一些更複雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可以讓我們看到是否有一些異常的請求。當然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對於移動網站來說，還要有Responsive視圖。
測試
我遇到的很多前端工程師都是不寫測試的，於是我便把它單獨地抽了出現。對於一個前端項目來說，正常情況下，我們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否可以跳轉。對於依賴於第三方服務的應用來說，還要有一個Mock的服務來方便我們測試。如果是前後端分離的項目，我們還需要有集成測試。
性能與優化
要對Web應用進行性能優化，可能不是一件容易的事，有時候我們還知道哪些地方可以優化。這時候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，如有沒有開啟GZip、有沒有壓縮、合併、Minify JS代碼等等。
我們還應該藉助於NetWork這一類的工具，查看頁面載入時，一些比較漫的資源文件，並對其進行優化。在一些情況下，我們還需要藉助如Chrome的Timline、Profiel等工具來查看可以優化的地方。
設計
前端工程師還需要具備基本的UI技能。多數情況下拿到的只是一張圖，如果是一個完整的頁面，我們就需要快速分割頁面布局。而依賴於不同的頁面布局，如響應式、網格、FlexBox布局也會有不同的設計。而有些時候，我們就需要自己規劃，製作一個基本的線框圖（Wireframe）等等。
SEO
如果以搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是我們考慮的內容，而我們還要考慮很多點。首先，我們需要保證頁面的內容是對於搜索引擎是可見的，並且對應的頁面還要有基本的Title、Description和Keyword。然後在一些關鍵的字體，如欄目標題等等可以用H2之類的大字的地方就不要放過。同時在頁面設計的過程中，我們還需要考慮一些內部鏈接的建設。
它即可以提供頁面的可見度，又可以提高排名。最後，如果你是面向的是Google等支持結構化數據的搜索引擎，你還需要考慮一下MicroData / MicroFormat這一類東西。
大家都是從小白走過來，每個人的軌跡不一樣。冒昧說一下個人看法
自學
如果有耐心的話，可以看看w3cschool的教程w3school 在線教程
下面標紅的地方，可以按照順序看看。
but....
我知道多數人肯定沒有耐心一個一個看下去，而且看完這些確實也比較累。
最主要的是，很多知識點不一定就在工作中比較頻繁的運用到。一般來說，咱們前端工程師遇到不懂的小問題，通過查查手冊也可以解決。
看學習視頻
如果想比較直觀的學習，其實看視頻是一件比較快的方式。（我本人是這樣的，喜歡看視頻）
慕課網有比較多的免費視頻可以入門前端開發_web前端開發
但缺點也比較明顯，就是慕課網的體系不是按照一套完整的課程體系來的，多數是具體的案例拆解的。
再一個因為講師比較多，這個是優點也是缺點。學生找到一個自己喜歡的講師可能需要費點功夫。不過作為入門是足夠了。
學習論壇
如果遇到不懂的問題可以去論壇提問，w3cfuns 前端網（W3Cfuns）是一個不錯的地方，又很多朋友分享案例，替你解答問題。
大牛博客
還有一些大牛的博客可以關注下：
阮一峰 阮一峰的網路日誌
張鑫旭 首頁 ? 張鑫旭
大漠 w3cplus_引領web前沿，打造前端精品教程
上面都是很優秀的前端博客、建議題主可以好好看看。
關於報班
如果自學比較費勁，其實找一個培訓機構倒也是一個好事。至少來說，培訓機構總結整理了一套完善的課程體系，讓學員學習起來比較系統。可以監督跟進學員的學習情況。包括一個學習氛圍。
不過不得不承認現在的培訓機構魚龍混雜，需要學員擦亮眼睛。
再一個，請大家不要過度迷信培訓機構，那些號稱包就業、包學會的機構...多數都是騙人的。對，騙紙...（希望不要被拍磚）
我們都知道能不能學會一項技能，多數都是靠學生自己的努力。優秀的講師，優秀的課程只是一個輔助作用。作為培訓機構能做到不誤人子弟，不傳遞錯誤的知識，如果再能有一些責任心，這樣的機構就很不錯了。
最後，附上一張學習圖譜，給需要的朋友參考一下：
前幾天給初學者理的一個圖：
另外可以加入我的live（前端開發者成長之路）歡迎上車圍觀
http://zhuanlan.zhihu.com/p/23538432
知乎專欄
帖個鏈接，然後走人~
Web前端工程師
給慕課網點個贊吧，確實幫了我很多；
2016.11.02更新
好了，手把手的前端學習教程來了，會逐步更新，想要入門前端的同學照著這個教程來學習應該可以省下很多時間，少走很多彎路。
目前已經更新到了第三篇
思辨學院 大前端課-基礎-1 環境工具 - 思辨老白 - 知乎專欄
思辨學院 大前端課-基礎-2 HTML 上 - 思辨老白 - 知乎專欄
思辨學院 大前端課-基礎-3 HTML 中 - 思辨老白 - 知乎專欄
=================================
以下為原答案：
作為一個曾經的前端RD和TL，現在的教育工作者，我覺得我能回答這個問題。
前端是一個看似入門門檻不高，但要學好很難的領域。前端的知識體系龐雜又鬆散，技術演進快，如果摸不清脈絡的話很容易陷入盲人摸象的困境甚至跑偏。
其實只要掌握了正確的方法，學習前端和學好前端就只是個時間問題，希望下面的回答對題主有所幫助。
1.梳理清楚知識體系框架
學習前端，不管是入門還是進階，一定都要有知識體系建設的想法。就算是剛開始學，也一定要有這樣的意識。前面說過，因為前端知識點多而分散，所以如果不能構建起自己對於前端的知識體系框架的認識，很容易就會不知所措，沒了方向。
現在網上關於前端知識體系的腦圖很多，但是往往過於複雜，不適合初學者。作為一個初學者，每個人都應該自己做一份自己的前端知識體系腦圖，先有一個最基本的框架，然後在學習的過程中慢慢完善。
這樣通過和別人腦圖的對比，你也很容易知道還有那方面的知識是需要補充完善的。
這裡我給出一個簡單的模版，其實作為一個剛入門的前端新人，有這樣的大框架已經完全夠用了，不用追求大而全，學習的畏懼心理也會小很多，隨著你學習的深入，這個腦圖也會慢慢豐滿起來。
這樣看起來是不是清爽很多？
2.準備和基礎的學習
要開始的時候做一些基礎工作還是必要的，比如選一個自己喜歡的編輯器啊，比如科學上網啊，比如怎麼高效的使用搜索引擎啊，比如git啊，比markdon語法啊，這些東西都可以大幅度提升你的學習效率或編程的幸福感，所謂磨刀不誤砍柴功，你也可以把這些東西記在你的腦圖裡。
接下來你就可以開始學習基礎知識啦。HTML，CSS，Javascript這三樣真的很重要，真的很重要，真的很重要，剛開始的時候你壓根不用去管那些花里胡哨的框架，一定要把基礎打好。框架再怎麼更新迭代，最基礎的東西還是這三樣，只要你能掌握好基礎，就等於拿到了打開前端世界的鑰匙。
不管你的前端學習到了哪個階段，對基礎知識的好奇心一定不能斷，這裡面有太多細碎的知識點，每一份spec都又臭又長，就算你已經工作兩三年，這裡面肯定都還有你不知道的東西。
好了，到這個時候你的知識體系腦圖差不多應該長成這個樣子了：
進行到這裡的時候其實又有一個坑，很多人到這兒的時候就一頭扎進去去看裡面的具體內容了，比如去看各種標籤的屬性用法啊，去看選擇器啊，這就是比較典型的沒重視知識體系框架建設導致的盲目做法。
推薦的做法是什麼樣的呢？其實很簡單，就是再去細化這些知識點的層級，理清各個知識點的脈絡，從宏觀上先對這些知識的體系和框架有一個比較清楚的認識。
就拿HTML來簡單的舉例一下：
這樣把知識點的層級關係抽象清楚，對每個小的知識點合理分類，才能讓前端知識里那些龐雜的知識點形成體系。
現在你就可以去往裡面補充些細節的東西了，你可以在腦圖上用不同的顏色標出不同的優先順序，以便劃分學習的優先順序並方便以後review。
3.把學的東西用起來
每次學過一些小的知識點，都要想辦法把它們用起來，想清楚這些知識點的有哪些使用的場景，等到基礎知識學到一定程度了也可以反過來，先預先想好場景和要實現的功能，再去想在這些場景下面該用哪些知識，如果遇到了解決不了的問題和沒有學過的知識，去你的腦圖裡把它的位置搞清楚，寫出來。列入後續的學習計劃。
一定不要一直看，一直學，卻不在具體的場景里去用，你應該養成拿自己學到的東西做些東西解決些問題的習慣。不斷的做出東西，解決問題，不斷給自己正向的激勵，不斷的完善自己的知識體系，一定要讓自己有成就感。
今天就先說到這兒，以後如果有機會看需要再更新。也歡迎大家加我的微信公眾號：種貓得喵 一起討論。
不請自來，上面所有答案都沒有戳中要害，題主應該是要系統的學習前端三板斧(HTML CSS JavaScript)，關於HTML以及CSS的簡單應用建議題主直接看w3shool，HTML 5和CSS3建議買一本全面一些的書來系統的學習，這裡我就不推薦了，題主可以自行搜索一些評價比較中肯且全面的書籍！
關於JavaScript 這裡我推薦&<&
接下來是技術擴展，上面學的好這塊就非常快了，首先是jquery (一個js的工具庫)讓你省去很多不必要的工作，再就是VUE(一個MVVM 框架)，讓你把目前的開發工作做的更有逼格！
以上的東西都掌握了估計題主也算半個合格的前端了，接下來的前端技術擴展建議就是NODEJS + NPM+webpack +express 構建一些視圖層和控制層的操作，這都是後話了，上面的技術差不多已經夠你目前使用了，如果對後面的這些感興趣可以私我
上面有些東西使用了簡寫，若看不懂可以GOOGLE (需要免費的梯子可以用藍燈)，萬惡的百度去死吧！+_+
關於很多人推薦的慕課網，其實我不建議沒有系統學習過或者是沒有做過項目的人去看，上手難度還是有的，沒有基礎至少一半的課程聽不懂。但是如果你熟練掌握了上面我所說的前端三板斧，那技術擴展請你隨意按需發展即可！因為後面的路都是靠自己了！
^_^^_^^_^^_^^_^^_^割^_^^_^^_^^_^^_^2016-11-14更新
最近在看一本書叫&<&
裡面的內容全部是基於面向對象思想的，看了一部分，感覺我以前寫的es5代碼里的面向對象涉及到的只是其中一部分，還有很多種方式實現各種需求的面向對象，很值得一讀，其實主要還是各種模式的思想，其中的代碼都可以用ES6的class 關鍵字來實現，目前還沒看完，在此推薦一下
作者想下決心學前端，好吧，有個很合適的方法，就是。。。。拋棄工具，拋棄框架。什麼打包工具，編譯工具，MVVM，能不用就不用，能少用就少用，前端龐大的帝國是基於兩個基礎工具建立的，js和css，萬變都不離其中。很多前端優秀的工程師都是經歷過徒手爬代碼的階段，這很鍛煉基礎。。。以及體力。。基礎打好後就是思想問題，了解業內幾個標誌性工具，則會觸類旁通。
前端這幾年大發展了，當時入門的時候還是jQuery BootStrap的天下，頂多有點requireJS LESS 這類的工具，還好這幾年大發展的時候跟上了潮流，否則我都懷疑自己能不能再入門了。
個人觀點，雖然現在前端大發展了，基本的東西還是要學，這些東西 @張小河的答案已經講得很好了。
現在學習有一個巨大的困難，就是可能你找不到能接受你小白水平的項目給你練手，練手是很重要的環節，如果找不到外部的項目，就自己給自己找吧，比如做個Blog之類的，雖然沒用，練手更重要。
還有一點就是後端工程師轉到前端的時候，構建工具用的飛起，JSX 寫的也很溜，但是頁面里各種地方對不齊，縮放之後各種排版錯誤。一定不要重代碼輕布局，CSS還是很重要的我覺著吧，先把各大輪子（選自己感興趣的）的 TodoMVC 自己敲一遍，然後按自己想法擴展，盡量做到代碼優雅、用戶體驗佳，然後把一些大家耳熟能詳的動物書都看一遍，重點例子自己實現一遍。
就差不多可以做一些真實的項目了（工作的、私人的、接私單的，都可以），基本上後面就知道自己該怎麼繼續了。
前端作為程序員界入門門檻最低的方向，自學還是非常有希望能夠成功的。
因為你是自學，我有覺得自學成果有兩個要素：
- 自學能力（能把自己的問題總結出來，重複利用網路查閱資料，解決問題的能力）
- 恆心（自學容易懈怠，能時刻提醒自己，一直堅持下去）
如果這兩點都練就了，可以說不光是前端，任何領域你要想自學進去，都是可能的。
下面說說要學習的相關知識點：
- html+css 這些基礎沒什麼好說的，要非常熟才行
- javascript（閉包，原型鏈，繼承等要會，最好學點es6/7）
- 跨域，ajax（算是javascript的基本應用吧）
- Node.Js要懂點
- web compontent
- 一定的工程化工具和思想（什麼你說你GIT不會？瀑布模型不了解？）
- 一些前端中的邊角問題（瀏覽器兼容，移動端適配，響應式布局等）
點贊加關注，乾貨持續分享中
原文鏈接：前端知識庫-博客-雲棲社區-阿里雲
前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操作的基礎知識和一些基本工具和IDE。學習本篇，你將了解到以下知識。
核心 Core
HTML5
W3C http://www.w3school.com.cn/html5/
W3C https://www.w3.org/html/ig/zh/wiki/HTML5
菜鳥教程 http://www.runoob.com/html/html5-intro.html
HTML5中文門戶 http://www.html5cn.org/
CSS3
W3C CSS教程 http://www.w3school.com.cn/css/index.asp
W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html
菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
CSS參考手冊 http://css.doyoe.com/
JS
W3C http://www.w3school.com.cn/js/
菜鳥教程 http://www.runoob.com/js/js-tutorial.html
廖雪峰js教程 http://www.liaoxuefeng.com
js標準參考教程-阮一峰http://javascript.ruanyifeng.com/
jQuery
W3C http://www.w3school.com.cn/jquery/
菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html
極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
廖雪峰 http://www.liaoxuefeng.com/wiki/
參考手冊 http://www.css88.com/jqapi-1.9/
參考手冊 http://www.runoob.com/manual/jquery/
ES6
阮一峰ES6 http://es6.ruanyifeng.com/
極客學院 http://wiki.jikexueyuan.com/project/es6/
JavaScript 標準參考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html
插件
parallel.js: 前後端通用的一個並行庫
zepto: 用於現代瀏覽器的兼容 jQuery 的庫
totoro: 穩定的跨瀏覽器測試工具
TheaterJS: 一個用於模擬人輸入狀態的 JS 庫
stellar.js: 前端用於實現非同步滾動效果的庫，現已不再維護
skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相
Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序
regulex: 用於生成 正則表達式 的可視化流程圖
markdown-it: 新型 Markdown 解析器，快速，支持插件
multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc
screenfull.js: 全屏插件，支持各大瀏覽器
lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用
jquery.hotkeys: jQuery 插件，用於綁定熱鍵
breach_core: Javascript 編寫的 Browser (瀏覽器)
octocard: 用於生成 Github 信息卡片的庫
github-cards: 用於生成 Github 信息卡片的庫
money.js: 輕量級貨幣轉換庫，web 和 node 皆可用
accounting.js: 輕量級的數字、貨幣轉換庫
javascript-algorithms: Javascript 實現的各種演算法集合
lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升
seajs: 前端模塊載入器，解決模塊化、依賴等問題
jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫
js.js: Javascript 實現的 javascript JIT
jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大
todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫
localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的介面
EventEmitter: 瀏覽器版的 EventEmitter
jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據
knockout: 前端 MVVM 框架，用於開發富前端應用
mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法
js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法
flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品
zoomooz: jQuery 插件，用來處理瀏覽器縮放
fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方
mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React
backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好
jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等
jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條
onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8
scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好
ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果
infinite-scroll: 滾動載入，滾動到最下到自動載入， Paul Irish 大神之作
animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相
Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果
jquery-validation: jQuery 的一個插件，用於校驗 Form 表單
BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果
emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各種語言的二維碼生成工具
device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS
jquery-qrcode: jQuery 插件，用來生成二維碼
Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果
isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo
lazysizes: 功能強大的圖片延遲載入工具，可以首先載入一個低質量的圖片，然後再載入高質量的圖片
progressbar.js: 簡潔美觀的進度條，扁平化
pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網路服務
spectrum: Js實現的顏色選擇器 (Colorpicker)
jQuery.countdown: jQuery 倒計時插件
summernote: WYSIWYG 富文本編輯器
awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀
switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器
trix: Basecamp 公司出品的富文本編輯器，簡潔小巧
sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等
hyhyhy: 用於創建 基於 HTML5 的 演示文稿
swipebox: jQuery 插件，用於處理移動端的觸摸事件
FileAPI: 前端用戶處理文件（拖放、多文件上傳等）
Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery
Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬體加速
matter-js: 2D 物理效果引擎，碰撞、彈跳等
jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等
snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫
c3: 基於 D3 的圖表庫
echarts: 企業級圖表庫，百度開發
parallax.js: 一個用於響應智能手機 orientation 的庫
jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器
wysihtml: 富文本編輯器，適用於現代瀏覽器
slip: 一個通過滑動或者拖拽來操控列表的庫
evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持
PhotoSwipe: JS 的一個圖片展示庫
focusable: 是頁面上一個元素高亮的庫，有圖有真相
firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox
jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5
mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架
interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫
rebound-js: 實現部分物理效果，Facebook 出品
basket.js: 基於 LocalStorage 的資源載入器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存
iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的
metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 幾種 Loading 效果，基於 SVG
flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的
move.js: 基於 CSS3 的前端動畫框架
scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo
Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫
foundation: 另一款前端模版框架，類似於 Bootstrap
Flat-UI: Bootstrap 的一款主題，簡潔美觀
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb
slick: 功能異常強大的一個圖片滑動切換效果庫
SocialButtons: 漂亮的社交按鈕
sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫
web-animations-js: Javascript 實現的 Web Animation API
vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫
plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器
timesheet.js: 基於 HTML5 CSS3 時間表
slideout: 一個非常美觀的側滑菜單
包管理工具 Package Managers
NPM
菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html
淘寶 NPM 鏡像 https://npm.taobao.org/
npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
npm包搜索地址 https://www.npmjs.com/
Bower
Bower中文網 http://www.bowercn.com/
Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html
Yarn
yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理
YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/
編輯器 Text Editors
WebStorm
官網下載 http://www.jetbrains.com/webstorm/download
前端網破解版下載 http://www.qdfuns.com/tools
VScode
官網下載 https://code.visualstudio.com/
vscode 插件精選 - 獻給所有前端工程師https://segmentfault.com/a/1190000006697219
SublimeText
官網下載 https://www.sublimetext.com/
前端網破解版插件版下載 http://www.qdfuns.com/tools
SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言
Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding
SublimeLinter: 一個提供代碼質量檢測的插件
SublimeTmpl：快速新建指定的模版文件
Syntax-highlighting-for-Sass：sass代碼高亮插件
MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等
ApplySyntax: 輔助檢測語法插件
CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags
sublime-react: React 代碼高亮
Atom
官網下載 https://atom.io/
HBuilder
官網下載 http://www.dcloud.io/
JS框架 JS Frameworks
Backbone
Backbone.js API中文文檔http://www.css88.com/doc/backbone/
AngularJs
中文官方文檔https://angular.cn/
angularjs中文網http://www.apjs.net/
angularjs教程http://www.angularjs.net.cn/
Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html
angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流
angular-schema-form: 根據 JSON 生成響應的 Form 表單
restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource
ng-cordova: Cordova 常用組件的 Angular 版本
angular-translate: Angular 的國際化 (I18n)
ng-inspector: Chrome 插件，用於調試 Angular
angularjs-style-guide: AngularJS 代碼風格
ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components
material: Google Material Design 效果的 Angular 實現
angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級
angular-filter: 一組有用的 Angular Filters
bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能
React
英文官方文檔https://facebook.github.io/react/docs/hello-world.html
中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html
gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html
阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html
React Router 中文文檔https://react-guide.github.io/react-router-cn/
react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html
阮一峰Redux 入門教程http://www.ruanyifeng.com/blog
react: React 框架源代碼
react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架
react-hot-loader: 實時調整 React 組件效果
grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS
touchstonejs: 基於 React 的手機應用前端框架
essential-react: 基於 React, ES6, React-Router的一個應用腳手架
react-router: React 路由解決方案
Vue
vue官方http://cn.vuejs.org/
vuex官方http://vuex.vuejs.org/zh-cn/
vue-router官方https://router.vuejs.org/zh-cn/
UI框架 UI Frameworks
Bootstrap
最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/
Ionic
一款接近原生的Html5移動App開發框架 會html css js就可以開發apphttp://www.ionic.wang/
Foundation
Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com
FrozenUI
移動端服務的前端框架http://frozenui.github.io/
materializecss
基於Material Design的主流前端響應式框架http://www.materializecss.cn/
mui
最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/
AntDesign
和react配合的UI框架https://ant.design
eleme
和vue配合的UI框架http://element.eleme.io/
JS預處理 JS Preprocessors
TypeScript
TypeScript 入門教程 菜鳥教程http://www.runoob.com/
TypeScript中文網https://www.tslang.cn/
TypeScript教程gitbookhttps://www.gitbook.com/
CoffeeScript
CoffeeScript 中文http://coffee-script.org/
CoffeeScript 實用手冊 極客學院http://wiki.jikexueyuan.com/project/coffeescript/
過程自動化 Process Automation
Grunt
Grunt中文網http://www.gruntjs.net/
Gulp
gulp.js 中文網http://www.gulpjs.com.cn/
gulp詳細入門教程http://www.ydcss.com/
前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html
Gulp開發教程https://www.w3ctech.com/topic/134
模板引擎 Templating
Handlebars
handlebarsjs官網http://handlebarsjs.com/
Handlebars中文文檔http://www.360doc.com/content/
Handlebars.js 中文文檔http://keenwon.com/992.html
Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3
Haml
haml官方文檔https://github.com/haml/haml
haml入門http://blog.csdn.net/napoay/article/details/50491363
Jade
Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html
Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html
帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259
構建工具 Build Tools
RequireJS
RequireJS 英文網http://requirejs.org/
RequireJS 中文網http://requirejs.cn/
require.js的用法-阮一峰http://www.ruanyifeng.com/blog
seajs
seajs文檔http://seajs.org/docs/
SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u
Browserify
官網http://browserify.org/
githubhttps://github.com/substack/node-browserify/
Webpack
Webpack 中文指南http://webpackdoc.com/
webpack的實例http://www.vichily.com
webpack的入門http://www.vichily.com
一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764
CSS預處理器 CSS Preprocessors
Sass
sass入門http://www.w3cplus.com/sassguide/
sass參考手冊http://sass.bootcss.com/docs/sass-reference/
SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/
Less
less中文網http://lesscss.cn/
less快速入門http://less.bootcss.com/
stylus
stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/
基於樓主的情況，我給出以下學習路徑：
1 DIV+CSS 排版 ，從樓主的描述來看你對css的掌握七零八落，沒有系統的學習，我推薦一本神書 「精通CSS」 相信你看完之後會接觸80%的困擾
2 JS基礎 -&>jQuery ,能比較輕鬆愉快的發送ajax請求 已經處理請求返回的JSON數據
3 對responsive頁面原理的認知 理解CSS3中 media query的用法
4 理解以上1，2，3 ，Bootstrap就迎刃而解
前端是我發現目前最快，最容易有成就感的職業了。我的前端入門是抄一個新聞網站的首頁，審查元素，然後HTML和CSS一起抄，不懂就看w3c，然後堅持三天下來抄得七七八八，看上去和原來的幾乎看起來沒區別，別提有多高興。然後是做班級主頁，到接簡單外包，到實習。至於系統的學習在很之後了，犀牛書，紅皮書，偶爾看看慕課網，感覺有所得的時候趕緊敲點代碼例子或者寫點博客免得忘了。就是這樣，從最簡單，最容易有成就感的地方做起。讓成就感推動前進。
第一步：入門 html css ，用時 2 周
Head First HTML與CSS（第2版） (豆瓣)
head first 系列的書一直很受初學者歡迎，語言詼諧，圖片豐富，行大字稀，這本 700 多頁的書 2 周左右就能看完。此書的用法非常簡單，只需打開代碼編輯器跟著作者的思路敲下去就可以了，一個個小案例從自己手上被敲出來，還真的很有成就感呢，因為是寫給初學者的書，它假設讀者沒有任何相關的背景知識，新碰到的知識點，會用各種各樣的圖片說明一遍，生怕讀者不懂。這本書學完，只要不是太複雜的頁面，基本上能夠臨摹出一套長相上差不多的了吧。
第二步： 入門 javascript ，用時 3 周
JavaScript DOM編程藝術 （第2版） (豆瓣)
這本書很薄， 280 多頁，一開始看的時候，其實我是拒絕的，因為當時我的編程基礎只有能夠用 c 寫出讓別人輸入兩個整數然後列印出這兩個數相加結果這種程序的水平。然而即便如此，這本書依然能夠讓我看得懂。此書前言的第一句就說了，「它不是專門寫給程序員的，而主要是寫給 Web 設計師的。具體的說，本書是為那些喜歡使用 CSS 和 HTML 並願意遵守編程規範的 Web 設計師們編寫的。」好吧，雖然也不是寫給我這種初學的傻子的，但反正只要它不是寫給程序員的就好，因為當時我不是程序員啊，當然我也不是設計師，但我會寫一丁丁 HTML 和 CSS ，這就夠了。這本書跟上本書一樣，新碰到的知識點，會專門用案例介紹一番，讓人在不帶著太多疑問包袱的情況下跟著作者的思路走，用法也跟上一本書一樣，跟著作者的思路用編輯器一路敲下去，然後你會發現，自己能夠給網頁加特技了，duang~duang~ 棒棒的。
第三步：入門 jQuery，用時 3~4 周
鋒利的jQuery (豆瓣)
這本書只需要看 1-9 章就夠了，也就是 290 頁左右的內容。看完 《JavaScript DOM 編程藝術》 可能會覺得裡面的程序很繁瑣，想要達到一些目的經常需要拐來拐去的。那麼 jQuery 會解決這種繁瑣，做到它所標榜的 write less, do more ， 也因此 jQuery 成為了幾乎所有前端工程師必須要掌握的一個工具。這本書的內容有些啰嗦和跳躍，後面幾章甚至還有錯誤，不過有上一本書的作為基礎，配合搜索引擎是能夠解決看著本書時碰到的絕大部分疑問的。打開編輯器跟著作者的思路把書上的例子都敲出來跑一遍，另外把最後的案例吃透。 jQuery 就算是入門了。
最重要的一步：複習鞏固，用時 6~12 周
OK 至此， 入門學習已經完成，接下來是複習鞏固，這才是學習的真諦。這一步，不能省略，不能省略，不能省略，重要的事情說三遍，否則會像一個學習了各種格鬥技巧，但卻廋得皮包骨連站穩都吃力的人一樣毫無戰鬥力。此時可以用之前所學配合著搜索引擎模仿一些自己認為覺得好看的頁面，學習使用一些第三方插件，大量模仿。無他，唯手熟爾。
這裡列出一些在這個階段有可能會用到的工具書和一些網路資源，希望能有所幫助。
湊巧我這學期選了 Viterbi 的 CSCI 571，這門課會把前端所有必要的基礎知識全過一遍，課程的網址是 http://cs-server.usc.edu:45678，大綱如下：
HTML
CSS
XML
JavaScript
DOM
表單處理
HTTP
PHP
Cookies
響應式布局，Bootstrap
Ajax
JSON
JQuery
FireFox Firebug
JavaScript 框架，Node.js、Angular.js 等
Web APIs
網站性能
網路安全
iOS/Android/WP 應用開發
課程網站上有非常非常詳細的資源，每節課都還提供了 http://Lynda.com 上相應的視頻，說實話我就是主要靠看視頻和網站的各種鏈接來學這門課的，老師本人講的反而並不怎麼樣（逃
如果題主有興趣的話，不妨來看看：）推薦閱讀：
※HTML5 有哪些讓你驚艷的 demo？
※有哪些不錯的前端開發博客？
※為什麼不能在 EDM 模版中使用 DIV ？
※零基礎的前端開發初學者應如何系統地學習？