2021年度最全web前端学习路线

2021-01-19 12:25 作者:千锋教育 0人读过 | 我要投稿

本学习路线包含了千锋教育web前端学科全阶段视频教程（从入门到精通），涵盖了你所需要掌握的所有前沿技术及知识点！

年度全网最新，史上最全web前端学习路线，从基础到项目实战应有尽有，牛批卡拉斯！

注：2021新版教程会不定期更新，记得持续关注哦~

前端学习路线

以下学习路线仅供参考

HTML+CSS ==> JavaScript基础 ==> JavaScript面向对象 ==> JavaScript正则表达式==> JavaScript DOM ==> JavaScript全套 ==> JQuery ==> Gulp入门 ==> 贪吃蛇小游戏 ==> Bootstrap ==> 小米电商网站项目 ==> Node.JS ==> MongoDB ==> NodeJS+Express+ MongoDB实战项目 ==> Vue ==> Vue实战项目（喵喵电影）==> React ==> React企业项目 ==> React管理后台项目 ==> 微信小程序设计基础 ==> 微信小程序开发 ==> 小程序开发项目（喵喵交友）==> 微信公众号开发 ==> uniApp ==> uniApp项目实战 ==> Webpack4.0 ==> Nuxt框架 ==> Flutter全套 ==> GraphQL ==> angular ==> ES2020 ==> Dart Flutter ==> kbone ==> Ajax ==> Mpvue ==> DvaJS ==> TypeScript ==> Taro开发框架 ==> React美食网项目 ==> 职位管理系统 ==> 资产管理平台 ==> ReactNative项目 ==> 实战项目之拉勾网 ==> 实战项目之头条 ==> 实战项目之幸福西饼 ==> 实战项目之网易云 ==> 面试题精讲①-node.js ==> 面试题精讲②-reactJS ==> 面试题精讲③-Vue.js ==> 面试题精讲④-页面布局 ==> 面试题精讲⑤-前后端协作 ==> 面试题精讲⑥-原生JS、jQuery ==> 千锋前端公开课合集

前端全套视频教程

【千锋教育】Web前端全套视频1000集：名师打造，千集巨制！0基础典藏版，菜鸟到高手

PS：

千锋B站视频全开源，完全免费，2021版更多、更强的前端教程已经在录制中ing……提前感谢大家的三连支持！

详细前端学习路线

一、前端基础视频

1. HTML+CSS基础：专门针对编程小白而制作，是学习HTML+CSS很好的入门教程。学完后能写出你看到的静态页面。

二、前端进阶视频

1. JavaScript基础：本课程，可以让你在40天内完成从新手到大师的成长。全方位立体式的进行JavaScript的学习。

2. JavaScript面向对象：详细讲解了javascript中面向对象的概念、构造函数、原型链及数据类型。讲解了两个案例：面向对象的放大镜的实现及面向对象分页基础实现。

3. JavaScript正则表达式：本课程详细讲解了javascript正则表达式的使用（创建、方法、元字符、表单验证等等），并带着大家写了一个一个小案——例歌词滚动。

4. JavaScript全套：本教程，集合了图文、视频、代码、项目所有内容，让你全方位立体式的进行JavaScript的学习。

5. jQuery入门：极大地简化了JavaScript 编程，很容易学习，有需要的小伙伴可以了解下。

6. Gulp入门：使用 gulp 打包构建工具进行项目的开发环境和生产环境的打包，进行代码的压缩和转码。

7. Express4实战：一个基于 node 的后端开发框架 express，进行基础服务，路由，中间件，接口编写，及后端常用插件的使用（jsonwebtoken / express-jwt / ...）的使用。

8. Bootstrap入门：主要介绍，Boostrap的栅格布局原理和使用，表单，表格的常见效果，按钮样式如何设置，常见的组件，javascript插件的使用。

