跟著路線圖認真堅持學習從前端小白到大神不是夢，0基礎(chǔ)看這一篇足矣！

學們記得加關(guān)注點贊收藏，自學路上不迷糊！

零基礎(chǔ)小白自學前端路線圖速覽：

階段一：核心基礎(chǔ)入門

前端計算機常識 ? html+css基礎(chǔ) ? html+css 項目實踐

階段二：核心技術(shù)進階

JavaScript基礎(chǔ)+進階 ? Ajxa ? JavaScript應用項目實踐 ? Node.js???MongoDB項目實踐

階段三：企業(yè)必備技術(shù)

Vue&React開發(fā)：Vue2.0+3.0???Vue項目實踐 ? 數(shù)據(jù)可視化項目 ? React ? React項目實戰(zhàn)???UmiJS項目

階段四：公眾號&小程序開發(fā)

微信公眾號???微信小程序???小程序項目實戰(zhàn)???uni-app???uni-app項目實戰(zhàn)

階段五：前端高階提升必學

Webpack5???Vite2???Typescript???Harmony OS鴻蒙開發(fā)

前端學習細路線詳解：

前端計算機常識

課程針對計算機基礎(chǔ)薄弱的小白推出的計算機入門常識課，內(nèi)容涵蓋計算機的硬件、操作系統(tǒng)、存儲單位與二進制、軟件的安裝和解壓、IP、服務器、DNS、域名、環(huán)境變量、字符亂碼、linux操作系統(tǒng)、鍵盤指法、計算機英語、多進程和多線程、系統(tǒng)的常用設(shè)置、使用瀏覽器、CMD命令、office辦公軟件等計算機常識。貼近實際需求，氛圍輕松愉快，是計算機小白入門前必學的常識科普課。學完本課程，可以全面掌握計算機的基礎(chǔ)常識，為接下來的編程學習打好鋪墊。

下面的視頻是專門為零基礎(chǔ)前端學習者準備的入門學習指南，一點基礎(chǔ)沒有也可以直接看！你將從零開始學習網(wǎng)頁端頁面搭建，毫不費力掌握前端開發(fā)的初級核心基礎(chǔ)。

1、HTML5+CSS3入門-必須拿捏它

本系列課程從概念到具體基礎(chǔ)知識點全程干貨滿滿，為前端小白入門找到了很好的學習抓手，可以作為前端開發(fā)學習“夢開始的地方”，老師深入淺出的講解和動畫視頻解析并用真實的案例鞏固知識，學練結(jié)合，打好基礎(chǔ)，不怕學不會！

2、HTML+CSS pc端項目實戰(zhàn)

本課程講的是HTML+css pc端項目實戰(zhàn)，通過講解拉勾網(wǎng)得首頁、登錄頁等，學完即可進一步學會應用HTML+CSS，掌握頁面布局和標簽、屬性等的使用，讓你從小白進化為真正的網(wǎng)頁美化師。

學會了網(wǎng)頁靜態(tài)美化還不夠，讓你的網(wǎng)頁與用戶完美進行交互并學習動畫效果，打通前端與后端通路，前端工程師必備的JavaScript、Node.js語言也要學起來并學以致用。

1、JavaScript基礎(chǔ)進階與應用

本視頻主打內(nèi)容最全最新，包括JS基礎(chǔ)，基于面向?qū)ο箝_發(fā)實戰(zhàn)，前后端交互實戰(zhàn)，jQuery與BootStrap，以及CSS預處理器Sass，打造一站式知識長龍服務，適合有HTML和CSS基礎(chǔ)的同學學習。

2、Ajax擴展

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式、快速動態(tài)網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)，無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。掌握這個語言可以實現(xiàn)后臺與服務器的少量數(shù)據(jù)交互以及網(wǎng)頁的異步更新，本系列視頻包括了Ajax基礎(chǔ)以及封裝、promise、fetch使用、CORS、jsonp等實用技術(shù)深入淺出的講解。

3、JS應用項目實戰(zhàn)

本項目是基于原生JavaScript等前端技術(shù)實現(xiàn)的仿小米電商網(wǎng)站，包括了前端代碼設(shè)計技術(shù)棧，JQuery、scss、Gulp、模塊化開發(fā)，后臺構(gòu)造技術(shù)PHP、MySQL等后臺編程知識，同學們也可以先去學習這些知識點以后，再去入手本項目的案例實戰(zhàn)，前后端鏈路打通一步到位。

4、Node.js入門及應用

本視頻你將從認識Nodejs開始學習npm、nrm、yarn；內(nèi)置模塊、路由、express、MongoDB、身份認證、koa、MySQL、Socket、Mocha等知識點全覆蓋，學完本系列視頻可以讓前端程序員插上后端的翅膀，真正成為一名全棧工程師，助力同學橫向全面發(fā)展。每個大知識點講解后還會通過實際需求案例驅(qū)動知識點吸收，幽默風趣講解驅(qū)動學習的積極性，幫助大家迅速成長為Nodejs開發(fā)高手。

5、Node.js項目

