前端小白該如何學習？以及掌握哪些能力才能從事前端開發工程師

對於一些沒有編程經驗的人來講，一開始就學習 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 和其它一些問題。這可能會讓人沮喪，但你要儘可能保持冷靜，並系統地去思考。記住實踐是解決問題的最佳方法。

咱們採集的是石頭，可是必須時刻展望將來的大教堂。

持續作一些小改進，慢慢地你就會驚奇地發現你的經驗獲得了怎麼樣的發展，你的技能獲得了怎樣的提高。

若是你迫切的須要提高本身的能力，>這裏推薦一下個人前端學習交流=q=u=n=：491404389 ，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步，好友都在裏面學習交流，天天都會有大牛定時講解前端技術! 點擊：加入