Web前端是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開拓是從網頁製作演變而來的，名稱上有很明顯的時代特性。在網際網路的演變程序傍邊，網頁製作是Web1.0時代的產品，其時網站的基本內容都是動態的，使用者利用網站的行為也以瀏覽為主。

Web前端的崗位職責是利用(X)HTML5、CSS、JavaScript、DOM等各種Web技能結合產品的介面開發。

Web前端開發學習計劃

HTML+css

HTML+css是web前端基礎，個人建議你在15天月之內學完！其實html標籤不多，瞭解每個標籤的屬性及定義就行，css常用屬性也不多，要多練，能熟練的組合搭配！學習這個的時候你不要去管頁面功能實現，這是javascript的內容，這也是忌諱。

2.javascript

javascript是web前端的心臟，為什麼這麼說是有道理的。javascript是指令碼語言，或者說是普遍用於寫網站頁面一些特效等作用的客戶端指令碼語言。現在普遍和html+css一起活躍在你的瀏覽器上……與html5+css3在一起組合有意想不到的效果，如果說HTML+css是哈雷，那麼javascript可以說是發動機。應該是無處不在的指令碼語言，有很多地方用到，而且還被封裝了各種框架react.js、angular.js、vue.js、ext.js、iMAG.js等，所以它很優秀。學的慢一點你可以1.5個月的時間用來學習它！

學習內容：

JavaScript程式設計，JavaScript語法、資料型別、運算子、表示式、流程控制，JavaScript內部物件、陣列、字串、日期時間、數學函式、正則表示式，JavaScript函式、自定義函式、全域性函式，BOM介紹、window物件、location物件、history物件使用。DHTML程式設計，理解DOM樹，DOM物件，常用DOM物件的屬性、方法和事件，編寫事件處理程式、使用DOM操作HTML文件、遍歷文件樹上的節點、搜尋文件中特定的元素、修改文件內容、往文件新增新內容、使用DOM操作XML文件。

3.jQuery

jQuery是一個相容多瀏覽器的javascript庫，核心理念是寫得更少,做得更多。由於開發成本低，很多公司都做用，WEB前端工程師必備。它也是輕量級的js庫，它相容CSS3，還相容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。

學習內容：

認識JQuery、選擇器介紹、css選擇器、jQuery選擇器及其優勢勢、基本選擇器、層次選擇器、過濾選擇器、表單選擇器、選擇器練習小案例等;JQuery操作DOM：DOM分類、查詢元素/屬性節點、創造元素/屬性/文字節點、插入節點、刪除節點、複製節點、替換節點、包裹節點、屬性操作、樣式操作、遍歷節點、CSS-DOM操作;動畫和事件：jQuery中的事件、載入DOM、事件繫結、合成事件、事件冒泡、事件物件的屬性、移除按鈕上註冊的事件、模擬操作、JQuery中的動畫。

學習週期應該在一個月左右

4.bootstrap

Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap是基於HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更加快捷。也是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範。

學習內容：

響應式頁面的的開發與設計，強大的柵格佈局，內建的CSS類庫，JS外掛，快速佈局商城頁面。

4.photoshop（ps)

web前端開發人員必須會一些PS技術，如PS切圖。很多公司是給你web前端開發人員psd檔案，你必須要會，這個一天就可以學會。

最後

端開發是建立Web頁面或app等前端介面呈現給使用者的過程，透過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動。它從網頁製作演變而來，名稱上有很明顯的時代特徵。在網際網路的演化程序中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，使用者使用網站的行為也以瀏覽為主。隨著網際網路技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，互動效果顯著，功能更加強大。

如果是零基礎開始，那麼前端開發學習需要分階段進行。

第一階段：HTML5+CSS3。學習透過HTML5+CSS3能進行簡單的網站應用和佈局的開發。

第二階段：Javascript。透過學習Javascript能對前端應用進行互動式開發。

第三階段：Node開發。如果只想做純前端開發，不做後端服務開發，這塊學習基礎即可，不需要深入學習。

第四階段：前端框架。前端開發框架非常多，現在比較熱門的有Vue、React、Angular等

第五階段：小程式和App開發

1、HTML+css（html5+css3）

2、javascript

3、jquery

4、jquery外掛

5、移動端的jquery mobile

高階的：

1、面向物件的css，css預處理等

2、Vue.js(前衛的前端mvc框架)

3、js常見的設計模式

4、node.js

其他興趣方向：

html5遊戲開發，web安全等

