什么是web前端？
在以前，通俗的講是網(wǎng)頁制作，在現(xiàn)在，哼哼，可以參考這篇文章
http://tieba.baidu.com/p/4817153404
那么如果高效優(yōu)雅的學(xué)習(xí)web呢？
注：以下純屬個人觀點(diǎn)，如果不當(dāng)請指出
第一階段、html(5)+css(3)
Html和css是基礎(chǔ)中的基礎(chǔ)，但對于很多html標(biāo)簽和css屬性是平常開發(fā)中很難用到的，如果系統(tǒng)的學(xué)真的不知道學(xué)到猴年馬月，所以學(xué)會一些常用的就好了，這些基礎(chǔ)就不用買書了。推薦跟著慕課網(wǎng)在線敲一下代碼，它那里講的都是一些常用的東西http://www.imooc.com/learn/9
第二階段、Javascript Dom
在這個階段，你可以學(xué)會怎么用js寫一些網(wǎng)頁特效啊、交互啊之類的。注：這是js里面最簡單最低級的功能，并不是學(xué)會了寫特效就學(xué)會了js。
推薦書籍：《Javascript DOM 編程藝術(shù)》
網(wǎng)站資源推薦：http://www.imooc.com/course/list?c=javascript
慕課網(wǎng)上有很多小效果的實(shí)現(xiàn)，可以跟著熟悉js的語法規(guī)則
第三階段、Jquery
什么是jquery？Jquery是一個js的庫。
以前有朋友問我，為什么有jquery還要學(xué)js，這里大家要搞清楚，jq只是一個庫，它把一些常用的繁瑣的js方法用自己的方式封裝好，便于我們使用，它強(qiáng)大的地方在瀏覽器兼容，既然提高了兼容性，那么內(nèi)部肯定有繁瑣的條件判斷，所以jq的性能會比較偏低。
jq的插件有很多，可以實(shí)現(xiàn)很多效果。
所以jquery也是我們學(xué)習(xí)的基礎(chǔ)之一。
推薦書籍《鋒利的jquery》
獲取更多案例視頻，一起學(xué)習(xí)交流的html5技術(shù)交流，解答、群 250777811? 群文件上傳了很多的項(xiàng)目實(shí)戰(zhàn)，大家可以練練手
第四階段、一個UI-庫(bootstrap or other)
既然javascript有庫（jquery），那么css呢？
沒錯，一般css的庫叫做ui庫，或者叫做css框架，比如bootstrap，以下簡稱bs，我們學(xué)習(xí)bs的目的是什么？
1．學(xué)習(xí)優(yōu)雅的css命名規(guī)范
2．學(xué)習(xí)什么是可復(fù)用的web組件，為什么要復(fù)用這些組件
3．提高開發(fā)效率
Bootstrap中文文檔：http://v3.bootcss.com/
學(xué)完這些，你也應(yīng)該入門前端了。學(xué)完以上四個部分你應(yīng)該會：
1)高度還原psd設(shè)計稿；（簡稱切圖）
附上切圖教程：http://www.imooc.com/learn/506
2)會熟練使用瀏覽器調(diào)試工具
Web調(diào)試工具：http://www.imooc.com/learn/137
3)看的懂別人寫的網(wǎng)頁，會修修改改
如果這些你都會，4k+月薪?jīng)]問題
進(jìn)階（以下知識點(diǎn)不分前后）
l移動端頁面制作
會寫pc端頁面還遠(yuǎn)遠(yuǎn)不夠，我們還得會寫移動端頁面：
稍微復(fù)雜點(diǎn)的flex布局、響應(yīng)式布局和移動端基礎(chǔ)知識：
http://www.imooc.com/learn/494
很簡單的rem布局：
http://caibaojian.com/flexible-js.html
l混合APP開發(fā)
什么是混合app開發(fā)？
原生的android、ios應(yīng)用我們稱之為nativeApp。
運(yùn)行在網(wǎng)頁的app我們稱之為webapp，比如淘寶觸屏版。
混合App其實(shí)就是原生態(tài)App與Web App的結(jié)合，簡單說混合App擁有原生App的外殼，內(nèi)部的展現(xiàn)都是通過Web App的H5技術(shù)實(shí)現(xiàn)，在通俗點(diǎn)就是可以用html5技術(shù)寫一個可以安裝在手機(jī)上的應(yīng)用，這個應(yīng)用可以擴(kuò)展一些js功能，比如訪問手機(jī)硬件等等。
H5+與mui：http://www.dcloud.io/
lJavascript高級部分
我們之前說過js遠(yuǎn)不是寫寫特效那么簡單，這里我們學(xué)習(xí)：
a.Ajax
什么是ajax？
Ajax就是前端與后臺交互，實(shí)現(xiàn)數(shù)據(jù)獲取、異步請求等等。
這方面知識百度很多
b.Canvas
什么是canvas？
HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像，可以實(shí)現(xiàn)很多炫酷的效果，有興趣的同學(xué)可以學(xué)一學(xué)
c.H5新特性
離線儲存、視頻、音頻。。。等等
d.Js面向?qū)ο笈c原型
這方面內(nèi)容很重要，得好好學(xué)一學(xué)。了解js的原型機(jī)制。
推薦書籍《jsvascript面向?qū)ο缶幊獭贰赌悴恢赖膉avascript》
獲取更多案例視頻，一起學(xué)習(xí)交流的html5技術(shù)交流，解答、群 250777811? 群文件上傳了很多的項(xiàng)目實(shí)戰(zhàn)，大家可以練練手
e.Js設(shè)計模式
如果想深學(xué)，可以看一看，推薦書籍《javascript 設(shè)計模式與開發(fā)實(shí)踐》
lNodejs與npm
什么是nodejs？
首先，nodejs是一門后臺語言，對，后臺語言！在node上，我們可以用js語言進(jìn)行后臺的開發(fā)。相比較php，node的優(yōu)點(diǎn)是非阻塞IO處理，采用事件驅(qū)動的異步編程，對前端開發(fā)人員很友好，做前端的很容易上手
什么是npm？
Npm是nodejs里的一個包管理器，首先得理解模塊化，類似java的package。
這些剛開始可以不必深學(xué)，但是得知道是干啥的：
Nodejs中文網(wǎng)：http://nodejs.cn/
慕課網(wǎng)nodejs視頻：http://www.imooc.com/learn/348
lECMAScript2015
ECMAScript2015，也稱es6，下一代javascript語言，雖說是下一代，但是我已經(jīng)用了好一陣子了。^-^
ES6加了很多js新特性，比如解構(gòu)賦值，promise對象，模塊，塊作用域等等等等。。。
一般現(xiàn)有瀏覽器對es6還不是全面支持，但是可以通過一些預(yù)編譯，編譯成es5語法格式，讓瀏覽器支持它。
阮一峰--《ECMAScript6入門》:http://es6.ruanyifeng.com
l前端自動化
又是nodejs這個家伙，nodejs不僅將前端帶到了后端，也在前端掀起了自動化的浪潮。
為什么要自動化。電腦能完成的為什么要手動完成，可以實(shí)現(xiàn)：
圖片無損壓縮
Sass，less等css預(yù)編譯的編譯與壓縮
Js文件壓縮合并
自動檢測文件變化，開發(fā)時網(wǎng)頁自動刷新
對各個模塊的管理
......
常見的自動化工具有g(shù)runt，glup，還有后起只秀webpack。
這里我強(qiáng)烈推薦學(xué)習(xí)webpack，學(xué)成之后你會真正感受到什么是酸爽。
l前端MVC框架
重頭戲來了，會一個mvc框架，是現(xiàn)在前端招聘高級技術(shù)人員的基本條件。
為什么我要把這個放在后面，因?yàn)閷W(xué)起來并不是很難，繁瑣的是一開始的各種node配置或者文檔的es6語法看不懂，所以的先了解node與es6.
現(xiàn)在主流的框架有angular ，react ，vue。
Angular和react的社區(qū)背景很龐大，一個是谷歌，一個是facebook。
而我更佩服的是vue，vuejs的作者是中國人，名叫尤雨溪，從他的個人項(xiàng)目，到github三萬+star。附上尤大美照一張
簡直提高了程序員的平均顏值
相比于ng和react，vue更加輕量，更易于學(xué)習(xí)。當(dāng)然每個框架都有自己的優(yōu)點(diǎn)和缺點(diǎn)，具體怎么學(xué)習(xí)，自己選擇吧。
lGithub 和 git
如果你是學(xué)了幾年計算機(jī)專業(yè)的學(xué)生，連github都不知道的話，那么我真的不知道你整天在看些啥。
Github是最大的開源代碼托管平臺，你可以在github上查看一些開源項(xiàng)目，你可以給一個項(xiàng)目貢獻(xiàn)自己的代碼（當(dāng)然得符合開發(fā)規(guī)范），你也可以將自己的代碼開源供他人使用。
Git是一個分布式的版本控制系統(tǒng)，相比于svn，git可以在離線的狀態(tài)下在本地commit做一個版本，當(dāng)有網(wǎng)的時候在一并push到倉庫。
關(guān)于git和github的內(nèi)容可以自行百度
這個話題到這里就算是結(jié)束了，我自己是一名前端程序員，建了一個群每天分享對應(yīng)的學(xué)習(xí)資料和學(xué)習(xí)方法；html5技術(shù)學(xué)習(xí)交流群：250777811，歡迎初學(xué)和進(jìn)階中的小伙伴。里面有很多的項(xiàng)目實(shí)戰(zhàn)可以拿來練練手。
如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注的微信號：‘web前端EDU’或者‘webxh5’關(guān)注后回復(fù)‘2017’可以領(lǐng)取一套完整的學(xué)習(xí)視頻
