掌握未来趋势的前端开发成长之路
前端开发成长之路
入门
1.WEB 网页基础、编程基础
HTML5+CSS3入门
课程内容：
熟悉HTML5入门基本内容(代码文件、基本结构、注释、编程
问题、规范、基本标签等)，掌握CSS3的基础入门知识。内容涵盖:(HTML标签与布局、超链接、多媒体、列表、选择器、 CSS文本样式与背景、CSS盒模型、浮动布局等)
项目实战：登录布局，登录注册
Photoshop
课程内容
采用商业案例来学习Photoshop使用，掌握Photoshop基本操作;能够独立的进行网页切图
项目实战
博客项目网页切图、量尺寸
企业多方案综合项目切图、量尺寸、标注像素
HTML5+CSS3进阶
课程内容
掌握继承与优先级;HTML表格与表单;掌握css3新特性;能够进行合理的网页布局，完成第一个完整的静态网页的开发制作。
项目实战
完成个人博客开发，完成入门第一个项目
企业网站多方案综合项目实践，从多套企业项目中，选择一套，完整整站开发，可以达到开发网站水平。内容包含:(-项目搭建，样式设置;站点首页制作;思路及布局实现-企业站点模板思想等)
javascript基础语法
课程内容
了解最前沿JavaScript知识。掌握JS基础基本语法和基本语句，
培养编程逻辑思维，实现网页的动态交互.内容涵盖:(基础语法与数据类型、流程控制语句、函数、数组、对象)
项目实战
综合案例实践:实现H5音乐播放器、实现H5小游戏
BOM编程
课程内容
认识和了解BOM和DOM模型;掌握windowlocationhistory navigatordocument等对象的使用;掌握事件处理和DOM节点BOM组成，掌握计时器(间歇调用、超时调用)等知识
项目实战
基于BOM实现倒计时秒表，商品抢购倒计时案例
DOM编程
课程内容
DOM节点操作(增删改查)操作文本节点事件四要素事件绑定事件处理函数返回值
项目实战
DOM元素移动动画案例
Javascript实现交互效果
课程内容
使用JavaScript实现网页上常见的各种交互动画效果，内容包含:(:回到顶部、在线客服、选项卡效果:导航二级菜单、商品分类二级菜单、手风琴效果、轮播图效果)
项目实战
回到顶部、在线客服、选项卡效果
导航二级菜单、商品分类二级菜单
手风琴效果、JS手写实现轮播图效果
版本控制工具 Git/SVN
课程内容
掌握SVN/GIT版本控制工具来维护项目的整个蓝图;熟练使用Github来管理云端代码仓库，快速项目组成员多人协作
项目实战
起微低代码项目实战，内容包含:(开发整体思路、环境搭建、首页整体布局、头部尾部公共模块制作、导航菜单;图片切换、盒子阴影的使用、定时器、CSS3透明度、动态模板抽取;数据渲染、事件委托、自定义属性、模板字符串的使用;API详情页 Banner、内容主区域，编码规范与最佳实践;案例页顶部导航、侧边导航+楼层滚动效果、回到顶部功能实现;精灵图的使用，公共逻辑的抽取与复用、按钮级禁用控制)
中级
2.H5进阶、JS中级、前端工程化
HTML5+CSS3高级新特性
课程内容
掌握前端Web存储主流方案，LocalStorage和SessionStorage;视频和音频的使用，Web字体的使用，过渡，动画，变形等实现各种丝滑流畅的特效交互
LocalStorage
IndexedDB
Cookie
项目实战
实现搜索历史记录功能模块
手写实现一个视频播放器，可以切换小结，进度控制，播放暂停等功能
项目实战
纯前端在线画图工具实现与存储
Flex布局和移动端适配
课程内容
Flex布局完美适配各个终端，掌握业界主流的响应式布局方案
项目实战
使用Flex实现京东/淘宝/携程的移动端布局
JS中级进阶
课程内容
深入函数细节，全方位讲解函数的方方面面，突破JS数组的20个常用方法;玩转合并对象和各种循环对象，深入BOM的hash- change和pushState为框架路由底层原理打下坚实基础;正则实现前端各类变得教研，DOM事件流程深入分析
项目实战
可排序、过滤、率先的复杂动态表格JS实现
复杂表单的正则验证综合实践
数据可视化Echart
课程内容
掌握echarts的各种玩法，高度自定义echarts，实现常见的前端数据可视化
项目实战
移动端饼图、折线图、堆叠条形图、柱状图综合案例
Node模块化 NPM和Yarn包管理
课程内容
node模块化，包管理npm和yarn，打包工具webpack，为前端工程化铺垫
项目实战
从零实现一个多页面打包项目脚手架
Webpack5自动构建和前端工程化
课程内容
基于Webpack从零搭建项目脚手架，完成从0到1搭建项目工程目录，支持切换开发和生产环境，启动开发服务器，打包上线
项目实战
从零实现一个多页面打包项目脚手架
高德地图API
课程内容
掌握高度地图API的正确使用方式，实现定位，绘制图标，绘制线条，实时绘制运动轨迹等复杂交互
项目实战
实现跑步定位和运动轨迹绘制
Ajax前后端数据交互
课程内容
前后端数据交互技术ajax，局部刷新浏览器，增强用户体验
项目实战
Fitness健身分组项目，改项目使用 git进行版本控制，分支管理。基于 Webpack从零搭建项目脚手架，完成从0到1搭建项目工程目录，支持切换开发和生产环境，启动开发服务器，打包上线。项目包含20+移动端ui界面实现，数干行高质量的原生JavaScript;css预处理，数据可视化echarts，Swiper插件、文件上传FormData，微信weui、播放器内核、跑步骑行运动轨迹绘制、几十个Ajax接口的前后端联调，完成本项目，JavaScript水平会得到极大提升，Ajax前后端技术会无比娴熟。
高级
3.Javascript高级编程和框架核心思想
JavaScript高级编程
课程内容
JavaScript面向对象编程思想，深入理解作用域、闭包、原型和原型链、继承、this、IIFE、构造函数，类和实例对象等知识
项目实战
手写深拷贝和浅拷贝
手写ES5寄生组合式继承
ES6、ES7
课程内容
ES6新特性:解构、扩展运算符、模板字符串、箭头函数、对象的简洁写法、类、静态属性、原型方法、实例对象、ES6的模块化以及模块化的优势。以及Promise和Async。Await异步编程
项目实战
Promise解决回调地狱
async和await异步编程解决回调地狱手写符合A+规范的Promise
组件化模块化开发
课程内容
模块化历史,AMD/CMD/COMMONJS/ESMODULE，ES6模块化的导入和导出，模块化开发的好处
项目实战
模块化代码实现一个抽奖程序综合实践
WebSocket双向通信
课程内容
掌握HTTP协议，客户端数据传输方式，掌握WebSocket在 HTML5领域的应用场景，用于实现客户端和服务器的长链接
项目实战
实现多人在线聊天室
MySQL
课程内容
掌握MySQL的安装;以及增删改查的操作
项目实战
实现一个前端到后端到数据库全栈完整流程的新闻发布系统
Express
课程内容
掌握Express服务端框架的安装使用，路由的编写，请求对象和响应对象的使用
项目实战
实现一个前端到后端到数据库全栈完整流程的新闻发布系统
Vue2框架编程
课程内容
掌握Vue的单文件组件，指令、双向数据绑定、生命周期、胡须表达式Mustach、插槽、混入、全局指令，全局组件、组件封装、计算属性、过滤器等特性，熟练使用Vue组件化开发大型企业项目
项目实战
基于Vue全家桶的外卖商家后台项
Vue-router路由管理
课程内容
掌握路由的hash模式和history模式使用，使用路由管理大型项目，内容包含:路由配置、实例对象、信息对象、元数据 keepalive路由守卫等知识
项目实战
基于Vue全家桶的外卖商家后台项
Vuex状态管理
课程内容
Vuex的五大核心state/mutations/actions/getters/module以及相关的辅助函数mapState/mapGetters/mapActions/ mapMutations，命名空间拆分仓库等知识
项目实战
基于Vue全家桶的外卖商家后台项
Elementui/Iview VantUl ui框架的
课程内容
使用PC端ui框架element-ui/ivew或移动端ui框架vantui，完成组件化高效开发
项目实战
基于Vue全家桶的外卖商家后台项
DataV数据大屏
课程内容
数据可视化和物流大屏在各大企业中目前是比较主流的需求
商业图表的实现对于前端工程师来说，已经是不可或缺的能力
Datav都是比较成熟的数据可视化大屏方案，是基于Vue和 echarts的组件库
项目实战
数据可视频大屏项目
Vue3框架编程
课程内容
掌握Vue3的Proxy，新的响应式ref和reactive，组合式 CompositionApi的使用，以及Hooks的使用，使用Vue3完成大型项目开发
项目实战
vite+Vue3家修管理后台系统项目
@vue/cli
课程内容
搭建项目脚手架，基于TS的配置和JS的配置，Vue2的版本和 Vue3的版本，创建Vueconfigjs，修改脚手架配置，优化性能
项目实战
vite+Vue3家修管理后台系统项目
Vite
课程内容
新一代构建工具，搭建Vue3项目，极速启动打包，实现大型项目秒刷，无需等待编译
项目实战
Vite工具使用
TypeScript
课程内容
TypeScript基础类型、变量声明、接口、类、函数、泛型、枚举、类型推导、交叉类型、联合类型、类型保护、装饰器、 tsconfig等完整的TypeScript语言知识点
项目实战
TypeScript+Vue外卖App项目
MVVM源码解析
课程内容
MVC和MVVM源码解析，深入Vue2和Vue3的底层原理，手写实现Vue2和Vue3的响应式系统，双向数据绑定，发布订阅等
项目实战
手写实现mini版本Vue
uniapp/Taro微信小程序
课程内容
微信小程序作为引爆H5时代的标识技术，通过学习了解视图层逻辑层相关知识，深入小程序框架和组件的使用
uni-app是一个使用Vuejs开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5 小程序等多个平台
Taro是来自京东凹凸实验室的多端统一开发框架Taro，可以让你使用一套代码打通WebApp 微信小程序 支付宝小程序、百度智能小程序、字节跳动小程序等
项目实战
电影小程序
四海香美食小程序
React基础
课程内容
基础更新:组件分类(智能组件VS木偶组件、受控VS非受控)生命周期、setState、同步与异步现象差异、Redux
项目实战
电影app
React进阶
课程内容
React进阶:SCU优化，PureComponentReact Hooks(useEffectuseStateuseMemouseCallback) React 与Vue大对比
项目实战
电影app
React-Router
课程内容
大型项目路由拆分、路由管理，路由传参等
项目实战
房产app
React Hooks
课程内容
React新特性StateHooks和EffectHooks
项目实战
社交电商后台管理系统
类组件与函数式组件
课程内容
类组件和通数组件写法，对比，优劣势、生命周期
项目实战
社交电商后台管理系统
Ant Design 和 Ant Design Mobile ui框架
课程内容
pc端ui组件库和移动端ui组件库的使用，查询API文档的能力
项目实战
社交电商后台管理系统
AntV 数据可视化
课程内容
蚂蚁加载数据可视化库的使用
项目实战
物流大屏数据可视化
React Native/Flutter
课程内容
基于React的移动端混合式开发框架
项目实战
ios，addriod 本地生活app
Worker
课程内容
WebWorker
项目实战
定时算法演练
chrome插件扩展开发
课程内容
基于chrome插件扩展实现页面集成，数据集成
项目实战
多系统合成，多个系统,进行页面集成
低代码前端架构
课程内容
页面交互引擎
事件机制
交互动作
页面呈现引擎
列表
编辑
详情
报表
打印
2D
3D
元宇宙
未来的呈现集成扩展机制
前端组件引擎
组件封装规范
按需加载机制
组件适配机制
前端模板引擎
前端流程引擎
前端逻辑引擎
项目实战
实现前端低代码框架
前端低代码集成后端低代码引擎
通过自研低代码平台搭建企业官网
通过自研低代码平台搭建微信小程序应用
通过自研低代码平台搭建后台管理系统
前端自修课
课程内容
(1) Vue3 源码解析
(2)前端设计模式
(3)前端数据结构与算法
(4)数据可视化-图形
(5)Web3D与WebVR新视角
(6)Vite背后的秘密
(7)从ReactDiff前端算法
(8)古今Web跨平台方案
(9)浏览器多进程架构(含事件环与宏微任务)
(10)Canvas
课程内容
掌握HTML5绘图API-Canvas，熟练绘制直线、矩形，圆型等图案，能够手动绘制折线图、饼状图、柱状图等常见报表图形能够实现H5小游戏
项目实战
象棋对战小游戏
(11)SVG
课程内容
掌握 熟练绘制直线、矩形，圆型等图案，能够手动绘制折线图、饼状图、柱状图等常见报表图形能够实现流程图
项目实战
在线流程设计图
项目实战
任选一门课程，学员进行技术理论分析输出报告文档，并举一反三实现特定项目场景