階段1.前端核心基礎 HTML +_CSS核心、JavaScript基礎語法、JavaScript面向物件、JavaScript DOM BOM程式設計、jQuery框架

階段2.HTML5 + CSS3 + 移動端核心 HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3例項演練 階段

3.移動端 移動端核心、移動端適配、移動端特效 階段

5.JavaScript高階 JavaScript基礎深入剖析、JavaScript面向物件深入講解、JavaScript非同步程式設計、 JavaScript函數語言程式設計JavaScript設計模式 階段

6.前端必備 效能最佳化、版本控制工具、模組化、專案構建工具 階段

7.高階框架 React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue原始碼分析 階段

8.小程式 原生小程式入門、原生小程式API使用、小程式框架Mpvue

什麼是前端？

前端即網站前臺部分，也叫前端開發，執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。隨著網際網路的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種螢幕解析度，完美的動效設計，給使用者帶來極高的使用者體驗。（核心技術：HTML、CSS、JavaScript） 核心技術是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展示的元素進行定位，再透過JavaScript實現相應的效果和互動。雖然表面看起來很簡單，但這裡面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。第一階段1.html+css

HTML、CSS、div+css佈局、HTML+css整站開發，適當的敲一些網頁的靜態頁面

2.初級JavaScript（js）

常見DOM樹操作大全、Js基礎教程、js內建物件常用方法、 ECMAscript、DOM、BOM、定時器和焦點圖

3.高階JavaScript

正則表示式、排序演算法、遞迴演算法、閉包、函式節流、作用域鏈、基於距離運動框架、面向物件基礎，

懸著器、DOM操作、特效和動畫、拖拽、變形、JQueryUI元件基本使用（JQuery的使用）

第二階段1.移動Web開發

嘗試不同的服務埠，最常見的iOS，安卓，iPad等等（要把頁面佈局寫得完美）

現在主流的技術主要有：1.iOS應用開發；2.Android應用開發；3.WinPhone7/8應用開發。還有一些系統級開發，如嵌入式作業系統，一般針對WinCE、Linux、Android、JVM等技術。

必須要掌握：跨終端WEB和主流裝置簡介、視口、流式佈局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機滾屏等等重要技術

2.小程式開發

3.拓展

常見的AJAX請求和json解析，Bootstrap佈局，echarts的使用方法等。

第三階段

前端最重要的就是模組元件化開發

學習主流的流行框架和庫

React.js、Vue.js、Zepto.js、Angular.js、Backbone.js等等

至少要掌握1~2種框架的使用方法，或者根據自己自身以後工作的方向來學習自己需要的框架開發，

第四階段（全棧開發）

嘗試服務端請求的嘗試，雖然後臺語言有很多，比如說PHP , JAVA , Phton等等，因為這裡我們主要學的是JavaScript，所以推薦大家學Node.js，這樣上手也比較容易，node開發包括：

Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制檯程式、非同步程式設計，非阻塞I/O、模組概念，模組管理工具、開發流程，除錯，測試等

我們學習後臺最要的是這個思想，以後在開發過程中，可以與後臺開發人員更好的交流，避免產生的一些代溝

最後，我們學的這些只是基礎，光掌握這些基礎遠遠不行，最重要的是我們要有實戰經驗，多開發一些專案，積累一些經驗，

這是我自己做的大前端完整學習路線&前端學習計劃首發於CSDN現在分享給你，大家共勉。

第一階段：前端基礎知識

HTML+CSS

1、HTML標籤及其特點及引數；2、CSS常用引數+進階；3、DIV+CSS佈局；4、綜合運用HTML+CSS完成CSDN首頁的佈局。

預計用時【10天】

JavaScript基礎

1、js內建物件常用方法；

2、常見DOM樹操作大全；

3、ECMAscript6；

4、DOM、BOM；

5、定時器和焦點圖；

預計用時【7天】

JS基本特效

常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴選單、瀑布流佈局、滾動事件、滾差檢視。

預計用時【7天】

JS高階應用

正則表示式、排序演算法、遞迴演算法、閉包、函式節流、作用域鏈、基於距離運動框架、面向物件基礎。

預計用時【10天】

JQuery：基礎使用

懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI元件基本使用。

預計用時【7天】

第二階段：HTML5和移動Web端開發

HTML5

HTML5新語義標籤、HTML5表單、音訊和影片、離線和本地儲存、SVG、Web Socket、Canvas。

預計用時【2天】

CSS3

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

預計用時【3天】

Bootstrap

響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

預計用時【2天】

移動Web開發

