多同學(xué)想學(xué)習(xí)WEB前端開發(fā)，不過面對大量的前端學(xué)習(xí)資料(視頻教程、網(wǎng)上教程、書籍)等，不知道從何處下手。

作為一個多年從事前端開發(fā)的程序員，為了讓新手程序員少走點彎路，這里就分享騰訊前端大牛快速學(xué)習(xí)前端開發(fā)的經(jīng)驗：

一、前端學(xué)習(xí)思路

前端學(xué)習(xí)存在一個普遍的問題：感覺編程語言死氣沉沉，代碼枯燥乏味，很多人覺得學(xué)不下去，或者認(rèn)為不好學(xué)。出現(xiàn)這樣的情況，無非是學(xué)習(xí)編程的思路不對頭!

首先來談?wù)勄岸藢W(xué)習(xí)的思路。個人看來，前端的學(xué)習(xí)如果思路不對，你學(xué)習(xí)的過程會非常掙扎和痛苦，最后發(fā)現(xiàn)到頭來學(xué)得一頭霧水。

我的經(jīng)驗是，帶著目的和解決問題的心態(tài)，以生活中的類比來學(xué)習(xí)編程，就非常有趣，也會變的不難。

前端學(xué)習(xí)大體分三個部分：html、css、javascript。首先應(yīng)當(dāng)用生活的類比熟悉這些概念。

比如學(xué)習(xí)html，你可以把它當(dāng)做設(shè)計這房子的整體結(jié)構(gòu)。頭部(head)，中部(body)，底部(foot)就像是房子的屋頂，房間，地基。

學(xué)習(xí)css，就像是給房子做裝修，墻壁刷成什么顏色，選擇什么樣的瓷磚裝飾房間。

學(xué)習(xí)javascript，你可以把他當(dāng)成是各種互動的開關(guān)控制，比如按某個按鈕，可以控制電視開關(guān)換臺，或者控制燈光。

二、有趣化的編程體驗

對于一名前端開發(fā)的初學(xué)者而言，有趣的編程學(xué)習(xí)方式會讓你更快掌握前端開發(fā)。因為有趣的方式意味著樂此不疲地學(xué)習(xí)。

入門階段，我所使用的前端開發(fā)編程教程都是用w3cschool網(wǎng)站https://www.w3cschool.cn/。這主要也是我大學(xué)的計算機老師推薦的，因為w3cschool比較老牌，官方，注重實戰(zhàn)，上面的課程非常適用于初學(xué)者。

在w3cschool網(wǎng)站上，除了有比較詳細(xì)的講解之外，還有大量的實例實戰(zhàn)。

我的方法是，采用循序漸進的方式，比如對于“創(chuàng)建一個畫布(Canvas)”，我會按照w3cschool官方網(wǎng)站提供的實例，將代碼從頭到尾敲一遍。因為編程最重要的就是動手能力!

前期為了入門，我主要還是學(xué)習(xí)了w3cschool網(wǎng)站上html、css、javascript這三套基礎(chǔ)教程(現(xiàn)在在學(xué)進階教程)，在這里要說明一點，一個問題沒有弄懂不要跳著學(xué)下面的東西，不然你后面要填很多坑。

前期最主要還是循序漸進，將代碼都過一遍，當(dāng)你打下堅實的基礎(chǔ)，對后面的面試也很有幫助。

當(dāng)然，代碼有時候敲累了，我玩玩w3cschool app前端的微課。微課采用了邊學(xué)邊練的模式，類似于游戲化闖關(guān)的模式，我只是把它當(dāng)做游戲來玩，不停地刷副本。

個人比較喜歡上面的積分獎勵，因為w3cschool官方做了一個積分排行榜，這可以激勵我每天做大量的編程練習(xí)，查看積分排行榜是否出現(xiàn)我的名字。

另外，新手的前端程序員仍然需要積累一些感性經(jīng)驗，通過視聽覺來理解前端知識，所以建議可以使用慕課網(wǎng)看一些前端的視頻教程。

