前端小白入門難？推薦這篇學習路線，大牛帶你輕松入門到進階！

前端怎樣入門？

這一波良心推薦的【前端學習路線】干貨，不談虛的，直接來談每個階段要學習的內容

想入門前端的小伙伴們，那就放馬過來吧！
?

?
首先，給大家分享一張最新的以 企業崗位需求為導向前端技能點圖，如下

?
根據前端工程師技能點圖，我們分為四個階段：

第一階段：前端基礎

（HTML / CSS / HTML5 / CSS3 / JavaScript ）

干貨文章：

• 初識HTML+CSS
• 【學習筆記】HTML基礎完結篇
• html基礎知識——css樣式①
• 史上最全Html和CSS布局技巧
• 面試題匯總 HTML+CSS篇
• CSS 最核心的幾個概念
• HTML5之元素與標簽結構
• 基于HTML5和CSS3構建3D模型
• 10個最常見的 HTML5 面試題及答案
• 9款超絢麗的HTML5/CSS3應用和動畫特效
• 移動手機平臺的HTML5前端優化指南
• 一張思維導圖搞定CSS3全部新特性
• 純CSS3畫出小黃人并實現動畫效果
• CSS3動畫開發指南之逐幀動畫
• 三分鐘學會用 js + css3 打造酷炫3D相冊
• 純HTML+CSS+JavaScript編寫的計算器應用

免費推薦：

• 初識HTML+CSS
• 十天精通CSS3
• 手把手教你實現電商網站開發

第一階段配套的視頻

• 前端零基礎入門 2019版 ???總時長：58小時，42門課

教學目標：掌握基本的HTML/HTML5+CSS/CSS3網頁布局，以及JavaScript特效，最終可以獨立開發出高顏值，多特效的前端PC網頁。

?

第二階段：組件化網頁開發

（JavaScript深入/ jQuery/ 組件化電商網頁開發）

干貨文章：

• 更快學習 JavaScript 的 6 個思維技巧
• Javascript操作DOM常用API總結
• 徹底理解JavaScript原型
• JavaScript優化篇1-Loading and Execution 加載和運行
• 我們到底需不需要 jQuery
• 前端開發者都應知道的 jQuery 小技巧
• 每個程序員都會的 35 個 jQuery 小技巧
• bootstrap學習總結，常看
• 如何高效開發企業級電商的前端？
• 學習組件化開發完整AndroidApp
• 吐槽前端組件化的踩坑之路
• 基于SSM+Shiro+Redis+Bootstrap的超市管理系統(電商網站)
• 基于 Node.js + Express + mongoDB + Bootstrap 搭建的電影網站
• Spring+SpringMVC+MyBatis從零開始搭建一個精美且實用的管理后臺

免費推薦：

• JavaScript深入淺出
• jQuery基礎
• 基于bootstrap的網頁開發

第二階段配套的視頻

• 組件化網頁開發 2019版 ???總時長：45小時，20門課

教學目標：學會JS深入技能變量、函數作用域，學會基礎JavaScript庫jQuery，掌握企業級開發思想——組件化開發, 實現網頁的高效開發，達到專業級編碼水平。

?

第三階段：WebAPP開發與小程序

（HTML5移動開發/ 移動基礎 / 小程序基礎）

干貨文章：

• 學習html5存儲數據和緩存
• HTML5學習–SVG全攻略（基礎篇）
• HTML5學習–SVG全攻略（進階篇）
• 響應式布局的三大要點
• 響應式web設計
• 響應式開發之圖片響應式實戰
• canvas實現 漂亮的下雨效果
• 移動web性能優化從入門到進階
• 移動端網站提升頁面加載性能的優化技巧
• 移動H5前端性能優化指南
• [Canvas前端游戲開發]——FlappyBird詳解
• canvas 實例，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰
• 電商總結——如何打造一個小而精的電商網站架構
• Webpack模塊打包飛行手冊
• WebPack在項目配置中的探索
• Web APP開發技巧總結
• 再看微信小程序
• 開發者，你應當擁有一款自己的產品。
• 微信小程序開發干貨合集
• 微信小程序組件化（上）
• 微信小程序組件化（下）

免費推薦：

• Hello，移動WEB
• 移動端開發框架Zepto.js入門
• 前端性能優化-基礎知識認知

第三階段配套的視頻

• WebAPP開發與小程序 2019版 ???總時長：54小時，23門課

教學目標：從網頁開發擴展到移動開發，學會移動開發中必備的響應式/Flex，性能優化，移動適配；并且帶你初體驗小程序開發，快速學會新技術，為自我競爭力增加籌碼。

?

第四階段：Vue與React高級框架開發

（ES6 / Vue / React.js/ 面試）

干貨文章：

• 說說ES6那些事兒–ES6十問
• 用 ES6 暢快地寫 JavaScript
• 深入ES6 四 字符串的括展
• ES6系列文章 Promise
• 當 better-scroll 遇見 Vue
• Vuex 2.0 源碼分析（上）
• Vuex 2.0 源碼分析（中）
• Vuex 2.0 源碼分析（下）
• 滴滴 webapp 5.0 Vue 2.0 重構經驗分享
• Vue-cli 3.0 初體驗 ！
• React 是什么
• 通往全棧工程師的捷徑 —— React
• React 入門實例教程
• 快速入門react
• React16+React-Router4從零打造企業級電商后臺管理系統
• 最全的BAT大廠面試題整理
• BAT大廠面試流程剖析

免費推薦：

• vue2.5入門
• ES6快速入門
• ReactNative入門與進階

第四階段配套的視頻

• Vue與React高級框架開發 2019版 ???總時長：40小時，23門課

教學目標：使用主流框架Vue.js/React.js與ES6， 結合主流工具Webpack，完成電商WebApp及新聞網站項目開發，體驗真實項目開發流程；最終達到企業用人標準，成為合格的前端工程師。
?

?

最后

以上四個階段，每天2小時，3個月，
如果全階段學習，還將贈送大師面試課哦，一步到位，輕松讓你從前端入門到入職，挑戰20W年薪！

想要學習全套前端視頻學習的小伙伴，請移步到前端工程師就業班2019升級版

以上，除了這四個階段，你也可以在大前端入門中一步到位完成前端進階！

最后歡迎勇闖前端實戰，突破你的技術瓶頸，成為一枚更更更優秀的前端開發人才。畢竟開發這條路途，無論你工作多久，都會遇到各種奇奇怪怪的問題，以及形形色色的bug等著你去解決！

更多前端技術干貨請移步：

【良心推薦】揭秘從新手到Vue高級工程師的養成之路

【React學習路線】從零進階前端核心工程師

【面試技巧系列一】內含前端篇

最后，如果覺得此文對你有所幫助，請收藏+點贊吧！