一：前端開(kāi)發(fā)基本功

俗話說(shuō)的好“不積跬步，無(wú)以至千里”，學(xué)習(xí)也是一樣的從簡(jiǎn)單的基礎(chǔ)的知識(shí)點(diǎn)開(kāi)始慢慢積累，首先就是掌握前端語(yǔ)言的基礎(chǔ)知識(shí)3大部分（HTML、CSS、頁(yè)面制作工具）其中包含了元素和屬性、表單和圖形處理、CSS基本語(yǔ)法與選擇器、文本、邊框、輪廓與顏色、SS列表、表單與表格樣式、CSS樣式層疊與繼承、PhotoShop的使用和圖片整合、markman、pxcook工具使用等等小點(diǎn)。

學(xué)習(xí)完獲得初級(jí)Web前端工程師水平，熟悉前端開(kāi)發(fā)的HTML與CSS基礎(chǔ)知識(shí)。能夠配合UI設(shè)計(jì)師進(jìn)行項(xiàng)目開(kāi)發(fā)。

可從事職位: 初級(jí)前端開(kāi)發(fā)工程師、前端實(shí)習(xí)生

二：頁(yè)面布局實(shí)戰(zhàn)

這個(gè)階段就是掌握2大部分（布局技術(shù)、布局規(guī)范與方案）其中包含了BFC、IFC、GFC、FFC、Flex彈性布局、網(wǎng)格布局、媒體查詢、viewport、remvw、 dpr與ppi、PC端網(wǎng)站布局規(guī)范響應(yīng)式布局、移動(dòng)端設(shè)備適配最佳實(shí)踐、流式布局 (100%布局)等小點(diǎn)。

學(xué)完獲得初級(jí)Web前端工程師水平，能夠完成各種PC端與移動(dòng)端網(wǎng)頁(yè)布局與樣式設(shè)計(jì)實(shí)現(xiàn)?？梢宰龈鳛g覽器兼容與設(shè)備適配。

可從事崗位: 初級(jí)前端開(kāi)發(fā)工程師、前端實(shí)習(xí)生

三：前端開(kāi)發(fā)內(nèi)功

這個(gè)階段就是掌握4大部分（面向?qū)ο筮M(jìn)階與ES應(yīng)用、原生JavaScript交互功能開(kāi)發(fā)、JavaScript具庫(kù)自主研發(fā)、原生JS經(jīng)典交互特效開(kāi)發(fā)）其中包含了Promise、async/await語(yǔ)法、try/catch 語(yǔ)法、原型鏈、基本語(yǔ)法、流程控制語(yǔ)句、函數(shù)與數(shù)組、String與Date、BOM與DOM、DOM庫(kù)、事件庫(kù)、原型和繼承庫(kù)等小點(diǎn)。

學(xué)完獲得中級(jí)Web前端工程師水平，主要進(jìn)行頁(yè)面行為交互實(shí)現(xiàn)網(wǎng)站中常見(jiàn)交互特效。

可從事崗位: JavaScript開(kāi)發(fā)工程師

四：PC端全棧項(xiàng)目開(kāi)發(fā)

這個(gè)階段就是掌握4大部分（前端工具庫(kù)、前端工程化與模塊化、Node.jS服務(wù)端開(kāi)發(fā)、PC端網(wǎng)站開(kāi)發(fā)）其中包含了Node 基礎(chǔ)入門、Express 框架基礎(chǔ)、中間件開(kāi)發(fā)、MVC開(kāi)發(fā)模式、基于Express的后端路由、Animate CSS、VanillaJs、Lodash、Swiper、axios、Moment.js等小點(diǎn)。

學(xué)完獲得中級(jí)Web 前端工程師水平，并能配合 UI 和后臺(tái)實(shí)現(xiàn)項(xiàng)目。

可從事職位: 網(wǎng)站開(kāi)發(fā)工程師、Web前端開(kāi)發(fā)工程師

五：前端高級(jí)框架技術(shù)

