對(duì)于一些沒(méi)有編程經(jīng)驗(yàn)的人來(lái)說(shuō)，一開(kāi)始就學(xué)習(xí) web 前端可能會(huì)讓你覺(jué)得比較困難。

因?yàn)槟愕哪芰€處在初始階段，你根本不知道你缺少哪方面的知識(shí)。

所以，在正式學(xué)習(xí)之初，你非常有必要先了解一下前端的能力模型。

前端工程師，都需要掌握哪些能力呢？

簡(jiǎn)單粗暴點(diǎn)，只需要掌握這張圖里的能力就行了。

開(kāi)個(gè)玩笑，新手的話，還是要循序漸進(jìn)。

LV1：學(xué)會(huì)制作靜態(tài)頁(yè)面（Web + Mobile）

HTML、HTML5：

理解如何瀏覽和創(chuàng)建網(wǎng)頁(yè)、基本的語(yǔ)法規(guī)范、常用標(biāo)簽及屬性、網(wǎng)頁(yè)之間的鏈接與跳轉(zhuǎn)、標(biāo)簽節(jié)點(diǎn)層級(jí)節(jié)點(diǎn)。

CSS:

基本語(yǔ)法和三種書(shū)寫(xiě)位置、選擇器和格式化排版、盒模型的高級(jí)用法、常用布局模型

LV2：學(xué)會(huì)制作動(dòng)態(tài)頁(yè)面

JavaScript ：

基礎(chǔ)語(yǔ)法和變量、數(shù)據(jù)類型和數(shù)據(jù)類型轉(zhuǎn)換、條件判斷、循環(huán)語(yǔ)句、函數(shù)、數(shù)組等內(nèi)置對(duì)象

（有了這三個(gè)，你基本可以寫(xiě)一些簡(jiǎn)單的頁(yè)面了，但是仍然需要學(xué)一些經(jīng)典的庫(kù)和框架。）

經(jīng)典庫(kù)：比如 jQuery,YUI2,YUI3

經(jīng)典框架：比如 Bootstrap

LV3：前后端分離，打造 Web App

Vue.js/AngularJS2/React

Node.js，使用 Express/Koa 配合 MongoDB/Redis 涉足到后端領(lǐng)域

自動(dòng)化測(cè)試

其他：

熟悉 Git 與 Shell 的使用

學(xué)習(xí)路徑

1.入門(mén) HTML + CSS

這里推薦一本書(shū)，Head First HTML與CSS（第2版）。從原理到方法都介紹得很詳細(xì)，通俗易懂，活潑有趣。html和css入門(mén)力薦。學(xué)完大概 1-2 個(gè)周。

2.JavaScript + jQuery

JS：看 w3school 教程，花 2-3 天，但 w3school 教程有點(diǎn)過(guò)時(shí)，看完只能了解個(gè)基礎(chǔ)，深入學(xué)習(xí)的話，推薦看《JavaScript 權(quán)威指南》，《JavaScript 高級(jí)程序設(shè)計(jì)》。兩部都是大部頭。看完還需要在去網(wǎng)上找 ES6 資料學(xué)習(xí)，推薦 ECMAScript 6入門(mén)，深入淺出ES6。

jQuery 的話，去官方文檔看即可。

熟練掌握大概需要1個(gè)月。

3.Vue.js/Angular 2/React

Vue.js：查看官方中文文檔大約需要 3 天左右。Vue 上手容易，但沒(méi)有其他前端框架使用基礎(chǔ)的人只看官方文檔難以理解 Vue 高級(jí)用法以及在生產(chǎn)環(huán)境中的運(yùn)用。目前 Vue 社區(qū)還比較小，除官方文檔外難以找到優(yōu)秀資料。

4.webpack & 測(cè)試

webpack 是目前應(yīng)用最廣泛的前端模塊管理工具，功能強(qiáng)大。

