更新

但是實際項目到底什么東西使用頻率高這也是因業(yè)務(wù)而已的，所以還是先自己多練習(xí)，如果是自己個人發(fā)展，那就做個個人博客之類的東西，這里面有很多東西了；如果是已經(jīng)入職，那么還是以公司業(yè)務(wù)要求為主，平時多積累業(yè)務(wù)代碼，找找設(shè)計模式等等在業(yè)務(wù)代碼中的體現(xiàn)還有嘗試做自動化（比如你作業(yè)列表里 WEBQQ 那個的列表全是硬編碼, 可以嘗試用 js 去自動生成那些列表）。

原答案

學(xué)到什么程度 這種詞給我的感覺就是：我不打算費太多時間去學(xué)習(xí)這個東西

其實很簡單：覺得不會就去學(xué)、覺得用得上就去學(xué)、老板要求就去學(xué)。

最后你會發(fā)現(xiàn)條條大路通羅馬。

前提是你的有效代碼量足夠多，多親手做做書上的例子，也可以看看 MDN 的規(guī)范，當(dāng)你代碼量到一定程度了，你就知道自己什么方面不足需要去學(xué)習(xí)了。

JavaScript高級程序設(shè)計好好看看
設(shè)計模式學(xué)一下
jq看看就行了
react、vue這種框架學(xué)一下
webpack
less/sass
mvc、mvvm了解一下
nodejs也可以去了解一下

githut上有好多對應(yīng)的項目 好多可以學(xué)的O(∩_∩)O

個人建議，不要一味的死學(xué)，知識是無窮無盡的，但是源頭千篇一律，所以說，不一定要會太多的東西，但是一定要精通，到那時候你無論上手什么都會發(fā)現(xiàn)很簡單。多看看實戰(zhàn)項目，多做，一定搞懂了再去研究下一個，還是那句話，貪多嚼不爛。

基礎(chǔ)為重中之重，不管是 CSS 還是 JavaScript，有了基礎(chǔ)，你往上爬的時候，你會覺得很輕松。我一開始學(xué)前端的時候，很喜歡這個東西，但是不太靜得下心來，去擺弄這個基礎(chǔ)的東西，比如說 JavaScript，看 API 文檔，看著看著好像，就這么看完了，但是好像看跟沒看一樣，我也知道基礎(chǔ)重要，但是自己就是滅法靜下心來，下定決心去攻破這個東西。心里就很慌，看什么都覺得看不下去。

后來我覺得這樣下去不是辦法，我就用了一個月的時間，只看 js 基礎(chǔ)，每個概念都研究透，把筆記做透，反正一定要懂，直到自己對概念完全爛熟于心，完全能用自己的思路說出個所以然，各種基礎(chǔ) api 也都記得。

你都不知道那時覺得多開心，就像自己擁有了一件兵器一樣，我可以去攻破更多的東西，比如 框架，比如 Node。
你做的那些東西，我不能說不重要，畢竟一開始接觸前端，也是因為想做一些小玩意，但是你現(xiàn)在不應(yīng)該還停留在這個階段了，你需要的是，攻破基礎(chǔ)。

我給自己設(shè)計的 js 之路的幾個點就是：基礎(chǔ)，性能，設(shè)計模式，可維護(hù)，安全

而 CSS 的基礎(chǔ)，推薦看張鑫旭的 慕課視頻，可以加深自己對很多 樣式現(xiàn)象的理解，看完豁然開朗。

最后說一句，有了基礎(chǔ)，走遍天下都不怕。

實際工作很少寫什么動畫，遇到了也是網(wǎng)上搜一下改一改。建議找個實戰(zhàn)課程完整的跟下來看看企業(yè)實際的工作內(nèi)容是什么樣子，或者上github上找項目練習(xí)，但是不推薦，新手分辨不了什么項目適合自己。

感覺你這樣學(xué)知識比較零散，一般學(xué)完也不知道用在哪里，體會不深，忘得快。

建議上來就是干.

1. 先找一個完整的jq項目模仿著做，項目配置全copy，只寫業(yè)務(wù)邏輯。要找那種包含登錄注冊的項目。什么ajax，css布局，dom操作，對象，數(shù)組，存儲都邊寫邊學(xué)；
2. 找一個vue項目做，比如github上star比較多的ele-admin，iview-admin，也是配置全copy，業(yè)務(wù)邏輯邊抄編寫。

本來這種說話很多的答案我是不想答的，因為我表達(dá)能力賊差。
不過題主你遇到的問題我在開始學(xué)習(xí)的時候也遇到過，而且困擾了我很長時間。特別能理解那種有一顆往死學(xué)的心，但不知道往哪個方向?qū)W的感覺。