9. 逻辑思维训练：本套课程主要针对编程小白，通过对逻辑学的基本分析，让小白了解到逻辑思考的方法，然后，再通过系统的训练，对逻辑思维进行提高。再结合编程训练题目，有效的帮助学生提高编程能力。

三、前端高端视频

1. React技术全家桶：本视频将从React项目中带领着大家从0开始，创建一个完整的web项目。让大家从基础到精通的了解react的企业级别开发流程。完整的webApp项目：知识点包含react基础、高级的知识以及状态管理和路由（react全家桶）等等。

2. 常用的4种设计模式：本教程讲解了4个设计模式：单例模式、观察者模式、发布订阅模式、策略模式。

3. Web支付开发：讲解了最常用的两钟支付：支付宝支付和微信支付；课程内容：1、前期准备，账号申请 2、服务器配置 3、微信API对接 4、支付宝API对接。学完本课程可以学会微信支付、和支付宝支付开发。

4. 移动端网站布局：学习完本节课可以让大家领略到如何开发一个专属于您自己的“手机APP”。

5. 微信小程序设计：介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、微信小程序API、微信小程序设计及问答；结合综合案例应用，包括改智行火车票12306微信小程序、改糗事百科微信小程序、改中国婚博会微信小程序3个综合实战案例。

6. Node.JS经典版教程：本教程旨在引导前端开发工程师，以及Node.js初学者走进这个活泼而有富有生命力的新世界。

7. MongoDB数据库全套：本套课程由浅入深给大家介绍MongoDB数据库安装&CURD及接口API开发原理，循序渐近，适合新手进阶。

8. VUE全套教程：本课程以项目实战为驱动，以轻松幽默的评书演义，帮你打开通往Vue.js的任督二脉，并帮助你迅速从vue2过渡到vue3, 让你迅速成为一个优秀的Vue.js开发人员。

9. React入门到大神：本视频将从React项目中带领着大家从0开始，创建一个完整的web项目。让大家从基础到精通的了解react的企业级别开发流程。

10. 微信小程序：微信小程序课程，全面讲解小程序最新特性，通过学习本课程全面掌握小程序开发。

11. 微信公众号开发：本次微信公众号开发课程，对整个微信公众号体系做一些介绍，并使用编辑模式来完成一个最基本的公众号搭建；也对公众号的开发模式做介绍，并讲解一下开发模式所需要的服务端等相关知识，包括Express、MongoDB、Robo3T、mongoose、云服务器等；将会对微信JS-SDK鉴权的整个流程进行梳理与开发；使用vue技术栈结合vant组件库，构建web应用并集成到微信公众平台中。

12. uniApp视频全套：主要用来开发小程序，一套代码多端应用，从基础使用，到项目练习，到发布流程，全过程学习。

13. Nuxt框架：深入浅出的讲解nuxt框架的使用、SSR（服务器端渲染）。

14. Webpack4.0教程：掌握webpack4.X的使用。包含webpack4介绍、安装与基本命令、配置文件、加载器和插件等；零基础很好的入门教程。

15. Flutter全套视频：Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。在开发时可以提供毫秒级热重载，拥有富有表现力，漂亮的用户界面，接近原生的性能。同时也可以非常方便的与原生代码集成，是移动端app开发的不二选择。

16. GraphQL入门到精通：GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

17. angular入门精讲：本课程主要讲解angular的学习，从基础应用到实战的学习。

四、前端前沿技术视频

1. ES2020 新特性：本节课程要带大家学习ES2020 的新特性。 1.ECMAScript 各个版本的区别和由来。 2.版本更新的特性 3.es2020每个更新的重要特性。

2. Dart Flutter开发教程：本课程全面讲解dart2.0新特性，以及使用dart开发angular,flutter,本基础从入门到精通，为后续项目开发做好准备。