跨終端WEB和主流裝置簡介、視口、流式佈局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚划算頁面、手機滾屏。

預計用時【7天】

第三階段：HTTP服務和AJAX程式設計

WEB伺服器基礎

伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

預計用時【1天】

AJAX

1、Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest物件詳細介紹方法、相容性處理方法、Ajax框架的封裝、Ajax中快取問題、XML介紹和使用。

2、JSON和JSON解析、資料繫結和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例。

預計用時【5天】

第四階段：面向物件進階

面向物件終極篇

從記憶體角度到理解JS面向物件、基本型別、複雜型別、原型鏈、ES6中的面向物件、屬性讀寫許可權、設定器、訪問器。

預計用時【2天】

面向物件三大特徵

繼承性、多型性、封裝性、介面。

預計用時【1天】

設計模式

面向物件程式設計思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、介面卡模式、面向切面程式設計。

預計用時【7天】

第五階段：封裝一個屬於自己的框架

此後無法預測用時

框架封裝基礎

事件流、冒泡、捕獲、事件物件、事件框架、選擇框架。

框架封裝中級

運動原理、單物體運動框架、多物體運動框架、運動框架面向物件封裝。

框架封裝高階和補充

JQuery框架雛形、可擴充套件性、模組化、封裝屬於傳智自己的框架。

第六階段：模組化元件開發

面向元件程式設計

面向元件程式設計的方式、面向元件程式設計的實現原理、面向元件程式設計實戰、基於元件化思想開發網站應用程式。

面向模組程式設計

AMD設計規範、CMD設計規範、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：主流的流行框架

Web開發工作流

GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架

Angular.js、Backbone.js、Knockout/Ember。

常用庫

React.js、Vue.js、Zepto.js。

第八階段：HTML5原生移動應用開發

Cordova

WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關係、開發環境搭建、Cordova實戰（建立專案，配置，編譯，除錯，部署釋出）。

Ionic

Ionic簡介和同類對比、模板專案解析、常見元件及使用、結合Angular構建APP、常見效果（下拉重新整理，上拉載入，側滑導航，選項卡）。

React Native

React Native簡介、React Native環境配置、建立專案，配置，編譯，除錯，部署釋出、原生模組和UI元件、原生常用API。

HTML5+

HTML5+中中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5+開發和部署。

第九階段：

Node.js

全棧開發

快速入門

Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制檯程式、非同步程式設計，非阻塞I/O、模組概念，模組管理工具、開發流程，除錯，測試。

核心模組和物件

全域性物件global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、檔案流操作、HTTP服務端與客戶端、Socket.IO。

Web開發基礎

HTTP協議，請求響應處理過程、關係型資料庫操作和資料訪問、非關係型資料庫操作和資料訪問、原生的Node.js開發Web應用程式、Web開發工作流、Node.js開發Blog案例。

快速開發框架

Express簡介+MVC簡介、Express常用API、Express路由模組、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。

Node.js開發電子商務實戰

需求與設計、賬戶模組註冊登入、會員中心模組、前臺展示模組、購物車，訂單結算、線上客服即時通訊模組。

一個非常好的問題。先解釋下Web前端開發的新發展。

為了支援這些平臺和系統，越來越多的應用開始使用H5跨平臺架構，現在有個新名詞叫做“大前端”。

一，H5跨平臺開發

這時的H5前端開發已經不再是單單的網頁開發了，而是前端應用開發。具體到H5 Hybrid架構，常用三劍客：HTML, css, JavaScript

1) HTML和css是頁面設計，沒有程式碼邏輯

2) JavaScript程式設計，還有其它衍生語言，比如常用的TypeScript

JavaScript是一種指令碼語言，由直譯器載入執行，常用在網頁前端動態展示、和服務後端互動等場景。接下來重點介紹JavaScript開發。

二，學習階段和時間計劃

1）程式設計基礎，一到兩週

學習JavaScript語言基礎，掌握基本的程式設計方法。如果對著課本教程學習比較枯燥，難以堅持，那麼可以使用網上的一些學習練手資源，邊學習邊動手，比如HackerRank

2）開發框架，一到兩月

JavaScript前端開發有很多成熟的框架可用，比如JQuery, AngularJS，React，還有前後端都跑通的NoteJS。阿里開源框架Ant Design Pro是一個功能完善的腳手架，推薦新學者練手。

新手學習時，推薦當前普遍使用的Top3開發框架，太新或者太舊的都不適合用來學習練手。

3）專案經驗，一到兩年