首先就是基礎階段，h5，css3，js，學完之後基礎就差不多了，然後做些練習做個鞏固。接下來就是學習jQuery，設計模式，php，資料庫，三大框架（重要），後面可以提升下移動端，大資料視覺化，主要是多結合專案學習。學完這些差不多可以就業的，就看自己掌握的程度了。可以瞭解下百戰程式設計師學習平臺，前端學習內容很全面，而且特別系統，專案也很多，就業是完全沒問題的。可以參考下他家的學習路線，瞭解下適不適合自己，我是在這個平臺提升的，利用空餘的時間學習的，收穫很大，所以比較推薦，可以去看看。

第一階段：HTML5+css

配套學習視訊：

前端小白零基礎入門HTML5+CSS3

第二階段：移動web網頁開發

配套學習視訊：

2018移動web進階教程

第三階段：JavaScript網頁程式設計

配套學習視訊：

前端與移動開發基礎入門到精通

javaScript零基礎通關必備教程

第四階段：Node.js與Ajax

配套學習視訊：

Nodejs教程精講

ajax從入門到精通

第五階段：vue.js專案實戰

配套學習視訊：

4小時+5個揀選案例讓你快速入門Vue.js

2018年Vue.js深入淺出教程

配套學習視訊：

分分鐘快速入門小程式開發

2小時輕鬆實現人臉識別的小程式

第七階段：React.js專案實戰

配套學習視訊：

Reactjs入門教程

ReactJs精品教程

第八階段：框架階段與原理

第九階段：移動APP開發

第十階段：node.js進階

第十一階段：視覺化遊戲

　一、HTML部分

　　首先是要掌握一些常用標籤的使用和他們的各個屬性，這些常用的標籤總結了一下有以下這些：

　　html：頁面的根元素。

　　head：頁面的頭部標籤，是所有頭部元素的容器。

　　body：頁面的主體標籤，頁面展現的內容就放置在這裡面。

　　title：頁面的標題。

　　meta：位於文件的頭部，提供頁面的元資訊，包括關鍵字、描述等等。

　　link：定義文件與外部資源的關係，常用的用途就是引入樣式表。

　　script：指令碼標籤，可以把js指令碼程式碼放置在這個標籤內，也可以使用這個標籤的src屬性引入一個外部標籤。

　　style：樣式標籤，可以把css程式碼寫在這個標籤中。

　　a：超連結，href屬性代表要連結到的地方，target屬性代表開啟方式。

　　img：影象標籤，src屬性表示圖片的位置。

　　form：表單元素，它內部的input、select、textarea等標籤都是比較重要的。

　　div：定義文件中的分割槽或節，可以使用div來進行頁面的佈局等操作。

　　另外還有ul、li、p、button、iframe、p、table等標籤也很常用，nav、section、article、header、aside、footer等語義化標籤也需要了解一下。

　　除了要了解上面這一些標籤之外，還需要對一些新的HTML5的API有一定的瞭解：

　　audio、video標籤。

　　Canvas：定義圖形，比如圖表和其他影象。

　　input標籤的accept屬性，email、phone、url等型別。

　　getElementByClassName根據class名來獲取一個元素結點。

　　Multiplefileselection多檔案選擇屬性。

　　html的import、template

　　process標籤，webGL等內容。

　　還有一些要知道的知識點：

　　1.doctype的作用。

　　2.unicode、utf8等編碼的原理和區別。

　　3.如何進行頁面效能優化。

　　4.png、jpg、webp、gif等圖片格式的不同的優勢。

　　5.HTML行內元素與塊級元素的區別。

　　6.移動web端開發常用head標籤。

　　7.web語義化。

　　8.瀏覽器中的快取原理

　　二、CSS部分

　　關於css這一塊，我的看法就是網上下載一個chm格式的css的參考手冊，然後根據手冊裡面寫的一個個的都敲一下。

　　css大體分為下面這幾塊知識點：

　　①定位佈局

　　1.position屬性的7個值（static|relative|absolute|fixed|center|page|sticky）分別有什麼作用和不同？

　　2.實現品字形佈局或者是三欄佈局（左右寬度固定，中間適應螢幕）。

　　3.浮動與清除浮動的方法，flex佈局，grid佈局。