看視頻要做兩件事：其一是弄懂視頻里所講的每一個知識點，一遇到含糊不清的問題，直接記錄下來。其二是用思維導(dǎo)圖記錄要點，不然你下次再看教學(xué)視頻就得從頭再來，整條視頻播放。

三、視頻課程推薦

在這里不得不提到慕課網(wǎng)的前端視頻課程。就拿HTML+CSS基礎(chǔ)視頻課程來說，采用了通俗易懂的方式講解了理論。視頻課程主要濃縮了前端開發(fā)的一些重點以及一些核心的概念，我們直接去透徹理解并掌握核心概念，就相當(dāng)于走了捷徑。

四、談?wù)劽嬖嚹切﹩栴}

前端的學(xué)習(xí)經(jīng)驗大致就這些，由于基本功比較扎實，大學(xué)的導(dǎo)師讓我跟他做一些項目，所以前端開發(fā)也積累了一些項目經(jīng)驗，一畢業(yè)也順利拿到了offer。

而關(guān)于前端開發(fā)的面試，面試官主要會問很多技術(shù)細(xì)節(jié)，前端開發(fā)基礎(chǔ)的問題。個人在沒有拿到offer前，比較經(jīng)常看w3cschool app名企的面試題(阿里巴巴、百度、騰訊、小米)，因為還是需要了解一些面試的間接經(jīng)驗。

開源代碼也需要了解一些，不然面試官問你看過哪些代碼你一臉茫然，這就很尷尬了!至于從哪里看開源代碼，比較常用的是github。

最后，總結(jié)一下前端開發(fā)的學(xué)習(xí)經(jīng)驗：

1、以生活中的類比來學(xué)習(xí)編程

2、盡可能選擇老牌的編程網(wǎng)站，第一次就學(xué)對;

3、有趣化的編程，玩w3cschool app微課;

4、可以通過慕課網(wǎng)、極客學(xué)院等通過視頻補充學(xué)習(xí);

5、準(zhǔn)備面試前，多刷一些名企面試題，積累面試經(jīng)驗。

w3cschool app有需要下載的請前往蘋果商店、各大安卓手機應(yīng)用商城下載安裝。

為現(xiàn)在web前端這個職業(yè)非常火，騰訊最近組織了一個大型web前端技術(shù)交流峰會，可見web前端這個職業(yè)是多么的火，其實這個不是最重要，重要的在五年之后，web前端發(fā)展前景是勢不可擋的。但是我現(xiàn)在看到的問題是，大家看到web前端這個職業(yè)發(fā)展非常好，未來前景也是非常好，掙錢也是非常多，但是大家都忽略了一個東西，既然是這么好的職業(yè)，那么它一定沒有那么容易讓你勝任這個工作，我們都知道現(xiàn)在前端的競爭非常大，而這種競爭是在新手之中的競爭，在初級工程師、中級工程師、高級工程師是沒有競爭的，很多人眼紅前端工程師工資這么高，自己也想這樣去拿高薪，但是大家不知道當(dāng)初這些人在學(xué)習(xí)前端的時候是怎么學(xué)習(xí)的，才有今天，為了避免大家有這樣錯誤的思想，我給大家下面幾個建議：

一、在如今前端開發(fā)競爭這么激烈的時代，千萬不要著急去找工作，尤其是不可相信那種速成四個月培訓(xùn)，然后去找工作的，大家不妨想一下，五年的速成和五年后的速成，找工作的性質(zhì)能一樣？五年的差距，最后還用同一個方法速成，你覺得工作好找嗎？

二、現(xiàn)在的前端不是之前的網(wǎng)頁制作，現(xiàn)在的前端更加高端，新手學(xué)習(xí)前端必須有一個學(xué)習(xí)規(guī)劃，有一套系統(tǒng)的學(xué)習(xí)方案，這個方案的學(xué)習(xí)時間最好是半年，每天應(yīng)該學(xué)習(xí)什么，心里應(yīng)該有數(shù)，每個知識點應(yīng)該做什么案例，而且要每天堅持學(xué)，一天都不可以停，一旦停了就不想學(xué)習(xí)了，所以說現(xiàn)在學(xué)習(xí)前端不是智商的問題，看誰可以慢慢的挺過去，韌性強。

