對于一些沒有編程經驗的人來說，一開始就學習 web 前端可能會讓你覺得比較困難。

因為你的能力還處在初始階段，你根本不知道你缺少哪方面的知識。

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

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

簡單粗暴點，只需要掌握這張圖里的能力就行了。

開個玩笑，新手的話，還是要循序漸進。

LV1：學會制作靜態頁面（Web + Mobile）

HTML、HTML5：

理解如何瀏覽和創建網頁、基本的語法規范、常用標簽及屬性、網頁之間的鏈接與跳轉、標簽節點層級節點。

CSS:

基本語法和三種書寫位置、選擇器和格式化排版、盒模型的高級用法、常用布局模型

LV2：學會制作動態頁面

JavaScript ：

基礎語法和變量、數據類型和數據類型轉換、條件判斷、循環語句、函數、數組等內置對象

（有了這三個，你基本可以寫一些簡單的頁面了，但是仍然需要學一些經典的庫和框架。）

經典庫：比如 jQuery,YUI2,YUI3

經典框架：比如 Bootstrap

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

Vue.js/AngularJS2/React

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

自動化測試

其他：

熟悉 Git 與 Shell 的使用

學習路徑

1.入門 HTML + CSS

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

2.JavaScript + jQuery

JS：看 w3school 教程，花 2-3 天，但 w3school 教程有點過時，看完只能了解個基礎，深入學習的話，推薦看《JavaScript 權威指南》，《JavaScript 高級程序設計》。兩部都是大部頭。看完還需要在去網上找 ES6 資料學習，推薦 ECMAScript 6入門，深入淺出ES6。

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

熟練掌握大概需要1個月。

3.Vue.js/Angular 2/React

Vue.js：查看官方中文文檔大約需要 3 天左右。Vue 上手容易，但沒有其他前端框架使用基礎的人只看官方文檔難以理解 Vue 高級用法以及在生產環境中的運用。目前 Vue 社區還比較小，除官方文檔外難以找到優秀資料。

4.webpack & 測試

webpack 是目前應用最廣泛的前端模塊管理工具，功能強大。

測試相關的框架多且雜，大多是社區產物，較難系統學習。

以上的這些資源足夠你學習幾個月的，但它們不會帶你走得更遠。

但是，如果你已經學了這么多，你已經有足夠的能力去繼續前端的學習，直到你可以完美勝任一個前端工程師的要求。

最后留一點小的建議

你會經常地遇到 bug 和其它一些問題。這可能會讓人沮喪，但你要盡量保持冷靜，并系統地去思考。記住實踐是解決問題的最佳方法。

我們采集的是石頭，但是必須時刻展望未來的大教堂。

持續做一些小改進，慢慢地你就會驚奇地發現你的經驗得到了怎么樣的發展，你的技能得到了怎樣的提升。

對于WEB前端是否需要學框架這個問題，答案是肯定。

WEB前端隨著近些年來的高速發展，已經成為了非常熱門的開發方向，而且WEB前端所包含的內容，也越來越廣泛，已經不僅僅是過去我們提到的“做頁面”了。

而造成這一現象的一部分原因，就是目前前端框架百花齊放，使得前端開發選擇性更多，而且靈活性也更強。如React，Angular，Vue等等，這些框架都是熱門的選擇，掌握其中的一種或者更多，幾乎已經成為了目前一個合格的前端工程師的必備條件了。

那么面對如今日新月異的前端開發環境，作為前端開發者如何才能更快的學習新的內容呢？下面談談我的看法。

首先應該扎實基礎，眾所周知，前端框架更新非常快，也總會有新的框架產生，但是，萬變不離其宗，這些框架都是基于HTML, CSS, Javascript或者其衍生產品進行開發的。所以扎實基礎，對HTML,CSS,Javascript盡可能的精通，那么就可以“以不變應萬變”。

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

接下來，還應該對業界信息保持一定的敏感度，多關注社區信息，可以及時的了解各種框架的發展，是否有新框架產生等等。然后對于前端框架應該盡可能做到T字形程度掌握，什么是T字形呢？其實就是一專多能，對于一種框架深入了解，同時又能對其他的熱門框架有所了解，如果新的框架產生，也可以有初步了解。這樣如果以后需要使用某種框架，那么就可以基于你已經了解的內容再去學習，這樣就可以節省大量的時間了。

最后要說的，WEB前端開發雖然是目前很火熱的行業，當時由于其發展迅速，就需要開發者不斷地學習，才能保持自己的競爭力，不被行業所淘汰。

現在的Web前端開發不得不說是火透了整個互聯網，Web前端、微信、小程序似乎已經是不得不談的未來趨勢。市場火證明未來缺口大，不少人認為學習Web前端開發，高薪指日可待。

第一：基礎的重要性

無論做什么都一定要有扎實的基礎，只有基礎牢固，才能更深入的學習新技能。Web前端開發的入門門檻其實很低的，與其他語言先慢后快的學習節奏相比，他是一個先快后慢的過程。所以在前期的學習過程中，你會很容易的掌握其基礎的技能。而隨著Web前端技術的廣泛應用，學習也會變得更加簡單。

第二：細節的重要性

有句俗語是這樣說的：“細節決定成敗”，很多Web前端開發者在工作過程中為了追求速度，而忽略了一些細節性的東西。比如：給代碼加備注，代碼的命名規范，代碼的簡潔等。所有的這些看似不重要，其實卻嚴重影響了項目的進度以及自身能力的提升。在開發過程中，適當的添加備注，能夠加深對技術點的印象，也便于以后在修改的過程中迅速查找;規范的代碼命名能夠方便團隊之間的溝通，提高工作效率;而簡潔的代碼能夠直觀的展現某一塊代碼的作用。

第三：網站布局的重要性

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

第四：學習的重要性

優秀的Web前端開發工程師之所以優秀，不是因為工作的年限有多久，而是具備快速學習的能力。Web前端開發是一個特殊的工作，涵蓋的知識面非常廣，而且互聯網行業技術的更新速度是非常快的，如果沒有快速學習的能力，就很難跟上時代的步伐。所以，作為Web前端開發工程師一定要不斷的學習，提升技能。

如果你想快速的掌握Web前端技術，想要了解這方面的學習內容，可以報班專業學習，建議你實地考察一下，先了解具體情況后，再做要不要學習的決定。