學習前端，最不缺的就是學什麼。
網上有一張流傳甚廣的前端學習路線，很多人看到了這張圖，便紛紛從入門到放棄。
說好的前端是最容易入門的呢？這和傳說中講的不一樣啊。
確實，前端涵蓋面非常廣，所包含的知識非常多，要想短時間內就學會所有內容成爲大牛是比較困難的，建議還是循序漸進，找到適合自己的前端發展方向。
當然，無論如何，首先得打好的便是基礎知識：
HTML+CSS+JavaScript
HTML是超文本標記語言，它是網頁的骨架，網頁的圖片、文字、視頻、音頻、程序都需要他引入
到網頁中體現。
重點學習內容：
1、學習基礎知識及如何編寫語義化的
2、HTML瞭解頁面的各個部分，並且學會如何正確地構建 DOM
學習完 HTML 的基礎知識後，可以動手編寫 一個 HTML 頁面，什麼網站都可以，比如一個論壇的登錄頁面，而且要確保結構是正確的。雖然完成的頁面看起來很醜，但是暫時還不用着急，現階段的重點是學會編寫正確的結構。
CSS是層疊樣式表，通過樣式屬性來對標籤進行佈局規範，也就是用來美化網頁的。
1、學習 CSS 的語法以及常見的屬性
2、瞭解盒子模型以及如何使用 Grid 和 Flexbox
3、完成以上操作後，還需要學會如何使用媒體查詢來編寫響應式網頁
這時候，你就可以給自己的網頁增加樣式了。
JavaScript 可以讓你的 HTML 頁面更具有交互性。如果我們不需要加載整個頁面，而只加載部分內容，這時出現的滑塊、彈窗等都是由 JavaScript 完成的。你需要學習：
1、JavaScript 語言的語法和基礎結構學習
2、如何通過 JavaScript 來操作 DOM 對象。例如，通過 JavaScript 刪除頁面中的某些元素、添加一些元素、操作類名、應用 CSS 樣式等等
3、學習並理解作用域、閉包、變量提升和事件冒泡等學習如何使用 XHR 或者 Ajax 發送 HTTP 請求。Ajax 可以讓你在不重新加載頁面的情況下執行某些頁面操作。
4、完成上面的內容後，就可以去學習 ES6+ 中所有的新功能。
學習是一個艱苦的過程，當然如果能把技術學成，最後也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今後要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對於自己也是一個提升的過程。自己整理了一份最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理這是我的前端技術交流Q un+++ 錢面是603---- 中間是985---- 後面是993--++++++ 有問題隨時在裏面問我，能給大家提出很多寶貴建議。
教程類推薦：
推薦一些適合這個階段學習的資料：
W3school：HTML/JavaScript免費教程
前端工程師P5-P6：適合工作了1-2年前端新人。
有三個核心實戰項目，可以快速掌握P5-P6前端知識體系，如果你覺得自己一直在重複基礎工作內容，找不到方向，可以去學習一下。
1、freecodecamp 學習網站：免費學習網站，對新手非常友好
3、菜鳥教程
4、MDN 官方教程
5、W3C 官方文檔
書籍推薦：
HTML與CSS：
JavaScript：
1、《編寫可維護的JavaScript》
2、《JavaScript設計模式》
3、《EffectiveJavaScript:編寫高質量JavaScript代碼的68個有效方法》
4、《JavaScript語言精粹》
其他素材/書籍
來源：github.com/justjavac/free-programming-books-zh_CN
CSS/HTML
JavaScript
JavaScript 經典類庫 jQuery
因爲 JavaScript 有可以封裝的特性，所以在後面也出現了很多用 JavaScript 封裝的類庫、插件。比如說最經典的類庫就是 jQuery了。
jQuery 類庫就是在類庫裏面封裝好了很多 JavaScript 的事件方法。jQuery 通過封裝，減輕了遍歷、對象選擇等等很多的問題。把網頁特效的實現變得簡單化，通過調用方法就可以了。你需要學習：
1、jQuery語法和JavaScript原生語法的差異
2、Dom對象和jQuery對象
3、jQuery的入口函數和JavaScript的入口函數的差異
4、jQuery事件的執行邏輯。
相關教程：
這時候，你就可以做一些響應式網站並使用 JavaScript 添加交互功能了。
包管理器
包管理器有 yarn 和 npm，兩者幾乎相同，都只有安裝的功能。你可以選擇其中的任何一個，一旦學會使用其中的一個，另一個也就會了。
這時候，可以在你的網頁中引入一些外部庫。比如安裝一些 Toast 插件，當用戶點擊按鈕的時候，用 Toast 插件向他們顯示信息；或者你可以創建一個登錄表單，利用一些表單驗證庫來進行表單驗證。
接下來還可以學習一些CSS預處理，CSS文件管理，CSS的一些框架，各種構建工具等等。
前端框架
前端框架衆多，React、Vue、Angular 三足鼎立，很多人都不知道應該學什麼好。
一個很簡單的方法是：先學工作實際需要的&自己更偏好的
1、React：Facebook 推出的一款聲明式的，高效的，靈活的用於創建用戶界面的JavaScript 庫，現在越來越火了
2、Angular：比較容易學，因爲它幾乎支持所有常用的功能。例如支持懶加載的路由器、支持攔截器的 HTTP 客戶端、依賴注入、CSS 封裝組件等等。有了它，你可以不用再引入其他庫了
3、Vue：現在找工作必須掌握的技術
框架學習可以分爲這3個步驟：
第一步：基礎學習。看官方的文檔及教程（如果有的話）
第二步：項目驅動學習。通過項目的方式來寫編寫大量的代碼，掌握該框架的用法及踩坑，快速積累經驗
第三步：求知驅動學習。在求知驅動學習過程中，遇到任何產生困惑或者感興趣的點，都要去深入學習。
相關教程：
React：入門實例教程
Vue：vue.js教程
Angular：菜鳥教程
當然，前端要學的內容遠不止這些，路漫漫其修遠兮，加油吧~