測(cè)試相關(guān)的框架多且雜，大多是社區(qū)產(chǎn)物，較難系統(tǒng)學(xué)習(xí)。

以上的這些資源足夠你學(xué)習(xí)幾個(gè)月的，但它們不會(huì)帶你走得更遠(yuǎn)。

但是，如果你已經(jīng)學(xué)了這么多，你已經(jīng)有足夠的能力去繼續(xù)前端的學(xué)習(xí)，直到你可以完美勝任一個(gè)前端工程師的要求。

最后留一點(diǎn)小的建議

你會(huì)經(jīng)常地遇到 bug 和其它一些問(wèn)題。這可能會(huì)讓人沮喪，但你要盡量保持冷靜，并系統(tǒng)地去思考。記住實(shí)踐是解決問(wèn)題的最佳方法。

我們采集的是石頭，但是必須時(shí)刻展望未來(lái)的大教堂。

持續(xù)做一些小改進(jìn)，慢慢地你就會(huì)驚奇地發(fā)現(xiàn)你的經(jīng)驗(yàn)得到了怎么樣的發(fā)展，你的技能得到了怎樣的提升。

對(duì)于WEB前端是否需要學(xué)框架這個(gè)問(wèn)題，答案是肯定。

WEB前端隨著近些年來(lái)的高速發(fā)展，已經(jīng)成為了非常熱門(mén)的開(kāi)發(fā)方向，而且WEB前端所包含的內(nèi)容，也越來(lái)越廣泛，已經(jīng)不僅僅是過(guò)去我們提到的“做頁(yè)面”了。

而造成這一現(xiàn)象的一部分原因，就是目前前端框架百花齊放，使得前端開(kāi)發(fā)選擇性更多，而且靈活性也更強(qiáng)。如React，Angular，Vue等等，這些框架都是熱門(mén)的選擇，掌握其中的一種或者更多，幾乎已經(jīng)成為了目前一個(gè)合格的前端工程師的必備條件了。

那么面對(duì)如今日新月異的前端開(kāi)發(fā)環(huán)境，作為前端開(kāi)發(fā)者如何才能更快的學(xué)習(xí)新的內(nèi)容呢？下面談?wù)勎业目捶ā?/p>

首先應(yīng)該扎實(shí)基礎(chǔ)，眾所周知，前端框架更新非常快，也總會(huì)有新的框架產(chǎn)生，但是，萬(wàn)變不離其宗，這些框架都是基于HTML, CSS, Javascript或者其衍生產(chǎn)品進(jìn)行開(kāi)發(fā)的。所以扎實(shí)基礎(chǔ)，對(duì)HTML,CSS,Javascript盡可能的精通，那么就可以“以不變應(yīng)萬(wàn)變”。

其次，對(duì)于前端框架的學(xué)習(xí)絕對(duì)不能僅停留在應(yīng)用層面，而應(yīng)該對(duì)其源碼進(jìn)行學(xué)習(xí)和研究。其實(shí)這兩者是相輔相成的，對(duì)于框架的應(yīng)用其實(shí)就是為了解決遇到的問(wèn)題，而解決問(wèn)題的最有效的途徑就是從源碼分析，而閱讀源碼又能更深入的掌握框架的應(yīng)用。

接下來(lái)，還應(yīng)該對(duì)業(yè)界信息保持一定的敏感度，多關(guān)注社區(qū)信息，可以及時(shí)的了解各種框架的發(fā)展，是否有新框架產(chǎn)生等等。然后對(duì)于前端框架應(yīng)該盡可能做到T字形程度掌握，什么是T字形呢？其實(shí)就是一專多能，對(duì)于一種框架深入了解，同時(shí)又能對(duì)其他的熱門(mén)框架有所了解，如果新的框架產(chǎn)生，也可以有初步了解。這樣如果以后需要使用某種框架，那么就可以基于你已經(jīng)了解的內(nèi)容再去學(xué)習(xí)，這樣就可以節(jié)省大量的時(shí)間了。

