同樣是做前端，憑什麼能年入50萬，付出的努力跟收穫是成正比的！

大家經常跟我要一些 web前端的學習路線和一些vue、angular、react教程，我自己很懶，自己沒整理過系統的教程，因為網上也多的是，有時間我會普及一些入門和提升建議，思想提升了，路線明確了自然就好了，於是就整理了下這篇學習路線文章。

對於很多人來說，問題的關鍵在於沒有找到正確的發展方向，他不知道自己該學什麼？前端更是體系龐雜，很難從一而終，於是特意抽出一部分時間來總結一下路線，幫助大家。

一．前端相關概念建立

主要內容：

瀏覽器的概念介紹： 瀏覽器的作用、工作方式

瀏覽器的概念介紹： 瀏覽器的作用、工作方式

HTTP協議： 協議產生的原因、作用、及內容

頁面載入流程：當使用者開啟瀏覽器，輸入位址列並按下回車之後發生的事情

二．HTML-CSS-JS基礎-jQuery

學習內容：

HTML及HTML5：理解瀏覽器如何解析HTML、基本的語法規則、不同標籤的使用方式、巢狀方式

CSS：理解層疊式樣式表的語法規則、各種盒模型及常用佈局

CSS3：偽類、新選擇器及高階盒模型

Java：理解JS的作用、執行規則、語法規則、資料型別、判定、迴圈

物件、陣列、函式、日期、正則、異常

jQuery：

$函式、選擇器、常用方法、鏈式呼叫、專案實戰

三．JS進階-物件導向-H5新特性

主要內容：

DOM：理解DOM的作用及使用規則

JS進階：快捷屬性和尺寸、瀏覽器檢測、事件流程

物件導向：建構函式、原型、繼承

H5新特性：多執行緒、事件推送、前端儲存、canvas、歷史記錄等

四．設計模式-AJAX-NodeJS-資料庫

學習內容：

設計模式：單例模式、工廠模式、閉包類、MVC思想、MVVM等

AJAX：AJAX優缺點、非同步請求、字串模板、跨域

NodeJS：Node伺服器的相關知識、介面、檔案操作、Express框架

資料庫：資料的概念、分類、使用Node運算元據庫、MongoDB資料庫

五．工程化-CSS預編譯-ES2015-小程式

主要內容：

工程化：Gulp使用、Webpack使用

CSS預編譯：Less使用、Sass使用

ES2016：塊級作用域、新的定義變數關鍵字、新的方法擴充、字串模板與插值、新的資料結構、新的程式設計方式、類、繼承、模組化

小程式 ：小程式註冊、介紹、元件、API、開發跨平臺通用程式

六．Vue-React-Angular

學習內容：

Vue：Vue詳解、Vue外掛、Vue腳手架、Vue專案實戰

React與ReactNative：

React詳解、React元件化、Redux狀態管理、React專案實戰

ReactNative詳解、ReactNative建立移動端應用、ReactNative專案實戰

Angular：

Angular詳解、Angular特性、Angular專案實戰

web前端開發發展前景好，自然也就吸引了更多的年輕人都想投入web前端工程師的行列。也歡迎大家向我取經

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，程式設計工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。784-783-012 秋裙。從零基礎開始怎麼樣學好前端。看看前輩們是如何在程式設計的世界裡傲然前行！不停更新最新的教程和學習方法（web前端系統學習路線，詳細的前端專案實戰教學視訊，PDF），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。我們會一起結伴同行 學習前端我們是認真的

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2669784/，如需轉載，請註明出處，否則將追究法律責任。