做web前端，年入50w以上的心得+學習資料和路線

大家好， 我是liming ，來自河北的，不管你之前認識或不認識我， 現在，我們開始重新認識一下！
大家經常跟我要一些 web前端的學習路線和一些vue、angular、react教程，我自己很懶，自己沒整理過系統的教程，因爲網上也多的是，有時間我會普及一些入門和提升建議，思想提升了，路線明確了自然就好了，於是就整理了下這篇學習路線文章
對於很多人來說，問題的關鍵在於沒有找到正確的發展方向，他不知道自己該學什麼？前端更是體系龐雜，很難從一而終，於是特意抽出一部分時間來總結一下路線，幫助大家。
一．前端相關概念建立
主要內容：
瀏覽器的概念介紹： 瀏覽器的作用、工作方式
瀏覽器的概念介紹： 瀏覽器的作用、工作方式
HTTP協議： 協議產生的原因、作用、及內容
頁面加載流程：當用戶打開瀏覽器，輸入地址欄並按下回車之後發生的事情
二．HTML-CSS-JS基礎-jQuery
學習內容：
HTML及HTML5：理解瀏覽器如何解析HTML、基本的語法規則、不同標籤的使用方式、嵌套方式
CSS：理解層疊式樣式表的語法規則、各種盒模型及常用佈局
CSS3：僞類、新選擇器及高級盒模型
JavaScript：理解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前端工程師的行列。