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

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

只要能坚持学下来，一定可以学有所成！

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

前端学习路线图概览(2023版，视频已更新)

新手入门：HTML5+CSS3+移动web

JavaScript阶段： JavaScript基础 → JavaScript核心Web APIs → 《框架前置课》AJAX-Node.js-Webpack-Git

VUE开发： 框架前置课Node.js&es6 → Vue2+Vue3全套→Vue3小兔鲜电商项目实战

React + 微信小程序： 微信小程序 →uni-app小兔鲜小程序实战 → React → TypeScript 

前端学习路线详细介绍 

第一阶段    基础入门

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

1.Web前端零基础入门HTML5+CSS3+前端项目（二选一学习即可）

本课程从前端开发环境开始讲解，课程内容既包含企业中制作网页的基础知识，又包含企业PC端网页和移动端网页的制作流程，通过每日案例、学成在线和小兔鲜儿、极速问诊、酷我手机网页、腾讯全端等多个项目掌握多端网页制作技巧，轻松学习HTML5和CSS3。

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

2.移动web开发实战

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每天课程都有完整的案例或项目， 让学生学以致用。

第二阶段    技术进阶

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

1.2023新版JavaScript入门到精通全套教程

本课程是Pink老师最新版JavaScript课程，主要讲解JavaScript核心知识，包含最新ES6语法，从基础到API再到高级。让你一边学习一边练习，重点知识及时实践，同时每天安排大量作业，加深记忆，巩固学习成果。

2.JavaScript核心之Web APIs

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

3.《框架前置课》AJAX-Node.js-Webpack-Git

本课程从 AJAX 技术入门，掌握前后端数据交互技术，做黑马头条数据管理平台等案例巩固语法和思路，接着学习 Node.js 和 Webpack 以及 npm 模块化等语法，体验前端工程化为后续学习框架做铺垫。最后学习 Git 版本控制系统来管理代码不同版本

第三阶段    VUE开发

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

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

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

2.前端框架Vue2+Vue3全套教程

Vue2.x +Vue3.x + 实战项目，一套视频教程全覆盖，追求最短路径讲解，从入门到实战，章节自成闭环，每个章节配取企业化综合实战案例，让同学学以致用！快速掌握企业级开发实战能力！助您轻松掌握前端 Vue 框架！

3.Vue3小兔鲜电商项目实战

本课程从Vue3基础入门开始讲起，按照电商业务流程的推进方式逐一按照业务模块进行讲解。课程共分为7章：1. Vue3入门 2. Pinia和项目起步 3. Home页和一级分类 4. 二级分类和详情 5. 登录和本地购物车 6. 接口购物车和支付 7. 用户中心和拓展课程。

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

1.手把手快速带你开发微信小程序

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。

2.uni-app小兔鲜小程序实战

本课程是全网首套用 vue3 加 TS 写的 uniapp 项目， 里面大量封装自己的组件库，课程从 uni-app 基础入手，按照9大电商业务模块逐步实现完整的电商购物流程业务；涵盖了猜你喜欢、热门推荐、商品分类、商品详情、微信登录、用户管理、地址管理、购物车管理、订单管理等功能。包含微信登录，微信支付等业务。一套代码多端全面覆盖小程序端、H5端、APP端。

3.前端React精品教程

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

4、TypeScript零基础入门到实战

从零开始学习 TypeScript，上手时不需要工程化配置，完全没有任何学习负担。涵盖全套知识点，从 TypeScript 基础类型，到高级类型，到 TypeScript 的类型声明文件，再到配合 React 的使用，一应俱全。除了纯粹的类型外，还包括 TypeScript 类型兼容性、结构化类型等 TypeScript 原理内容。

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

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