三、要有人去指導(dǎo)，其實這個我好像談了無數(shù)次，現(xiàn)在一個新手想要全部通過自己學(xué)習(xí)前端，并且找到工作，首先這種可能性非常的小，如果誰能單憑自己一個人的力量自學(xué)前端找到工作，那么這個人一定是一個人才，但是這種人只有1%，所以一定要有一個可以幫你解決小問題的人，不然會走很多彎路，得不償失。

前端學(xué)習(xí)步驟如下：

一階段：html+css+ps切圖+ftp網(wǎng)站上傳+html5標(biāo)簽+css3動畫+手機端開發(fā)+swiper.js+iscroll.js

二階段：js+jq+ajax+正則表達式+面向?qū)ο?js插件+github+sea.js+require.js+gulp

三階段：2D+3D應(yīng)用+touth+canvas+svg+本地儲存+h5拖拽+highcharts+boorstrap

四階段：node.js+vue.js+react.js

上述學(xué)習(xí)內(nèi)容，如果你可以在半年之內(nèi)全部掌握熟練，那么你的月薪在一線城市超過一萬是非常可能的，但是這些內(nèi)容沒有那么好學(xué)，半年的時間如果認(rèn)真應(yīng)該差不多，具體的學(xué)習(xí)方法，學(xué)習(xí)效率可以隨時問我，下面有我的web前端新手學(xué)習(xí)裙，隨時都可以加我問題，希望新手少走點彎路，也有一些比較適合新手學(xué)習(xí)的視頻免費分享。

樣是web前端工程師，我們通常會發(fā)現(xiàn)他們的薪資待遇截然不同，web更注重的在于技術(shù)。

通過web培訓(xùn)出來的工程師，通常是中高級。自學(xué)的web工程師也有可能達到這樣的水平，但是前提是必須系統(tǒng)化進行學(xué)習(xí)。那么初級web前端應(yīng)該懂什么呢?

首先，Web工程師要入門必須要了解前端、后端、后臺的基本概念，同時要了解基本的html、css和javascript語法，最后根據(jù)設(shè)計師的設(shè)計圖在不考慮兼容性的情況下把頁面做出來。

需要注意的是，入門階段最關(guān)鍵的就是對所學(xué)內(nèi)容形成一套概念,知其然知其所以然，不要管好那么多細(xì)節(jié)。

其次，你可以把html、css和javascript分成三個階段進行學(xué)習(xí)。

第一階段：HTML的學(xué)習(xí)

Html是超文本標(biāo)記語言，英文全稱為HyperText Mark-up Language，這是一個網(wǎng)頁的骨架。靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。

當(dāng)然，學(xué)習(xí)html過程是比較枯燥乏味的，所以你需要更有效的學(xué)習(xí)策略。依w3cschool看來，你可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計”視圖中看效果，在“代碼”視圖中學(xué)本質(zhì)，將各種視圖的優(yōu)勢發(fā)揮到極致，想必會比單純記憶HTML標(biāo)簽和屬性有趣、有用的多吧?

第二階段：CSS的學(xué)習(xí)

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。

學(xué)習(xí)css建議可以看相關(guān)的一些書籍，如《CSS權(quán)威指南》(很詳細(xì)、很經(jīng)典!)、《CSS揭秘》 《精通CSS：高級Web標(biāo)準(zhǔn)解決方案》，博客和專欄等也可以瀏覽。

第三階段：JavaScript的學(xué)習(xí)

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對象和DOM操作，進而實現(xiàn)客戶端的特效、驗證、交互等。

建議可以看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區(qū)分哪些是語言的精華，哪些是糟粕。如果是精華部分，我們在后續(xù)進階部分可以深入研究，而如果是糟粕部分，那么只要大概看懂別人寫的渣代碼就可以，自己還是不要嘗試為妙。

通過這三個階段的學(xué)習(xí)，我們就可以往更高級的web前端工程師進階了!

附Web前端工程師學(xué)習(xí)圖:

更多編程技術(shù)，就來w3cschool。