本項目實戰(zhàn)視頻課程不僅可以讓你理解RESTful API的6個限制和若干最佳實踐，掌握Koa2. Postman. MongoDB、JWT等技術(shù)還會教你運用上述技術(shù)搭建簡書后臺管理系統(tǒng)的API接口，掌握云服務器的線.上部署方法。

企業(yè)必備技術(shù)提升

光說不練假把式，光學不干虛本事。學會了上述熱門核心技術(shù)還要進一步掌握企業(yè)真實場景下所需的開發(fā)技術(shù)，并能給不同行業(yè)中的企業(yè)對應的業(yè)務需求做出對應的解決方案。vue 、小程序、React、Uniapp是當下熱門的技術(shù)，是同學們必須要掌握的。最后，一個前端工程師要保持不斷進取，能力面的拓展，高階的能力提升還需要大家學習webpack5、Vite和TypeScript。

1、vue2.0+vue3.0 知識點+項目

Vue.js致力于構(gòu)建數(shù)據(jù)驅(qū)動的web應用開發(fā)框架，以簡潔化，輕量級，數(shù)據(jù)驅(qū)動，模塊友好等優(yōu)勢深受企業(yè)以及前端開發(fā)者的喜愛，成為前端開發(fā)人員必備的技能。 本課程以項目實戰(zhàn)為驅(qū)動，以輕松幽默的評書演義，幫你打開通往Vue.js的任督二脈，從vue2輕松過渡到vue3,助力同學成為一位優(yōu)秀的Vue.js開發(fā)人員。

2、Vue+ElementUI物業(yè)后臺管理系統(tǒng)

本項目是利用Vue3.0?+?Element?Plus?UI技術(shù)開發(fā)后臺管理系統(tǒng)，本視頻你將見證從零開始搭建項目，手把手教你使用vue3.0組件開發(fā)，并用Element?UI庫快速創(chuàng)建項目頁面，使用axios封裝與攔截器進行前后端交互，用json-server模擬數(shù)據(jù)后臺創(chuàng)建。在項目中還會講到工具庫的封裝、vue環(huán)境變量的部署、路由的設(shè)置與配置、響應式配置等。

3、Echarts+Vue3.0數(shù)據(jù)可視化項目構(gòu)建

本項目實戰(zhàn)課程對Echarts中的各項核心圖標技術(shù)，以及周邊技術(shù)都進行了詳細的講解，一套課程讓你精通Echarts技術(shù)棧，串聯(lián)Echarts和vue3.0熱門技術(shù)應用，讓大數(shù)據(jù)可視化開發(fā)如絲般順滑！

4、React

React已經(jīng)成為江湖大廠的主流前端開發(fā)框架，本視頻基于最新版React17良心制作。對React開發(fā)核心技術(shù)以及周邊技術(shù)棧進行詳細講解，并進一步通過實際需求案例驅(qū)動知識點吸收，幫助大家迅速成長為React開發(fā)高手。最后還有一個完整的后臺管理系統(tǒng)項目實戰(zhàn)講解，讓大家即使身不入大廠，也可對企業(yè)內(nèi)部真實項目組開發(fā)流程與細節(jié)做到心中有數(shù)。

5、React項目實戰(zhàn)教程（全球新聞發(fā)布管理系統(tǒng)）

本項目實戰(zhàn)教程一站式應用React全家桶打造企業(yè)級后臺系統(tǒng)，無縫對接各大門派需求，讓你不入江湖，便知江湖風雨。 同學們先去看過上述React開發(fā)基礎(chǔ)視頻，熟悉React 組件開發(fā)，組件通信以及基礎(chǔ)路由開發(fā)再配合食用本實戰(zhàn)教程效果更好。

6、react項目 UmiJS蛋糕訂購管理平臺

從Umijis 上手、LeanCloud云服務、商品管理等業(yè)務邏輯、角色及權(quán)限管理、高德地圖及Echarts這五個方面展開講解Umijs的基本使用,讓同學們能夠快速上手Umijs框架。采用LeanCloud云服務作為項目的后端接口，結(jié)合Umijs 框架，serverless云服務實現(xiàn)業(yè)務邏輯交互,角色權(quán)限管理，最后完成蛋糕配送范圍的繪制功能，利用Echarts 實現(xiàn)數(shù)據(jù)可視化功能

1、微信公眾號開發(fā)

本系列課程從整個微信公眾號體系的介紹開始，進一步使用編輯模式來完成一個最基本的公眾號搭建；此外你還將了解到公眾號的開發(fā)模式以及所需的服務端相關(guān)知識，其中包括Express、MongoDB、Robo3T、mongoose、云服務器等；還會對微信JS-SDK鑒權(quán)的整個流程進行梳理與開發(fā)；使用vue技術(shù)棧結(jié)合vant組件庫，構(gòu)建web應用并集成到微信公眾平臺中。

2、微信小程序項目開發(fā)

