一、HTML

HTML是網頁內容的載體內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。要熟練掌握div、table、ul li 、p、span等這些標簽,這些都是最常用的。

二、CSS（Cascading Style Sheets）—樣式。

一般看到web前端開發工程師的要求里面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用于輔助html來布局和展示的,

稱之為“css樣式”,CSS要熟練掌握float、position、width、height，以及對于的最大最小、會使用百分百、overflow、margin、padding,標題字體、顏色變化，或為標題加入背景圖片、邊框等等,這些都是跟布局有關系的樣式,必須要掌握的。

三、JavaScript：

學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發人員的個人技能。

四、操作系統：

了解Unix和Linux的基本知識，對于開發人員有益無害。

五、網絡服務器:

了解Web服務器，包括對Apache的基本配置，htaccess配置技巧的掌握等。

javascript：

數組常用方法的使用，比如遍歷有forEach，map，filter，every， some，reduce，操作方法有splice，slice， join，push，shift， pop，sort等基本數據結構，引用類型（對象，數組）基本邏輯運算if else， switch，三目運算：？，for/while循環等字符串常見api（如replace，slice， substr，indexOf）基本正則使用變量作用域，作用域鏈，變量提升，函數聲明提升對象基本用法，面向對象編程（關注優就業，學習更多IT知識）

css：

基本盒模型（border/content/padding等）4種常用定位（static/absolute/relative/fixed）常用布局方式（浮動布局/彈性布局flex/自適應布局/網格布局grid）css3基本樣式與動畫（transition，animation）

html：

新標簽基本用法和使用head標簽作用與用法（主要是meta屬性的用法）

其次根據不同企業對技術棧和職位級別的要求。

對于react技術棧為主的，需要掌握以下知識：

react+redux+redux－thunk/redux－saga+react－router,并熟悉ant－design等第三方ui庫這是比較基礎的崗位能力。

對于vue技術棧為主的，需要掌握以下技能：

vue+vuex+vue－router,并熟悉elementUI等第三方ui庫。

對于中高級前端崗位，還需要對webpack，gulp等前端工作流有一定或者較深的理解。

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

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

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