　　②盒子模型

　　1.margin、padding、border這三個屬性。

　　2.伸縮盒相關內容。

　　3.Multi-columnLayoutModule多列布局模型。

　　1.強制換行與不換行，清除空白。

　　2.文字對齊、大小（如何設定chrome小於12px的字型）、縮排、轉換。

　　3.單位（em、rem、px等），顏色（rgb、rgba，hls）。

　　④變換、過渡和動畫

　　1.transform的各種取值的作用與相容性。

　　2.transition過渡的動畫型別，貝塞爾曲線的原理。

　　3.animation動畫的各種設定，@keyframes規則。

　　4.瀏覽器的重繪與重排。

　　⑤選擇器

　　1.選擇器的分類，權值和優先順序。

　　2.有哪些屬性可以被繼承，哪些屬性沒法繼承。

　　3.偽類和偽元素分別是什麼，有什麼作用。

　　上面這些都是基礎的東西，除了這些基礎的內容之外需要了解Less、Sass、stylus等css前處理器，這將會大幅度提升你的css開發效率，也需要了解一下Autoprefixer、PostCSS等css後處理器。

　　在這裡就不說js的基礎知識了，我把js按照語法的層次和使用的層次分為了兩大塊。

　　按照語法的層次來說：

　　首先是javascript的面向物件方面的內容：在javascript中實現封裝、繼承和多型。

　　①封裝：在js中可以通過閉包、作用域和作用域鏈來實現封裝，ES6的const、let的作用。

　　②繼承：基於原型鏈的繼承、基於建構函式的繼承、組合式繼承、寄生式繼承等，外加ES6的class關鍵字，prototype和proto。

　　1.arguments的caller、callee等方法的作用。

　　2.方法的apply和call的作用和不同。

　　3.使用Array.prototype.slice.call來把一個數組物件轉化為陣列。

　　4.array的各種方法，如shift、splice、push、filter、map、reduce、forEach等等。

　　然後是Js的設計模式，比如說那三種工廠模式啊，建造者模式啊等等。

　　有多少人不知道電腦上東西是這樣生產出來的，web前端必學知識點

　　然後是在不同情況下的this分別都代表什麼。

　　按照使用的層次來說：

　　首先主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、伺服器代理等等。

　　然後是tcp協議、udt協議以及http協議的協議頭、狀態碼等內容。瀏覽器的快取，客戶端儲存方面的內容：localstorage、sessionstorage、indexDB、cookie等等。

然後是一些新的js的API，例如檔案讀取（fileReader）、fetch、Promise、WebSockets等等內容，可以去caniuse上面看一下有哪些新的東西。

在回答這個問題之前，先給一些不太懂或者想學習web前端的小夥伴們解釋一下什麼是web前端開發？需要掌握哪些知識？web前端開發能做什麼？以及web前端開發的前景怎麼樣？

當你真正瞭解了這些之後，自然就知道了掌握web前端開發需要的知識技能。

一、什麼是web前端開發？

所謂的前端，主要網站頁面/app等以最直觀的方式呈現給使用者看到的介面，就是我們日常生活中通過瀏覽器或者網址的形式開啟的網站看到的當前頁面，而前端開發，則是需要HTML（超文字標記語言）、CSS（層疊樣式表）、JS（JavaScript是一門解釋型程式語言，作為web頁面的指令碼語言）以及衍生出來的各種技術框架等來實現網頁網站與瀏覽使用者進行互動功能的技術。

一句話簡單的說，就是你開啟網站看到的就是前端，而看不到的就是前端開發（當然，瞭解前端開發的人都能檢視到當前頁面的前端原始碼)。

二、web前端需要掌握哪些知識？