最后要說(shuō)的，WEB前端開(kāi)發(fā)雖然是目前很火熱的行業(yè)，當(dāng)時(shí)由于其發(fā)展迅速，就需要開(kāi)發(fā)者不斷地學(xué)習(xí)，才能保持自己的競(jìng)爭(zhēng)力，不被行業(yè)所淘汰。

現(xiàn)在的Web前端開(kāi)發(fā)不得不說(shuō)是火透了整個(gè)互聯(lián)網(wǎng)，Web前端、微信、小程序似乎已經(jīng)是不得不談的未來(lái)趨勢(shì)。市場(chǎng)火證明未來(lái)缺口大，不少人認(rèn)為學(xué)習(xí)Web前端開(kāi)發(fā)，高薪指日可待。

第一：基礎(chǔ)的重要性

無(wú)論做什么都一定要有扎實(shí)的基礎(chǔ)，只有基礎(chǔ)牢固，才能更深入的學(xué)習(xí)新技能。Web前端開(kāi)發(fā)的入門(mén)門(mén)檻其實(shí)很低的，與其他語(yǔ)言先慢后快的學(xué)習(xí)節(jié)奏相比，他是一個(gè)先快后慢的過(guò)程。所以在前期的學(xué)習(xí)過(guò)程中，你會(huì)很容易的掌握其基礎(chǔ)的技能。而隨著Web前端技術(shù)的廣泛應(yīng)用，學(xué)習(xí)也會(huì)變得更加簡(jiǎn)單。

第二：細(xì)節(jié)的重要性

有句俗語(yǔ)是這樣說(shuō)的：“細(xì)節(jié)決定成敗”，很多Web前端開(kāi)發(fā)者在工作過(guò)程中為了追求速度，而忽略了一些細(xì)節(jié)性的東西。比如：給代碼加備注，代碼的命名規(guī)范，代碼的簡(jiǎn)潔等。所有的這些看似不重要，其實(shí)卻嚴(yán)重影響了項(xiàng)目的進(jìn)度以及自身能力的提升。在開(kāi)發(fā)過(guò)程中，適當(dāng)?shù)奶砑觽渥ⅲ軌蚣由顚?duì)技術(shù)點(diǎn)的印象，也便于以后在修改的過(guò)程中迅速查找;規(guī)范的代碼命名能夠方便團(tuán)隊(duì)之間的溝通，提高工作效率;而簡(jiǎn)潔的代碼能夠直觀的展現(xiàn)某一塊代碼的作用。

第三：網(wǎng)站布局的重要性

做網(wǎng)站的目的除了向大眾群體直觀的展現(xiàn)公司的形象以外，更重要的還是便于SEO優(yōu)化，為了提升網(wǎng)站在百度搜索引擎中的排名，以獲取更多的瀏覽量。因?yàn)榫W(wǎng)站沒(méi)有排名，不能讓更多的人了解到公司，盈利從何談起呢?

第四：學(xué)習(xí)的重要性

優(yōu)秀的Web前端開(kāi)發(fā)工程師之所以優(yōu)秀，不是因?yàn)楣ぷ鞯哪晗抻卸嗑茫蔷邆淇焖賹W(xué)習(xí)的能力。Web前端開(kāi)發(fā)是一個(gè)特殊的工作，涵蓋的知識(shí)面非常廣，而且互聯(lián)網(wǎng)行業(yè)技術(shù)的更新速度是非常快的，如果沒(méi)有快速學(xué)習(xí)的能力，就很難跟上時(shí)代的步伐。所以，作為Web前端開(kāi)發(fā)工程師一定要不斷的學(xué)習(xí)，提升技能。

如果你想快速的掌握Web前端技術(shù)，想要了解這方面的學(xué)習(xí)內(nèi)容，可以報(bào)班專業(yè)學(xué)習(xí)，建議你實(shí)地考察一下，先了解具體情況后，再做要不要學(xué)習(xí)的決定。