2022年web前端培训自学路线图
时间：2023-05-16 20:54:01 | 来源：网站运营
时间：2023-05-16 20:54:01 来源：网站运营
2022年web前端培训自学路线图：
初学者详细Web前端学习路线图一、基础知识1、前端基础合集（含HTML、CSS、HTML5、CSS3）涵盖了HTML、CSS、HTML5和CSS3的核心技术点。通过对本教程的学习，可以帮助初学者快速上手，并完成大部分静态网页的开发。除此之外，课程涵盖大量的CSS技巧、动画、交互效果，对传统浮动和定位的布局方式，以及CSS3中的弹性盒和响应式布局都有深入讲解。
2、HTML5实战综合HTML5的各个方面来构建一个fullpage（全屏滚动）的应用。会从实战的角度深入全面的分析HTML5中的技术。并将技术灵活的运用入项目实战中。应用主要内容包括：1.dom中位置尺寸api详解;2.鼠标事件的兼容;3.全屏滚动的实现; 4.3d轮播的实现;5.3d品牌墙的实现;6.机器人动画实现;7.图片炸裂动画实现;8.canvas气泡动画实现。
3、Bootstrap全面剖析css3中的新增的各类属性与方案。深入了解预处理less，并从源码的角度解读Bootstrap相关实现。
Bootstrap是一套简洁、直观、强悍的前端开发框架，它可以让web开发更迅速、简单。
4、JavaScript核心涵盖了ES标准、BOM以及DOM的大部分内容，适合有一定HTML和CSS基础的同学学习。 通过学习可以初步掌握JavaScript，对面向对象的语言有一个初步的理解。并且能够通过DOM和BOM完成一项基本的页面效果。 JavaScript的基础对于一名前端工程师非常重要哦
5、JavaScript高级深入浅出讲解JavaScript核心也最具难度的部分技术：原型与原型链、执行上下文、执行上下文栈、变量提升、函数提升、作用域、作用域链、闭包、对象的多种创建模式、对象的继承模式、JavaScript事件循环机制等。这部分技术是成为高级前端工程师需要掌握的利器。
6、jQueryjQuery是使用广泛的JS函数库， 它能帮我们程序员简化DOM查询及DOM操作， 轻松实现动画效果。全面深入讲解jQuery库的使用技术， 以及基于jQuery的项目开发技巧。
二、高阶技术1、ES6（涵盖ES6-11）现阶段前端行业发展迅猛，前端技术也在高速迭代，ES6-ES11规范增加了很多JavaScript新特性。ES新特性已经成为前端技术发展的趋势，语法简洁，功能丰富，部分特性还有性能提升。
2、Promise由浅入深，通俗易懂，对复杂的实现庖丁解牛，分步拆解，采用闯关式设计，循序渐进的讲解，更具学习的趣味性。内容涵盖前端与后端异步编程任务实践，让你宏观认识Promise。
3、JS模块化说明当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理。 本视频内容涵盖：理解模块化，为什么要模块化，模块化的优缺点以及模块化规范。
4、NodeJS核心技术Node.js 简介、下载、安装、模块化、CommonJS、NPM、以及 Buffer、fs等模块的基本使用。 本视频适合有一定 JS 基础的同学进行学习，Node.js 是前端开发需要掌握的技能之一。
5、MongoDBMongoDB 是使用广泛的 NoSQL 数据库之一，在实际项目中应用也越来越广。 学习涵盖了MongoDB简介、下载、安装、添加系统服务、图形化客户端的使用、以及MongoDB的CRUD基本操作、查询/修改操作符的使用等。该视频适合有 Node.js 基础的同学学习。
6、AJAX技术AJAX技术能够实现无需重新加载整个网页，就可以更新部分网页内容。在WEB应用中AJAX使用十分广泛，百度，淘宝，京东等常见的PC端网页以及各种WEB App, 随处可见它的身影，AJAX已经成为前端工程师的常备技能之一。
7、xiosaxios是一个基于Promise的HTTP客户端，可以用在浏览器和node.js中，向服务器发送AJAX请求进行数据交换，是现在前端炙手可热的请求工具。
8、Git学习从本地客户端的角度讲解Git和GitHub，并着重通过一些案例来演示Git的底层原理，能够对Git和GitHub有更清晰的认识。
9、Webpackwebpack作为现代前端开发中广泛使用的模块打包工具，广泛应用于前端工程领域，是前端工程师所需的技能之一。全球知名公司（如：谷歌、阿里、腾讯等）都在使用webpack作为常用模块打包工具。
学习涉及知识点：tree shaking、code spilt、caching、HMR、PWA、lazy loading、prefetch、Dll等核心配置。
10、Webpack高级进阶学习内容包含React/Vue版本脚手架分析、基于Webpack5编写自己的loader和plugin等，让你开发时选择更多样，最后，用不到一百行的代码实现Webpack打包。
11、React全家桶师出名门的UI组件库：antd（蚂蚁金服出品），集中式状态管理的经典之作：Redux，消息订阅与发布理念中的老大哥：Pubsub，同时扩展了React的hooks、错误边界、Context等内容，全面且系统的知识点剖析，轻松驾驭真实项目！
12、Vue全家桶Vue是一套用于构建用户界面的渐进式JavaScript框架，是目前最火的前端框架之一，是前端工程师的必备技能。
13、TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言。TypeScript是JavaScript的一个超集，支持ES6标准，可以编译成纯JavaScript运行在任何浏览器上。
14、Vue3新特性基于Vue3.0版本，对Vue3.0版本的新特性、Composition API、新组件及TypeScript进行了详尽的源码级讲解。
15、微信小程序新版采用项目驱动式讲解，以网易云音乐为原型进行项目构建，使用网易云音乐真实API接口数据，且最终效果同网易云音乐App保持一致，做到真正的企业级项目讲解。
16、前端热门面试题内容涵盖：HTML,CSS,JavaScript基础到高级的内容，移动端经典问题，js经典笔试题，node.js，React，Vue，小程序等。通过面试题的讲解，既能了解前端的整个知识体系，又能在面试中游刃有余。
三、综合实战1、项目实战：谷粒音乐谷粒音乐是使用WEB技术(HTML、JavaScript、CSS)直接构建的移动端App。
2、Vue项目实战：硅谷外卖项目是关于外卖业务的前后台分离Web App，功能模块包含商家, 商品, 购物车, 用户管理等多个模块。
3、Vue项目实战：尚品汇前台+后台，双项目实战，前后端项目二者相互独立，又可以结合在一起，满足对大型Vue项目实战的需求，覆盖Vue框架方方面面的知识点，全面、详细！
4、项目实战：硅谷直聘项目是基于新版本 React 的全栈项目，此项目为一个前后台分离的招聘的 SPA, 包括前端应用和后端应用。
5、React全栈项目：谷粒后台“React全栈SPA项目”，依托某大型企业级电商网站，使用React全家桶+AntD框架实现电商的后台管理系统。
6、微信公众号从零开始学习微信公众号，从开发套路到整体功能实现，以express框架为基础，搭建一个完整的Node.js服务器后台。
四、选学（技术丰富）1、Zepto作为一个轻量级、又和jQuery类似的前端框架，Zepto是很多工程师移动端开发的选择。
2、AngularJS进行基于AngularJS框架的应用开发，并对后续学习React和VUE框架打下良好基础。
3、项目构建工具Gulp学习使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到实现自动化构建项目。是前端工程师所需的技能之一。
4、Vue源码解析直达核心，分析Vue底层工作原理，将Vue核心模块一一拆解，手写底层源码。
5、项目构建工具Grunt使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到实现自动化构建项目。是前端工程师所需的技能之一。
6、自定义工具函数库构建一个属于自己的工具函数库，掌握常用数组、对象、字符串函数的实现原理，掌握事件总线的实现原理，掌握消息订阅与发布的实现原理，以及事件委托及其功能函数的封装。
纸上得来终觉浅，绝知此事要躬行。冲鸭~~~
在线咨询
