1.先說(shuō)一下學(xué)習(xí)完web前端之后能干什么
學(xué)完web前端之后你可以開(kāi)發(fā)網(wǎng)頁(yè)，做h5動(dòng)畫(huà)，做手機(jī)端app，可以做自己的博客網(wǎng)站，可以做微信公眾號(hào)開(kāi)發(fā)，可以開(kāi)發(fā)小程序，可以結(jié)合nwjs做電腦客戶端軟件：比如微信的pc版，釘釘?shù)膒c版 都是web前端來(lái)做的

2.怎么開(kāi)始學(xué)習(xí)
兩條路：自學(xué)或者找培訓(xùn)班，找培訓(xùn)班的話，我推薦達(dá)內(nèi)和傳智播客，在國(guó)內(nèi)講師質(zhì)量都比較高。這塊我們一點(diǎn)就過(guò)，我主要講下怎么去自學(xué)。
對(duì)于自學(xué)最直接的方式就是看視頻學(xué)習(xí)，可以是在線視頻，比如 慕課網(wǎng)，麥子學(xué)院，極客學(xué)院，北風(fēng)網(wǎng)都有從入門到精通的前端課程，這些視頻都差不多，隨便選一套就行，入門課程都一樣，不用糾結(jié)于選哪一個(gè)。
視頻找好了之后，如果你不想中途放棄，或者，浪費(fèi)太多時(shí)間又沒(méi)效果的話。就找找一個(gè)引路人，引路人當(dāng)然是能力越強(qiáng)越好，找引路人的目的在于為你制定學(xué)習(xí)計(jì)劃，把控學(xué)習(xí)質(zhì)量，及時(shí)糾正錯(cuò)誤的學(xué)習(xí)方向，教你正確的學(xué)習(xí)方式。給你做心理輔導(dǎo)。為你及時(shí)打氣持續(xù)性補(bǔ)充你的信心。
我之前接觸和輔導(dǎo)過(guò)很多自學(xué)的學(xué)生，有成功的也有放棄的，放棄的那些同學(xué)基本都是輸在錯(cuò)誤的學(xué)習(xí)思路和心理迷茫期。聽(tīng)他們抱怨說(shuō)：沒(méi)有人去指導(dǎo)他們，每天學(xué)完就學(xué)完了，第二天接著學(xué)，但是東西太亂都串不起來(lái)，也都不知道是干嘛用的，尤其是js部分，這種問(wèn)題完全可以把一個(gè)人摧毀！所以 我一直對(duì)我的學(xué)生強(qiáng)調(diào)：有問(wèn)題一定要去問(wèn)，去解決，千萬(wàn)不要不懂裝懂，弄明白了再往下走，人的心理是很脆弱的，一旦倒了可能就再也站不起來(lái)了。敬告各位新入行的同學(xué)，除非你之前有過(guò)編程經(jīng)驗(yàn)，不然就找個(gè)引路人指導(dǎo)你。
3.列一個(gè)學(xué)習(xí)大綱
01.環(huán)境搭建
前端環(huán)境很好搭建，一個(gè)開(kāi)發(fā)工具即可，webstorm，hbuilder，vscode，sublime。初學(xué)者建議sublime 也不要裝插件，沒(méi)有語(yǔ)法提示，可以打基礎(chǔ)
02.html基礎(chǔ)
帶你去認(rèn)識(shí)html，讓你學(xué)習(xí)去運(yùn)行html，等瀏覽器上面打開(kāi)你的頁(yè)面的時(shí)候，你會(huì)有很強(qiáng)的成就感，然后開(kāi)始學(xué)習(xí)html的基礎(chǔ)標(biāo)簽
03.css基礎(chǔ)
html是勾勒，css是染色，基礎(chǔ)的css學(xué)完你會(huì)有種想寫(xiě)頁(yè)面的沖動(dòng)，這時(shí)候你不用抑制住那種感覺(jué)，直接按照自己所想開(kāi)寫(xiě)，這是你的第一個(gè)項(xiàng)目
04，js基礎(chǔ)
js是頁(yè)面的邏輯，作為一個(gè)web前端工程師，js是很核心的部分，也是很難的部分。js的學(xué)習(xí)之后放長(zhǎng)一些，尤其是前一周，要讓自己去熟悉那種語(yǔ)法環(huán)境，培養(yǎng)自己的開(kāi)發(fā)思路，而且有一點(diǎn)就是學(xué)完一個(gè)星期的知識(shí)之后，及時(shí)和你的指引人溝通，看卡自己的理解是否有誤，還有就是學(xué)習(xí)思路是否有問(wèn)題，他會(huì)給你指出那些東西需要多學(xué)習(xí)，哪些不常用，還有就是給你點(diǎn)一下你學(xué)的這些在項(xiàng)目中會(huì)是怎么去應(yīng)用，理論聯(lián)系實(shí)際是最好的學(xué)習(xí)方式。
05.純js操作dom和jquery
這階段要知道怎么去用js來(lái)更改頁(yè)面的元素，怎么去寫(xiě)dom事件，經(jīng)過(guò)一番聯(lián)系后，再引入jquery，不要本末倒置，有個(gè)同學(xué)學(xué)完jquery之后說(shuō)發(fā)誓以后再不用原生js操作dom！然后被我狠狠罵了一頓
06，開(kāi)始你的ui框架之旅
這個(gè)階段我推薦從bootstrap開(kāi)始，這個(gè)框架很經(jīng)典，響應(yīng)式的珊格系統(tǒng)被后來(lái)框架一直沿用，在我線下教學(xué)的那幾年，我都會(huì)帶著學(xué)生一起看bootstrap的源碼，讓他們學(xué)會(huì)這種設(shè)計(jì)思想，因?yàn)橹髮?duì)他們太有用了，當(dāng)時(shí)他們很痛苦，現(xiàn)在他們說(shuō)起來(lái)覺(jué)得很受益，如果可以，你也要去看看源碼，先學(xué)會(huì)去定制bootstrap，公司注重二次開(kāi)發(fā)，定制 bootstrap正好可以練手。
07.開(kāi)始深入css3
基礎(chǔ)學(xué)完css3要提上日程，這時(shí)你會(huì)看到不一樣的世界
08.深入js
這階段你就要去解讀原型鏈，原型替換，this指向，es6，es7的新語(yǔ)法，
09.學(xué)一套主流mv*框架
vue，react，angular2選一種，
我建議從vue開(kāi)始，react的jsx語(yǔ)法不適合你入門去學(xué)習(xí)，angular2的typescript語(yǔ)法糖難度也比較高，vue學(xué)起來(lái)平滑些，結(jié)合vue，學(xué)一下vue-router，vuex，element ui，axios，webpack。做個(gè)項(xiàng)目玩一下這個(gè)全家桶
10.升級(jí)后臺(tái)語(yǔ)言nodejs
這個(gè)不作要求，你在學(xué)vue的時(shí)候其實(shí)已經(jīng)在用nodejs了，你用的npm就是nodejs的一部分，這個(gè)階段說(shuō)的是nodejs編程，比較難理解，畢竟是寫(xiě)服務(wù)器的東西，不過(guò)前面基礎(chǔ)打牢固，讓別人一點(diǎn)撥就能上手，技術(shù)不難，難在思路轉(zhuǎn)換。
3.總結(jié)做項(xiàng)目
兩個(gè)項(xiàng)目，
一個(gè)是側(cè)重于css特效方面的，要求就是非?？幔瑤浀?jīng)]朋友
第二個(gè)項(xiàng)目側(cè)重邏輯處理，用來(lái)升華你的邏輯能力
這兩個(gè)項(xiàng)目可以從網(wǎng)上搜幾個(gè)網(wǎng)站來(lái)模仿，之前我的學(xué)生有做過(guò)：蘋(píng)果官網(wǎng)，魅族官網(wǎng)，花瓣網(wǎng)，網(wǎng)易云音樂(lè)，在行等很多網(wǎng)站，做的也很不錯(cuò)。
4.面試技巧培養(yǎng)階段
這個(gè)階段要培養(yǎng)下公司項(xiàng)目的具體流程以及面試技巧的培養(yǎng)，面試回答思路。（來(lái)源：知乎）