這個(gè)階段就是掌握5大部分（React、Vue、全棧web3.0開(kāi)發(fā)、數(shù)據(jù)可視化、Angular）其中包含了React 18、ReactRouter6、Umi技術(shù)、Vue3選項(xiàng)式API、Vue3組合式API、Vite2+SFC、VueRouter4、Vuex4、Angular腳手架與創(chuàng)建命令、TypeScript語(yǔ)法與修飾模式、Ng服務(wù)與依賴注入等小點(diǎn)。

學(xué)完獲得高級(jí)Web前端工程師水平，主要進(jìn)行前后端全棧開(kāi)發(fā)。能夠獨(dú)立完成一個(gè)中小項(xiàng)目的前后臺(tái)。對(duì)于Web開(kāi)發(fā)有著非常熟練的編程能力.

可從事職位: 高級(jí)Web開(kāi)發(fā)工程師

六：混合應(yīng)用開(kāi)發(fā)技術(shù)

這個(gè)階段就是掌握4大部分（微信小程序、微信公眾號(hào)、Electron技術(shù)、PWA技術(shù)）其中包含了微信內(nèi)置公眾號(hào)定制、JSSDK接入、公眾號(hào)常見(jiàn)功能開(kāi)發(fā)、微信小程序基礎(chǔ)、小程序高級(jí)應(yīng)用、原生多端小程序開(kāi)發(fā)、Electron入門、Electron 調(diào)試技巧、Electron主進(jìn)程與渲染進(jìn)程API等小點(diǎn)。

獲得高級(jí)Web前端工程師水平，主要進(jìn)行混合式App項(xiàng)目開(kāi)發(fā)。能夠?qū)崿F(xiàn)多端開(kāi)發(fā)并擁有多端開(kāi)發(fā)能力，整合資源，實(shí)現(xiàn)跨平臺(tái)跨設(shè)備的架構(gòu)能力

可從事崗位: 混合APP開(kāi)發(fā)工程師/小程序開(kāi)發(fā)工程師/高級(jí)Web前端開(kāi)發(fā)工程師/Electron開(kāi)發(fā)工程師

七：原生應(yīng)用開(kāi)發(fā)技術(shù)

這個(gè)階段就是掌握3大部分（ReactNative、Flutter、HarmonyOS鴻蒙開(kāi)發(fā)）其中包含了Flutter環(huán)境搭建、界面結(jié)構(gòu)與基礎(chǔ)部件、布局與表單、RN環(huán)境搭建、RN基礎(chǔ)組件、RN動(dòng)畫和手勢(shì)、框架基礎(chǔ)、內(nèi)置組件、自定義組件等小點(diǎn)。

獲得大前端高級(jí)開(kāi)發(fā)工程師水平，主要涉獵原生APP開(kāi)發(fā)。主導(dǎo)移動(dòng)端多元產(chǎn)品項(xiàng)目實(shí)現(xiàn)。能夠跨平臺(tái)開(kāi)發(fā)提出可建設(shè)性解決方案。

可從事崗位: 大前端高級(jí)開(kāi)發(fā)工程師

八：大前端架構(gòu)

這個(gè)階段就是掌握5大部分（開(kāi)發(fā)工具及服務(wù)器技術(shù)、前端性能、微前端架構(gòu)、低代碼與組件庫(kù)開(kāi)發(fā)、安全）其中包含了Webpack5、Vite2、Git工具及GitHub/Gitee、ESLint與單元測(cè)試、SSR技術(shù)、Nuxt.js 服務(wù)器端渲染、Next.js 服務(wù)器端渲染、基于Webpack+Vue+React微前端實(shí)戰(zhàn)等小點(diǎn)。

獲得大前端架構(gòu)師水平，主要進(jìn)行前端項(xiàng)目架構(gòu)和項(xiàng)目把控。能夠解決網(wǎng)站出現(xiàn)的突發(fā)狀況，能夠改進(jìn)網(wǎng)站性能到極致。擁有大型網(wǎng)站、大量高并發(fā)訪問(wèn)量等開(kāi)發(fā)經(jīng)驗(yàn)。

可從事崗位: 大前端架構(gòu)師/資深前端開(kāi)發(fā)工程師

以上就是前端學(xué)習(xí)的8個(gè)階段，希望上面的路線可以對(duì)不管是自學(xué)還是正在培訓(xùn)的小伙伴有幫助，喜歡的話點(diǎn)個(gè)關(guān)注！??！