簡單說，至少熟練掌握基礎的HTML+CSS(以及HTML5、CSS3）、JavaScript，保證UI設計的頁面能以最完美的方式展示在使用者面前，初學者能做到以上基本就算一個web前端開發的初學者了。

不過，為了在實際開發中程式碼編寫的更加簡潔、規範，那麼還需要web前端開發人員能熟練掌握各種前端框架，常用的前端框架有bootstrap框架、Vue框架、Angular框架、React框架等。

三、web前端開發能做什麼？

其實前端就是網站的前臺部分。主要執行在PC端、移動端等瀏覽器或者相關裝置上給使用者所瀏覽的網頁。

我們日常在瀏覽器中開啟訪問的所有網站基本都是由HTML/5、CSS/3、JS以及各種前端框架組成的。

那麼它能做什麼？當然主要就是網站，各種各式各樣五花八門的網站。

三、web前端開發的前景如何？

web前端開發在it行業一直都是比較熱門的職業，也是網際網路產品研發中不可或缺的角色，隨著網際網路的迅速發展，對web前端開發的需求也越來多，薪酬也自然是水漲船高，因為web前端開發需要經常與美工UI設計的職位溝通視覺互動的問題，所以現在很多公司招聘前端開發工作基本都需要有美工的基礎，或者是美工都還需要有前端開發的能力。

在網際網路IT程式設計開發設計培訓類課程中，Web前端培訓開發相對而言是比較簡單，並且工作以及發展前景都是比較不錯的，因此許多想要轉行的情況下都比較偏重web前端培訓學習。那麼Web前端培訓內容是什麼?小編今天就為大家來簡單的來解答一下。

綜合來講，Web前端培訓分為HTML5+CSS3、JS互動設計、移動端、伺服器、前端框架、小程式六大模組，下面就為大傢俱體介紹每個階段學什麼。

第一階段前端核心基礎，讓學員掌握前端基礎知識包括HTML5與CSS的基礎知識和程式碼的撰寫會學習PC端網站佈局以及jQuery框架。

第二階段HTML5 + CSS3 + 移動端核心，HTML+css3新特性，css進階，CSS3例項演練完成頁面特效的製作。

第三階段移動端，會學到CSS畫素與物理畫素的關係，佈局視口，移動端適配，移動端特效滑屏、滾動以及點觸等。

第六階段前端框架中，會學習前端高階框架Vue、React、Angular，讓學員會使用主流框架開發入口網站、管理系統等相關知識。

以上就是Web前端培訓的內容，想要了解更多Web前端培訓的具體課程內容，可以到尚矽谷官網進行諮詢瞭解，有專職的老師為大家解答，而且還可以下載免費視訊學習。

2020web前端學習路線圖：

一.首先告訴大家前端工程師主要做什麼?

前端工程師主要利用HMTL與CSS建構頁面，用JavaScript完善互動以及使用者體驗。互動效果包括，彈出層，頁籤切換，圖片滾動，ajax非同步互動等。

二.那麼具體的要掌握哪些技術呢?

1.HTML

掌握HTML是網頁的核心，HTML主要是完成使用者可見的頁面及UI佈局。

2.CSS

是程式設計師的畫筆，可以為html標籤自定義樣式，通過設定html標籤的樣式，來改變其外觀，達到美化與排版web頁面的目的。

實現網頁實時的、動態的、可互動式的表達能力。作為一種網頁尾本語言，它可以在html中執行，設定並修改瀏覽器中的物件與變數。及資料的載入，與使用者的互動等邏輯上的處理。

4.切圖技術（一般公司都有UI設計師，這個不是必須的，會一些簡單的切圖即可）

一般是用PS,AL來做切圖，因為在網頁設計製作過程中經常要用到不同尺寸的圖片，一般你是沒有辦法直接找到合適的圖片的，所以你也需要自己對圖片進行處理再使用。

三. 我們應該怎樣學習web前端呢?

學習HTML，CSS首先應該跟著書，資料進行基礎系統的學一遍。作為前端，html+css，是基礎中的基礎。只有先把基礎學紮實了，再來談餘下的。理論知識學透了，就要開始來進行實戰演練，只有大量的練習，做各種各樣的佈局練習來鞏固自己所學的理論知識，將理論得到實現。

而學習JavaScript。記住大部分JavaScript的函式，知道如何實現，並多加練習，花大量的時間在瀏覽器控制檯上寫程式碼，這一步是關鍵只有大量的實踐才會把你的理論知識發揮出來從而達到精通的目的。

不管學習什麼計算機技術，首先要做到基礎紮實，要先往廣度研究（就是多瞭解一些知識點），等積累一定經驗再往深度研究（你的經驗多了，你就要研究為什麼要這樣用，這樣用的實際原理是什麼）。

我的理解大概就是這些，希望對您有幫助。