隨著移動互聯(lián)網(wǎng)的發(fā)展，近幾年web前端技術(shù)越來越受大家的喜歡，那對于小白童鞋而言，學(xué)習(xí)web前端到底要學(xué)習(xí)些哪些內(nèi)容呢？

其實(shí)優(yōu)就業(yè)web前端的學(xué)習(xí)主要包括以下幾個(gè)階段：

第一階段Html5+CSS3：主要學(xué)習(xí)HTML5基礎(chǔ)、CSS基礎(chǔ)、HTML5進(jìn)階、CSS3進(jìn)階、Less

第二階段JS交互設(shè)計(jì)：主要學(xué)習(xí)JavaScript核心語法、DOM和BOM、JavaScript高級進(jìn)階、面向?qū)ο缶幊獭ouch、jQuery、Zepto

第三階段Node開發(fā)：主要學(xué)習(xí)JavaScript ES6、Node、Express、MySQL、Webpack+Gulp+模塊化、WebSocket+Koa2

第四階段前端框架：主要學(xué)習(xí)Vue基礎(chǔ)、Vue進(jìn)階、TypeScript、React

第五階段小程序+數(shù)據(jù)可視化：主要學(xué)習(xí)小程序基礎(chǔ)、云開發(fā)、uni-app基礎(chǔ)、數(shù)據(jù)可視化

第六階段就業(yè)指導(dǎo)+項(xiàng)目提升：就業(yè)指導(dǎo)、企業(yè)面試復(fù)盤

學(xué)習(xí)完這幾個(gè)階段，html5開發(fā)中的一些理論知識基本上就掌握得差不多了，接下來就是找一些小項(xiàng)目練手。在找項(xiàng)目的時(shí)候最好找有商業(yè)價(jià)值或有實(shí)際意義的，由深入淺。最后還可以做一兩個(gè)小項(xiàng)目，傳到開源網(wǎng)站上，方便面試的時(shí)候展示。

對于web前端編程這類技術(shù)的學(xué)習(xí)，是很有一定的門檻要求的。如果你是一個(gè)非常自律，而且常善于自我思考分析、自我總結(jié)的這樣的人的話話，你大可以去可以選擇自學(xué)。現(xiàn)在網(wǎng)上的前端培訓(xùn)學(xué)習(xí)視頻資料特別的多，到處可以找到。

成為Web前端開發(fā)的話入門是比較簡單的，內(nèi)容也不是那么很多，只要把web前端的基礎(chǔ)html，css，js這三個(gè)大的知識體系內(nèi)容學(xué)習(xí)完成并且掌握。然后再種點(diǎn)的學(xué)習(xí)以下javascript里邊的操作DOM的相關(guān)內(nèi)容，以及web前端培訓(xùn)比較流行的框架，jquery，vue這些。在學(xué)習(xí)到了可以自己動手做一些簡單的頁面，然后再去細(xì)學(xué)javascript， nodejs和小程序的相關(guān)web開發(fā)知識內(nèi)容，并且再最好一步一步的努力向全棧發(fā)展。

當(dāng)然了，如果你感覺自學(xué)完不成，那么可以考慮一下相關(guān)的web前端培訓(xùn)學(xué)習(xí)，畢竟人都是有懶惰性的，而且在學(xué)習(xí)的過程中也會遇到自己難易解決的問題，這就需要你的搜索解決問題的能力了，一般很多人即使搜索也是解決不了的，那么這樣的話我們可能就需要老師的解答了，那還有就是問題的解決方式方法，這些都需要于人幫助解決才可以完成，那么web前端培訓(xùn)就是一個(gè)不錯(cuò)的選擇了。

如果選擇了參加web前端培訓(xùn)的話，建議最好選擇參加線下面授的班，這樣更有助于遇到問題和老師及時(shí)的溝通，同時(shí)也有一個(gè)好的學(xué)習(xí)氛圍。相對在web前端培訓(xùn)班學(xué)習(xí)的效率更高，學(xué)習(xí)的知識更加深入。

2020web前端學(xué)習(xí)路線圖

前端是當(dāng)代比較火的一個(gè)互聯(lián)網(wǎng)技術(shù)知識，許多年輕人把目光放在了前端上邊，想要通過前端培訓(xùn)班的學(xué)習(xí)進(jìn)入到這個(gè)行業(yè)，但是，很多人對于前端這個(gè)行業(yè)其實(shí)沒有多少了解，多數(shù)也只是通過別人的口中獲知的一些信息，對于前端學(xué)習(xí)什么，出來能干什么了解的并不多，那么前端主要學(xué)什么，報(bào)名前端培訓(xùn)班出來是否能就業(yè)？接下來小編就帶大家一起來了解一下。

前端主要學(xué)什么？

第一階段：HTML + CSS核心

HTML常用標(biāo)簽、盒模型、CSS選擇器集群、偽元素/偽類、浮動/定位、CSS3動畫、CSS3過渡、CC3漸變、經(jīng)典布局方案、2d/3d變換HTML + CSS核心

第二階段：JavaScript核心 + 高級

變量/內(nèi)存、數(shù)據(jù)類型、條件語句、循環(huán)語句、函數(shù)/對象/數(shù)組、DOM/BOM對象、閉包/原型/作用域、事件完整解析、線程/進(jìn)程、JavaScript繼承模式、JavaScript算法、JavaScript設(shè)計(jì)模式、棧/隊(duì)列、高級函數(shù)/函數(shù)柯里化

第三階段：jQuery框架 + Less + BootStrap

Less同Stylus,Sass區(qū)別、BootStrap框架語法、BootStrap組件應(yīng)用、jQuery設(shè)計(jì)模式、jQueryAPI、Less封裝、BootStrap響應(yīng)式原理、BootStrap柵格系統(tǒng)源碼分析

第四階段：NodeJs + 工程化

ECMAScript6新特性、JavaScript異步編程、Node基礎(chǔ)/Node搭建服務(wù)器、Express/Koa/EJS、原生Ajax/跨域解決方案、CMD/AMD/CommonJS/ES6(模塊化)

第五階段：Vue技術(shù)棧 + webApp + 項(xiàng)目部署

Vue核心基礎(chǔ)、Vue指令/表達(dá)式/實(shí)例、Vue組件通信、Vue生命周期詳解、Vue-router路由、Vuex狀態(tài)管理

第六階段：React技術(shù)棧 + 工程化高級

React核心基礎(chǔ)、ReactJSX語法、React組件、React組件通信、Redux源碼分析、Redux源碼分析、webpackHMR(熱膜替換)、webpack懶加載/預(yù)加載

第七階段：小程序技術(shù)棧 +服務(wù)器端框架

小程序核心語法、小程序路由、小程序生命周期、小程序支付流程、Mpvue框架、UniApp框架小程序WXML語法(遍歷，條件判斷等)

報(bào)個(gè)前端培訓(xùn)班出來能就業(yè)嗎？

選擇前端培訓(xùn)是否能夠?qū)崿F(xiàn)就業(yè)，有下面幾點(diǎn)決定，只要能夠達(dá)到基本是沒有問題的。

1、選擇一個(gè)好的前端培訓(xùn)班進(jìn)行學(xué)習(xí)

2、在一個(gè)前端行業(yè)發(fā)展比較好的城市進(jìn)行學(xué)習(xí)，這樣機(jī)會更多

3、在前端培訓(xùn)過程中要加倍努力的去學(xué)習(xí)

附錄：2020前端學(xué)習(xí)路線圖