本系列視頻課程分為兩大部分，微信小程序基礎(chǔ)與項目實戰(zhàn)開發(fā)。小程序開發(fā)基礎(chǔ)學習部分你將從開發(fā)流程學起，到全局配置、todolist、基礎(chǔ)語法、組件及自定義組件的基礎(chǔ)知識學習。實戰(zhàn)開發(fā)部分的講解則會從項目搭建到借口、封裝、首頁模塊、輪播模塊、搜索模塊、分類模塊、授權(quán)模塊、購物車及我的模塊深度剖析小程序。

3、原生小程序-鋒運票務系統(tǒng) ——基于微信云托管的管理系統(tǒng)

本套《原生小程序-鋒運票務系統(tǒng)》課程是針對有一定的前端基礎(chǔ)的開發(fā)者提供的一個原生小程序案例實踐課程。課程涵蓋了客戶端及中后臺的業(yè)務流程，服務端的部署詳細的講解微信云托管的項目部署流程。整體項目從企業(yè)實踐角度出發(fā)，多種常見的業(yè)務二次封裝的技術(shù)分享，組件的復用，第三方類庫的合理應用。

4、鋒巢直播IM ——基于騰訊云音視頻跨平臺應用（全網(wǎng)首發(fā)）

本視頻使用騰訊即時通信IM+直播電商解決方案組件TLS,并涉及眾多騰訊云產(chǎn)品，包括但不限于云直播，云數(shù)據(jù)庫，Serverless，提供了一站式講解，幫助大家迅速整合直播電商功能到自己的業(yè)務中， 通過幽默風趣講解驅(qū)動學習的積極性，讓大家不入公司，便知公司項目的全貌。

5、uni-app入門到實戰(zhàn)項目之《仿網(wǎng)易云音樂》

Uniapp 是基于「 Vue + 微信小程序 」語言體系，開發(fā)人員學習成本低上手快，隨著如今 Uniapp 生態(tài)也逐步趨于成熟。基于 Uniapp 開發(fā)多端項目，已經(jīng)是很多中小型企業(yè)常用的技術(shù)解決方案。 我們就從 Uniapp 基礎(chǔ)開始，對照企業(yè)級實踐標準，從零到一打造一個多端（微信小程序 + H5 + 安卓 app + IOS app）的社區(qū)論壇類項目。

6、uni-app蛋糕訂購項目開發(fā)教程

本項目是一個面向部分城市群體的蛋糕定制網(wǎng)站，為指定區(qū)域的用戶提供在線定制、實時配送，打造線上線下相結(jié)合的個性化蛋糕定制服務。

1、webpack5

webpack5課程分為四大部分，分別是webpack基礎(chǔ)應用篇，webpack高級應用篇，webpack項目實戰(zhàn)篇以及webpack內(nèi)部原理篇。在本課程中，我們將通過前后呼應的demo從0到1學會webpack5，在項目實戰(zhàn)中學以致用并在最后階段去理解其底層的原理，從而做到對webpack5知其然并知其所以然的精熟掌握程度，完成前端工程師的一大步提升。

2、Vite2

Vite 基于原生 ES-Module 推出的前端構(gòu)建工具，Vite 因為它的跨前端框架的能力 和極其優(yōu)越的性能，被大家稱為下一代前端構(gòu)建工具，及時的學習新技術(shù)是有必要的。本系列視頻你將會學到Vite環(huán)境的搭建、依賴預構(gòu)建、模塊熱重載、在Vite中使用vue2vue3CSS等其他技術(shù)、服務器渲染等關(guān)聯(lián)技術(shù)。

3、typescript

本套視頻將從官網(wǎng)的知識點入手，分為基礎(chǔ)篇，高級篇，案例篇及項目篇共4個篇章，結(jié)合案例循序漸進帶你入門TypeScript。本視頻還有配套詳細版的文字筆記，幫助大家從?0?到?1?學習TypeScript,讓你能讀懂別人的TS代碼的同時也能編寫自己的TS代碼。

4、從零編寫一個HarmonyOS app

這個項目實戰(zhàn)案例將手把手教你從0開始編寫華為鴻蒙app，本視頻包含了對鴻蒙系統(tǒng)技術(shù)細節(jié)、生態(tài)圈全面解析及對鴻蒙系統(tǒng)的技術(shù)架構(gòu)進行詳細講解，最終讓大家開發(fā)初屬于自己的第一個鴻蒙應用！真正將學到的核心技術(shù)點進行串聯(lián)使用。

立志欲堅不欲銳，成功在久不在速。

每天抽出一定的時間來打卡學習課程視頻，堅持下去一定會有收獲！

加入學習社群和大家抱團學習、交流學習心得吧～社群內(nèi)不定期公布最新視頻更新一手消息！

每個前端人在學習技術(shù)的階段一定要保證有相應的知識點練習和項目練手且不斷去學習新出的技術(shù)才不會被落后，本套前端路線圖也是按照這樣的思路呈現(xiàn)給大家。

我們會不定期更新前端學習路線圖以及最新的前端干貨教學視頻。

為了你的成長不間斷，別忘了一鍵三連！收藏好學習路線，時時看、時時學、時時新。?

最后：祝大家都能在前端工程師的成長路上升職加薪。?