前端需要學(xué)習(xí)的知識，下面已經(jīng)列舉出來了，你可以照著這些階段去學(xué)習(xí)。

建議你先去b站看看超哥的視頻，免費的全套視頻和代碼，你先跟學(xué)者，如果遇到問題很多，或者自控能力不好，你再考慮去機構(gòu)培訓(xùn)學(xué)習(xí)。

新手怎么快速學(xué)習(xí)web前端技能？這個問題是剛開始學(xué)習(xí)web前端開發(fā)的朋友都會想問的，開始的時候沒有人帶你和有人帶你是不一樣的，各有利弊吧，沒有人指導(dǎo)的話會苦逼一點，但是可以鍛煉出很強的學(xué)習(xí)能力，有人指導(dǎo)的話可以少走一些彎路，但是容易養(yǎng)成依賴別人的習(xí)慣，影響?yīng)毩⑺伎嫉哪芰Α．?dāng)然我是屬于參加前端培訓(xùn)學(xué)習(xí)的，在這分享一下我的web前端學(xué)習(xí)的經(jīng)驗吧。

在學(xué)習(xí)之前，首先要搞清楚，web前端工程師需要掌握哪些技能才算得上是web前端工程師？比如我在學(xué)習(xí)前端技能之前，先制定一個學(xué)習(xí)計劃，先看一下招聘網(wǎng)上的招聘web前端的崗位要求什么技術(shù)，先記下來，里面的技術(shù)要求都是最新的技術(shù)要求。

學(xué)好上面的基礎(chǔ)知識，然后就是學(xué)習(xí)各種框架了，比如最近比較流行的vuejs框架，還有angular和react，我建議先學(xué)好一種，理解其中的原理和思想，到后面學(xué)習(xí)其他的相對簡單一點。jquery框架是最多人用的前端框架，當(dāng)然也要掌握，學(xué)習(xí)它也比較簡單。css框架也要掌握至少一種吧，比如sass，less，stylus等等，用的比較多的還是sass和less吧。還有精通頁面布局，css樣式調(diào)整，深刻理解web標(biāo)準(zhǔn)，對可用性，可訪問性，結(jié)構(gòu)與表現(xiàn)分離等等相關(guān)知識也是必須的。

當(dāng)然也需要精通熟悉bootstrap，font awesome.js等前端基礎(chǔ)庫，熟悉大規(guī)模的web應(yīng)用開發(fā)，網(wǎng)站性能優(yōu)化和代碼規(guī)范。當(dāng)然如果使自己更加充實，就學(xué)習(xí)一門服務(wù)器腳本語言，儒nodejs/php/java/python等，個人感覺nodejs更接近前端一點，它是前后端分離的框架。學(xué)習(xí)一本后端語言也是一個加分項，也是為了以后的全棧和架構(gòu)師之路也是必須的，如果你向產(chǎn)品經(jīng)理發(fā)展那就另當(dāng)別論。

針對于新手，最好是建議去一些web前端培訓(xùn)機構(gòu)學(xué)習(xí)吧，會有比較專業(yè)的導(dǎo)師教你入門，為你制定比較適合你的學(xué)習(xí)計劃，這樣學(xué)習(xí)起來也比較快。

學(xué)習(xí)資源網(wǎng)上一大把、多關(guān)注前端的系統(tǒng)性才行。零散的學(xué)習(xí)可能會讓人越學(xué)越懵逼。我的同學(xué)們都是自學(xué)的前端、從啃紅皮書到鋒利的jQuery、再到CSS、NodeJS等等都是基于前端的知識圖譜、然后針對性的對癥下藥。最后百度、去哪兒、美團、阿里都有人去了。當(dāng)然、刷面試題也是一個好的發(fā)現(xiàn)問題的方法。只是說前提是心里有一個前端大概的輪廓、然后基于這個大概的輪廓去發(fā)現(xiàn)解決問題。

其實、我不太建議去看前端的學(xué)習(xí)視頻、感覺視頻講的都過于淺顯、沒法深入到問題的本質(zhì)、特別是前端都是寫一個簡單的demo、看完了也沒啥效果。慕課網(wǎng)、黑馬程序員什么都差不多（黑馬的后端講的還不錯）。所以我的建議是、多去動手實踐、親手敲敲代碼、遇到問題去stackoverflow上查查、多逛逛github、基于它去深入了解問題背后的原理。

還有一個好的習(xí)慣是善于總結(jié)、遇到問題是必定的、但每次遇到同一個問題都需要花費同等的時間去解決就是問題所在。這也是程序員應(yīng)該重點關(guān)注的。在還沒開始工作之前、前面講的同學(xué)都在寫博客、雖然只是課本內(nèi)容的自我轉(zhuǎn)述、但這種方式對于知識點本身的把握程度絕對是無可替代的。所以、我對于學(xué)習(xí)資源的定義分為以下幾種、重要性由深入淺：

1）專業(yè)書籍：把握系統(tǒng)性、深入性的不二之選

2）外文網(wǎng)站：github、stackoverflow、medium、google開發(fā)者網(wǎng)站

3）國內(nèi)網(wǎng)站：jobble、知乎問答等