3. kbone教程：了解什么是Kbone，kbone和其他的多端解决方案有什么本质区别，Kbone的实现原理是什么，什么时候选择Kbone。学会如何从 0 起步，如何应用 Kbone开发项目。同时学习如何应用kbone改造已有项目。这个课程还会介绍kbone的高级应用，以及 kbone 官网给出的代码优化方案与开发建议。

4. Ajax入门全套：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

5. Mpvue入门教程：本课程以项目实战为驱动，深入对比mpvue与vue的区别，帮你迅速打通从vue到多端小程序的任督二脉，让你站在巨人的肩膀上，“一次开发，到处运行”。输入的是vue代码，输出的是微信小程序，百度小程序，支付宝小程序，头条小程序。

6. DvaJS视频精讲：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

7. Electron-HTML+CSS+JS桌面应用程序：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。可以极大的提高桌面应用的开发调率。

8. TypeScript全套视频：本视频介绍了TypeScript的基本技能点，以及最后整合到Taro上进行应用。包含了原始类型-任意类型-类型推论；TypeScript对象类型和数组类型；TypeScript函数类型-类型断言；TypeScript枚举-类修饰符-泛型。

9. Taro开发框架：掌握Taro多端框架快速上手小程序/H5高效开发,各大厂商和各大公司都在积极布局小程序应用，都在争夺流量的入口。对前端开发者而言，众多的技术栈中需要逐个学习，逐个开发。Taro的推出适应了潮流及趋势：一套代码运行在多种小程序/H5/React Native上，React式的代码风格便于学习，详实的项目开发过程带你了解Taro开发。一套代码，通过Taro编译工具运行在各个客户端，即便出现新兴框架，仍然可以在Taro上适配。

五、前端项目视频

1. 贪吃蛇小游戏：JS 前端模块化的发展历史，优缺点及应用（IIFE， AMD， CMD， ES6），包含一个模块化案例贪吃蛇。

2. 仿小米电商网站：本项目是基于原生JavaScript等前端技术实现的仿小米电商网站。本项目前端代码设计技术栈有（JQuery、scss、Gulp、模块化开发），后台构造技术包括（PHP、MySQL）等后台编程知识。（建议先去学习这些知识点以后，再去入口本项目）。

3. React美食网：React 的目标群体历来是喜欢尝试新事物的开发者和前端专家.本视频从企业级实战开发的角度进阶全方位的给大家展示react开发的流程。让大家从项目中了解到各个知识点的使用。

4. 职位管理系统：简单易懂，让大家从项目中了解到各个知识点的使用。

5. 资产管理平台：毕业设计论文辅导，附全套笔记资料。

6. NodeJS+Express+MongoDB实战项目：本套“NodeJS+Express+MongoDB”实战项目课程，以文章管理系统为例，实现了两大模块的功能开发，分别是登录注册模块和文章管理模块，可以充分帮助大家了解Node.js。

7. React项目教程：React 的目标群体历来是喜欢尝试新事物的开发者和前端专家.本视频从企业级实战开发的角度进阶全方位的给大家展示react开发的流程。让大家从项目中了解到各个知识点的使用。

8. React管理后台：本项目是一个使用react+antd开发的商城系统的管理后台，里面包含一个管理后台的基础功能，如：登录判断，接口调用，数据展示和编辑，文件上传等功能。通过此项目，可以学习到react的一些常见用法和antd中常用组件的使用方法。学习到如何通过react快速的进行项目开发，学会使用redux对数据进行集中式管理。

9. uni-app项目实战：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。掌握知识 uni-app 开发,跨平台,条件编译,浏览器跨域配置,多平台编译,uniapp基本使用,项目构建,全套课程。

10. ReactNative项目之美食App：本套课程讲解了最新版本React Native的基础知识，借助Expo开发平台，实现了精美的美食App。课程中涵盖了RN中绝大多数API和组件的讲解，另外讲解了Expo开发平台提供的额外SDK API以及如何借助Exp工具实现React Native项目的远程打包。