前端学习路线图火热出炉啦，还在为如何系统学习苦苦寻觅资源么？

2024年新版前端学习路线图这不就来了么！小伙计们甩开膀子学起来吧。

只要能坚持学下来走上人生巅峰不再是梦。

PS：别忘了收藏呦，此套路线图不定期更新呦

前端新手入门：HTML5+CSS3​

前端技术进阶： JavaScript基础​ → JavaScript核心Web API​ → JavaScript进阶ES6到JS高级​ → 数据交互 & 异步编程Ajax\Git​

VUE开发： 框架前置课Node.js&es6​ → Vue2+Vue3全套​→Vue头条新闻客户端​ → B站移动端项目​ 

React： React​ → TypeScript​ 

第一阶段：前端基础入门

学前导读：为零基础学员量身定制，教你搭建PC端和移动端静态页面，让你从小白升级成网页“化妆师”，轻松掌握 HTML5 和 CSS3 相关知识。

HTML+CSS+前端web就业项目

由浅入深的讲解前端网页开发的每个技术要点，从HTML+CSS开始，每天都以综合案例的形式，让同学们学以致用，不断验证自己的成长进步。 最终从零开始还原企业中制作网页的实际开发流程，确保同学们都能水到渠成的完成企业级实战项目「小兔鲜儿项目」的首页开发，后面提高班的移动web阶段，每阶段自成闭环，针对布局模型、适配方案、CSS3特效逐一讲解，每阶段均对应大厂项目或案例，更让学生学到爽，让每位同学都能达成 Zero to Hero 的强势蜕变！

57:46:32

Web前端全套_零基础自学到精通必备，Html+Css+前端web就业项目源码实操

12.2万

744

第二阶段：前端技术进阶

学前导读：让网页“动”起来，带你学会前端工程师核心语言——JavaScript，实现网页数据交互与动画效果，并实现与后端数据的联通。

1、JavaScript 基础语法

本课程是Pink老师最新版JavaScript课程，JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符等，站在初学者角度来讲解课程，完全可以让你从JavaScript小白到入门。

19:15:18

2023新版黑马前端JavaScript零基础入门视频教程，一套入门前端JS基础实战教程

3.4万

67

2、JavaScript核心webAPI

本课程是Pink老师最新版JavaScript核心webAPI，本课程主要讲解DOM获取&属性操作、事件核心、事件进阶、DOM操作&移动端滑动、正则&阶段案例等，重点突出实用。

25:08:16

黑马前端JavaScript核心webAPI视频教程，2023新版Pink老师前端WebAPI入门到实战

3万

99

3、JavaScript进阶ES6到JS高级

本课程是Pink老师最新版JavaScript进阶ES6进阶到JS高级，首先讲解ES6新语法，然后从作用域、解构、箭头函数到构造函数和数据常用函数。后面还有JS深入面向对象和高级应用技巧。

15:12:30

2023黑马前端JavaScript进阶ES6进阶到JS高级，构造函数&ES6+函数_js深入面向对象

17.1万

1266

4、数据交互&异步编程-前端进阶Ajax零基础入门

本课程案例丰富，知识点配套的案例丰富多样，满足学生学习的兴趣 ；深入原理，会深入讲解如何封装自己的模板引擎和 Ajax 函数；涵盖广泛，涵盖了 Ajax、跨域、JSONP、模板引擎、节流防抖、XHR Level2 等常用技术。

11:10:02

黑马前端2023新版AJAX从入门到项目实战全套教程，ajax前后端数据交互解决方案

6.1万

477

16:00:20

前端进阶Ajax+Git零基础到精通_ajax前后端数据交互&异步编程全套学习教程

9.3万

1926

第三阶段 VUE开发

学前导读：掌握多行业解决方案，项目开发拿来即用，帮你搞定前端工程师必备热门框架Vue.js。

1、前端高级Node.js零基础入门教程

本套课程作为框架前置课，重点为学生铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 Vue 课程夯实基础。同时，本课程涵盖了 MySQL 数据库、API 接口项目开发等后端内容，拓宽了学生的知识面，为前端学生构建了前后端完整的知识体系，助力学生更好地发展。

22:31:34

web前端Node.js全套教程，nodejs知识精讲+案例实战_含es6模块化+npm+express+webpack+promise等

7.9万

767

2、前端框架Vue2+Vue3全套视频

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套新版的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端 Vue 框架！

28:12:32

Web前端VUE2.0+VUE3.0全套教程（上部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

8.1万

966

19:56:40

Web前端VUE2.0+VUE3.0全套教程（中部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

2.9万

205

11:47:32

Web前端VUE2.0+VUE3.0全套教程（下部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程

2万

31

3、Vue头条新闻客户端

本课程会用Vue全家桶，完成一个市面常见的新闻客户端单页应用程序，带大家掌握vue常规项目的开发流程，从项目创建到组件使用，路由功能和最后的数据请求，将一个项目中的常用业务都包含进来，能够感觉到一个项目从无到有，功能从空白到实现交互和效果的整个过程，掌握vue相关技术的运用。

03:34:25

前端web实战项目，玩转Vue全家桶，头条新闻vue客户端开发实战

1.8万

49

4、B站移动端项目

格局打开，拥抱技术未来！完成带数据交互的 B 站移动端，学习到 Vue3 + TypeScript 的开发环境配置 Volar + DevTools ，学习到 Vant3 组件库 + Axios 请求库在项目实战中使用。对于只了解了 Vue3，TypeScript 语法，缺少项目实战经验的同学，千万不要错过！这次实战能让大家了解到 Vue3 + TypeScript 的真实开发情况。

01:43:11

前端web手写B站移动端项目，Vue3.2 + TypeScript + Axios入门到实战

7.7万

294

第四阶段 React前端高阶

学前导读：React帮你解锁中高级前端工程师能力地图，多端项目让你满足90%+企业需求。

1、前端React精品教程

React 是时下流行的前端框架之一，是很多大厂的选择前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

23:10:50

React框架基础入门到原理详解，中高级前端工程师必备react框架_好客租房前端实战项目教程

1.8万

19

2、TypeScript零基础入门到实战

JavaScript 是一门非常灵活的编程语言，这种灵活性就像一把双刃剑，一方面它无所不能，另一方面也使得代码质量参差不齐，维护成本高。而TypeScript的类型系统，很大程度上弥补了JavaScript的缺点。 越来越多的主流框架，要么选用 TypeScript 编写源码，要么为 TypeScript 提供了完美的支持，TS 已经成为一个前端开发者的必备技能了。本次课程将会带大家快速入门TS，掌握大型前端项目开发密码！

01:53:45

黑马前端两小时快速掌握TypeScript（上），TS与JS的区别+TS常用类型特性/接口定义

6603

6

本次课程将继续带大家学习TS的类型检查机制和内置工具类型，同时从实际应用出发，利用装饰器模式解决大家在开发中遇到的问题。

02:01:50

黑马前端两小时快速掌握TypeScript（下），TS的类型检查机制+内置工具类型+TS新版装饰器语法

3324

9

PS：学完这些的小伙伴别忘了回来留言，让新手小白看到你的进步，加入社区or粉群，还能互动学习，共同成长！

此套路线图会持续更新，把适合萌新小白学习的路线图呈现给大家，让大家学的爽！别忘了三连呦。最后祝愿大家学有所成！