前端其實圍繞著三大塊，html、js、css，想必你看過基礎(chǔ)，對這三部分不會陌生。

1. 首先說HTML，這是前端頁面骨架所在，其實只要了解常用的標(biāo)簽暫時就可以了，比如div、span、表單元素等。做到看到原型圖你心里有數(shù)哪個地方需要用哪些元素，看見原型上的表單可以直接搭出來，這其實就可以了。另外要知道什么是塊級元素、行內(nèi)元素，這里你應(yīng)該也懂了。其他的不常用、帶有語義化的元素，可以放到后面看。
2. 再說js，這是前端邏輯所在，至關(guān)重要，不僅不能放棄學(xué)習(xí)它，只要你一天從事前端或js相關(guān)工作，你就得學(xué)一天。但對于題主你的階段來說，建議將紅寶書(JavaScript高級程序設(shè)計)或犀牛書(JavaScript權(quán)威指南)其中一本學(xué)一遍。先粗學(xué)，了解大概，照著demo做，詳細(xì)的東西不理解不用非要弄明白，記下就好。而后你對js就有了一定的了解，可以實現(xiàn)簡單的東西了。然后再將前面的書看幾遍，你會發(fā)現(xiàn)每一次你都能看到新的內(nèi)容，對js有新的理解。

3. css，前端的"面子"，這部分其實我也很弱，給出的建議就是先看基礎(chǔ)，而后模仿。css令人頭疼的是它不像js，賦值就是var a='hello'，函數(shù)就是function。而對于樣式來說，一個UI，css可以用多種不同寫法實現(xiàn)，而它并沒有標(biāo)準(zhǔn)答案的唯一解。雖然我對css懂得不多，但是目前也制定了一些學(xué)習(xí)思路。

   • css樣式基礎(chǔ)屬性
   • 布局(兩欄布局、三欄布局、table布局、flex布局等，垂直居中、水平居中等)
   • 模擬(去網(wǎng)上搜索好看的組件demo，自己實現(xiàn))

關(guān)于庫、框架、工具

1. jQuery建議首先會用、了解API。以后想深入學(xué)習(xí)前端時可學(xué)習(xí)源碼。
2. 框架，現(xiàn)在并駕齊驅(qū)的三大框架React、Vue、Angular不建議立刻學(xué)習(xí)。對html、css、js、jQuery有所了解后建議挑選Vue進(jìn)行了解，因為Vue中文文檔簡單易讀、可調(diào)試文檔、生態(tài)較豐富。而后對比三家選取所需。
3. 工具，webpack這些就不著急看了，先把基礎(chǔ)打好，而后需要用到工具的時候你自然會找到他們并學(xué)習(xí)。nodejs也是一樣。

寫的比較亂，總結(jié)就是HTML、JS、CSS是基礎(chǔ)，基礎(chǔ)要打好，而后你自然會需要用工具，此時了解jQuery，再然后了解組件化，用到框架及nodej/npm，自然就會用到webpack了。
其實工具神馬的，只是個輔助手段，最終的目的，還是HTML、JS、CSS，所以不要放棄對這仨貨的學(xué)習(xí)，把這仨貨當(dāng)作基礎(chǔ)，向上延伸學(xué)習(xí)的思路因該錯不了的。

祝學(xué)習(xí)順利。

這種問題你可以去知乎、貼吧搜搜，應(yīng)該都有，推薦一個github前端資源倉庫。

另外這個問題，還要看你的狀態(tài)，比如如果你是一個大學(xué)生，出于興趣學(xué)習(xí)，建議你先打牢固js基礎(chǔ)吧，《javascript高級程序設(shè)計》的主要章節(jié)先看一遍，期間找些項目練習(xí)，推薦freeCodeCamp，之后再學(xué)jQuery，幾大框架，構(gòu)建工具之類的。

如果你要學(xué)完找工作，大體也是這樣，不過時間可能比較緊，《javascript高級程序設(shè)計》至少把前8章的基礎(chǔ)部分看了。

首先 js基礎(chǔ)一定要弄懂，原型鏈 面向?qū)ο笏季S，甚至閉包 . 這些都是面試大廠主要問題.

其次 jq這個東西 怎么說呢 雖說實際開發(fā)用處并不多 （至少我目前是這樣 一般都原生寫）但你還是要懂得

然后 數(shù)據(jù)交互這一塊 要懂 要會 ajax要學(xué)

再然后就是一些框架 但是你要記住框架只是輔助你快速開發(fā) 框架的底層原理說白了就是js. 所以要把基礎(chǔ)做好

至于前面答案提到的 git webpack等 其重要性肯定是上列之后的，一些其他的 每個公司技術(shù)棧 所用的工具也大不相同 還是要看公司的業(yè)務(wù)來決定.