Step1：HTML5 + CSS3 网页布局 - 入门到精通
HTML5 + CSS3 作为 web 前端开发工程师的入门课程 ，好入门，难精通。CSS 布局技术是实现精美页面的核心技术,做个有深度的前端工程师，必需要打牢 CSS
网站布局
核心技术
核心技术
课程内容
- html标签：h1-h6、p、b、span、a、img、ul、ol、dl、table 表格、form 表单...等
- html5 标签：video、audio、语议化标签、html5 新增表单...等
- css 基础：字体属性、文本属性、列表属性、vertical-align、其它样式、盒模型、定位、浮动、选择器、元素类型转换、背景
- css 高级：id与class选择器、交集与并集选择器、后代与伪选器、高级选择器、权重计算、css 继承、字体图标、精灵图、字体
- css3样式：圆角、阴影、var、calc、css3 选择器、伪元素、2D 与 3D、transition 过渡 、animation 动画、animate.css 动画库...
- 常见难点：兼容性、元素间空隙、外边距合并（穿透）、div 塌陷...等
- 开发工具：蓝湖、VScode、Typora
-
课程案例：
整个核心基础课程包含 120 个经典小案例
-
综合项目：
能独立开发像小米官网、天猫商城、京东商城等大型网站页面布局
Step2：移动 WebApp、多端响应式项目开发
现在移动端的市场份额越来越大，pc + 移动网站成为了一家企业的标配。作为开发人员，pc + 移动布局是必需要掌握的最基本要求。
移动+响应式
各种终端布局
各种终端布局
课程内容
- Flex布局： Flex 基本概念、容器属性、项目属性、flex 实战
- Grid 布局： Grid 基本概念、容器属性、项目属性、浏览器私有前缀写法
- 核心基础： 移动端项目开发必备核心知识（像素、分辨率、物理像素、逻辑像素、设备像素比 、viewprot ）等、真机调试、移动端常用单位
- 移动端布局： 百分比布局、rem 布局、vw 布局、混合布局
- 常见问题： 图片缩放、背景图缩放、精灵图使用、元素正方形缩放、经典1像素问题
- 响应式基础： @media 媒体查询、断点（阈值）的设定、2种响应式适配方案、手写栅格系统
- 课程案例： 整个核心基础课程包含10个经典小案例
- 综合项目： 水果商城移动端首页开发、b站移动端首页开发、响应式后台管理系统首页开发
Step3：云计算、云服务器实践
现在移动端的市场份额越来越大，pc + 移动网站成为了一家企业的标配。作为开发人员，pc + 移动布局是必需要掌握的最基本要求。
云计算
云服务器实践
云服务器实践
课程内容
- 云计算的应用 与 实践： 云计算本质、应用、阿里云无影桌面、特点、服务类型，IaaS、Paas、SaaS 三者的区别，对比， DaaS ，云计算的发展 与 未来，低代码、无代码、开发流程变革、演进、发展路径、开发者变革，市场规模，国内低代码知名厂商，全球 6 大云服务厂商基础设施：球 IaaS 供应商 TOP5，国内云计算市场规模，AWS、微软云、阿里云、Google 云、华为云、腾讯云，云原生、互联网技术架构演进，分布式、高可用、集群、负载均衡、正向代理 和 反向代理，云原生 和 容器化
- ECS 云服务器的创建和配置： 阿里云、腾讯云、华为云 具体实操，登录注册相关账号，云服务器 ECS 的选择，公共镜像 和 存储大小，网络 和 安全组，系统配置、分组设置，创建实例，服务管理，获取服务器 IP
- 远程连接云服务器，Linux 系统： XShell 和 XFTP 免费版下载安装技巧，远程连接服务器操作流程，命令行链接测试，Linux 系统树状目录结构，相关目录：系统启动、指令集合、外部文件管理、临时文件、账户、运行过程、扩展，常用命令行、注意事项
- Linux 下 Nginx 端口转发与部署： Nginx Web 服务器本质，如何使用官网学习，Nginx 下载安装方式（yum 安装、源码安装），Nginx 常用命令行、启动 Nginx 服务器、完全卸载 Nginx、配置文件详细解读 + 实践，企业级服务配置，多系统部署与发布
- 域名解析，使用 Git 在服务器端部署： 注册域名、域名备案、解析域名到对应的服务器（顶级、二级、三级域名），SSH 登录服务器，Linux 服务器安装 Git，下载代码到服务器，Nginx 服务配置和发布
- Nginx 配置 HTTPS 加密协议： SSL 证书服务、作用，SSL 证书购买，提交免费证书申请、DNS 验证、下载证书，DNS 验证，在 Nginx 服务器上安装证书、Nginx 文件配置，设置 HTTP 请求自动跳转 HTTPS（301 跳转）
- 项目在线部署： 基于 Node 部署（ 服务器端安装 Node、手写 Node 静态资源服务器，部署静态网站、使用 PM2 管理进程），基于 Nginx 部署（服务端安装 Nginx、 修改 和 优化 Nginx 配置文件、使用 Git 或 手动拉取代码、单个网站 或 多个网站部署、域名注册、备案、解析、服务器选择购买、配置、HTTPS 加密、301 跳转、SEO 优化等等 .....）
- 课程案例： 课程中包含9大实战应用案例
- 综合项目： 水果商城移动端首页开发、b站移动端首页开发、响应式后台管理系统首页开发
Step4：JavaScript 核心基础、高级进阶、算法
JS是前端开发工程师最重要的 "看家语言"，JS 功底的好坏，决定了职业高度
JavaScript入门
到实战
到实战
课程内容
- JS 核心基础：JS 简介、语法、变量与字面量、数据类型、类型转换、表达式、操作符、位运算、流程控制语句、数组、函数、作用域、变量与函数提升、面象对象、原型和原型链
- JS 高级：defineProperty 方法、公有属性和方法、私有属性和方法、静态属性和方法、JS 继承、内置构造函数、三大包装类、Math 与 Date 对象、正则表达式、JS 执行原理、闭包、垃圾回收、立即执行函数、错误处理、左查询、右查询
-
DOM 与 BOM：
DOM 样式、节点操作、DOM 事件、事件流、事件对象、事件委托、定时器、延时器、CSS3 动画、防抖节流、鼠标事件、拖拽事件、window 对象属性、事件、方法
- JS 动画：匀速运动、减速运动、限时动画、过渡动画、拖拽动画、碰撞检测、滚动缩放动画、懒加载、滚动加载更多、吸顶盒、楼梯式导航、全屏轮播、
- JS 算法：算法理论基础入门，时间复杂度和空间复杂度的分析与计算、穷举法、累加器、累乘器、双指针、跳步、递归算法、冒泡算法、快速排序算法、二分查找搜索、堆、栈、队列
- 课程案例：课程中包含 60+ 实战案例
Step5：ES6 ~ ES14
ES6 ~ ES14 引入了诸多新的语法和特性，这些新特性极大地丰富了 JavaScript 的功能和表达能力，提高开发效率。
ES6 ~ ES14
课程内容
- 核心基础：let 和 const 、Symbol、Bigint、模板字符串、箭头函数，解构赋值，对象字面量增强，剩余参数，展开运算符、Set、WeakSet、Map、WeakMap、（字符串、数组新、对象）新增方法
- Class类：实例属性和方法、私有属性和方法、静态方法和属性，静态块、extends 继承，super 关键字，Class 类的本质，Class 与 构造函数
- Promise： 回调地狱，Promise 的 3 种状态、resolve、reject、then 方法，catch 方法，finally() 方法，继发与并发、all 方法、race 方法、allSettled 方法、any 方法
- Module 模块化： 模块与模块系统，模块化运行环境，export 导入与import 导出、import 关键字、import 函数、Module 在实际开发中的应用和注意事项
- 其它： 设计模式-迭代器、for...of、Generator、Event Loop 事件循环、微任务与宏任务、Proxy 代理、Reflect 反射
Step6：Http 协议、本地存储、Ajax、async 与 await
学习 HTTP 与本地存储，掌握 Web 通信与数据存储，提升应用效率和用户体验。
HTTP网络请求
本地存储
本地存储
课程内容
- 前后端交互：前后端通信方式，HTTP 请求、响应，HTTP 报文，HTTP 方法，RESTful 接口设计，HTTP 状态码
- localStorage： LocalStorage 简介、基础用法、注意事项、LocalStorage 的封装、实战应用、 SessionStorage
- Cookie： Cookie 简介、基本用法、Cookie 属性（expires、max-age、Domain、Path、HttpOnly、Secure）Cookie 的封装、Cookie 注意事项、服务端设置 Cookie，Cookie 的实战应用（中英文网站切换）、Cookie、localStorage、sessionStorage 三者的区别
- 异步请求： JSON、FaskMock、Mock 数据、XHR 对象、FormData 对象、同源策略、跨域、实现跨域的三种方式( CORS、JSONP、代理）、Ajax 的简单封装、Axios 、 Fetch
- async/await： 基本用法、返回值、错误处理、async 函数各种写法、await 关键字 ，注意事项、使用 async/await 处理继发、并发问题、实战应用、（Promise、Generator、async/await ）三者的区别
Step7：Babel、webpack、Sass
前端工程化是前端开发者的必备技能之一，系统掌握 WebPack5 知识，践行前端工程化。
Webpack
前端工程化
前端工程化
课程内容
- 前置知识：常见的 DOS 命令、Node 部分知识点、npm 的基本使用、nrm 源管理器、yarn、nvm、如何开发自己的 npm 包
- Babel入门： Babel 简介、使用 Babel 在线编译器转码、Babel 的安装与使用、npm run build 背后做了什么、npx 命令
- Webpack： webpack 简介、webpack 打包流程、mode 配置、entry 入口配置、output 出口配置、loader 预处理器、plugin 插件、文件监听、DevServer 工具、source map 、Tree Shaking 、代码和图片压缩、缩小查找范围
- Sass： Sass 简介、安装、环境配置、语法、数据类型、导入 Sass 文件 和 代码拆分及引入、混合宏、Sass 代码重用、Sass 插值、Sass 注释、微信小程序中使用 Sass
Step8：微信小程序
从 0 到 1 、从前端到服务端 API、从组件化 到 架构演进，从开发 到 部署上线，千锤百炼打造有竞争力的企业商业级项目
微信小程序
课程内容
- 前置知识：微信小程序发展史、开发环境准备、团队协作上线流程
- 核心基础： 小程序目录结构、文件类型、代码结构，工程文件的分层，配置菜单栏，视图层的标签和样式、逻辑层交互，小程序的宿主环境
- 视图层组件： 小程序视图层的常用组件分类，视图层：数据绑定、列表渲染、条件渲染，代码拆分和模板语法
- 页面导航： 小程序页面导航、传参、事件、API、网络数据请求，上拉触底分页数据加载综合实践应用
- 生命周期： 小程序的生命周期 及 生命周期函数、分类，应用的（全局）生命周期函数，页面级别的生命周期函数
- 架构设计： 前后端分离架构 VS 传统架构，行业最佳实践
- 自定义组件核心基础： 小程序自定义组件，模板和样式、数据、方法、属性，数据监听器，纯数据字段，生命周期、生命周期函数，插槽， 父子组件之间的通信，behaviors
- 自定义组件封装： 自定义组件封装，内容标签页 tab V1.0 ~ V2.0 大厂组件封装，confont 字体图标库组件，自定义组件封装最佳实践（本质、原则、封装、继承、多态，使用场景、通用组件封装，自定义组件通信）
- JS 面向对象 与 分层架构设计： JavaScript 面向对象 与 代码分层架构设计，wx.request 二次封装，实现统一响应和异常处理（回调函数、回调地狱解决方案演进脉络，Promise 演进，`async/await`）
- 分层架构实践： 分类列表选项的动态化，课程预览组件封装 与 课程列表展示，上拉触底、下拉刷新，加载更多数据，内容标签页、分类切换数据联动
- 性能优化： 节流防抖函数在小程序中的应用，优化加载提示 - 骨架屏功能实现，状态展示自定义组件封装，吸顶效果 与 兼容性配置
- 小程序 npm 支持： npm 的支持与限制，常用的 npm 包 - UI 组件库，定制主题样式，全局数据共享 - 状态管理，分包加载，独立分包，分包预下载，自定义 tabBar
- 小程序云开发： 常见的多终端登录方式，小程序登录，微信小程序云开发快速入门，云开发实现注册登录
Step9：Vue3.x 全家桶
学习 Vue 框架，简化前端开发，提升开发效率，利用组件化开发模式构建高效、可维护的Web应用。
Vue3.x 全家桶
课程内容
- 前置知识：为什么需要Vue 框架、Vue 简介、Vue 组件基础、单文件组件、Vue 脚手架、
- Vite 前端构建工具: Vite简介、Vite 安装与使用、Vite的依赖预构建、Vite 开发服务启动快的原因、Vite 脚手架创建Vite 项目、Vite 中使用插件、Vite 静态资源处理、Vipt 常规配置
- 核心基础： 模板语法、事件绑定、methods、computed、 watch、表单输入绑定、class 类与 Style 样式绑定、条件渲染、列表渲染、其它指令、生命周期、自定义指令、ref 属性、nextTick 与 $nextTick、$el、$parent、$root
- Vue组件： 单文件组件 CSS 功能、组件间通信（props、emits、依赖与注入、发布与订阅）、组件 v-model、透传属性（Attributes）、插槽 Slots、动态组件component、异步组件 defineAsyncComponent
- 组合式API： setup 函数、reactive、ref、toRef、toRefs、shallowReactive、readonly、isReactive、shallowRef、isRef、unref、customRef、setup基本用法、watch、watchEffect、自定义指令、props、emits、透传属性、expose、依赖provide 与注入 inject、生命周期钩子、hooks、组合式 API 常见疑问
- 渲染机制： Vue 描述 UI 的 2 种方式、虚拟 DOM （虚拟 DOM定义、手动创建虚拟 DOM、自动创建虚拟 DOM ）、Vue 渲染函数、Vue 渲染机制、深入 h 函数、渲染函数案例、函数式组件
- 高级进阶： 过渡与动画、Vue 插件开发、Element Plus 组件库、Vant 组件库、Teleport 内置组件
- Vue Router： 路由概念、后端路由原理解析和实现、MPA 多页面应用、前端路由原理和实现、Vue 中如何实现前端路由、SPA 单页应用、路由基本用法、路由传参、路由别名、命名视图、编程式导航、导航守卫、路由元信息、过渡与滚动行为、路由懒加载与动态路由、路由组件缓存、动态路由匹配
- Pinia ： 基本使用、State、Getter、Action、组合式 Store
- 项目实战： 企业级项目艾鲜生
Step10：Git 分布式版本管理
学习 Git ，掌握版本控制精髓，高效管理代码变更，促进团队协作，保障项目安全，提升开发效率，是开发者必备技能。
Git 版本控制
课程内容
- 初始 Git：为Git 简介、版本控制、发展史、Git 安装、初次运行 Git 前配置、使用Git管理项目
- Git 基础操作： 生成版本、撤消操作、版本重置、Git 忽略文件、Git 分支操作、Git 远程仓库、Tag 标签
- Git 应用： 单人异地开发、团队内多人协作开发、跨团队协作开发 （fork 他库、发起pull Request）
- 其他： 变基（rebase）、ssh 免密登录、Issue 任务协作
- Git 基本概念： 工作区、暂存区、远程与本地仓库、提交、版本、分支、标签、HEAD 指针、master 分支、合并、拉取、推送、克隆、冲突、跟踪、变基、
Step11：TypeScript
TypeScript 从入门到实践，真正掌握 TypeScript 在大型企业项目开发中的最佳实践与应用，透过实际开发中的应用场景 和 底层源码 深度解析成为 TS 高手
TypeScript 入门
到实践
到实践
课程内容
- TS 简介：为前世今生，本质，Atwood 定律，重塑 ”类型思维“，为什么要使用 TypeScript，优势，环境搭建
- TS 核心基础： 类型注解、类型推导，编译 及 编译优化，TS 基本数据类型（原始数据类型、包装对象类型、Object 与 object 类型、值类型、联合类型、交叉类型），type 命令，typeof 运算符，块级类型声明，类型兼容性
- TS 数据类型： 数组类型、元组类型、any 类型、unknown 类型、never 类型、函数类型、symbol 类型、对象类型、Enum 枚举类型、interface 接口类型、class 类型、泛型、类型断言 - 高级类型：类型检查机制，类型兼容性，类型保护机制，交叉类型，联合类型，索引类型，映射类型，条件类型
- TS 模块： import type 语句，importsNotUsedAsValues 编译设置，CommonJS 模块，模块定位，namespace 命名空间，declare 关键字，`d.ts` 类型声明文件
- TS 类型运算 和 相关配置： 类型运算符，类型运算符，TypeScript 类型工具，TypeScript 的注释指令，`tsconfig.json` TypeScript 项目的配置文件，tsc 命令行编辑器
- TS 工程实践 1 ： TS 基础环境搭建、配置构建工具、ES6 与 CommonJS 的模块系统、TS 的命名空间、声明合并、编写声明文件
- TS 工程实践 2 ： TS 编译工具、代码检查工具 TSLint 和 ESLint、Jest 单元测试、TS 工程实践知识总结
Step12：NodeJS 入门 到 实战，服务端框架 到 数据库、架构设计，项目 到 云服务器在线部署
一课彻底补齐前端开发者的最后一块服务端版图，前端进击全栈必学必会技术，从 NodeJS 原生 到 框架，深入中间件 到 分层架构设计，从前端到服务端提升核心竞争力
NodeJS 入门
到 实战
到 实战
课程内容
- JS 高级应用：深入 Promise，JS 面向对象，深入理解 async 与 await，prototype 原型链查找，深入 JS 异常处理 与 异步异常，ES6+ 语法高级应用
- NodeJS 基础： 深入前后端交互，服务端数据处理，深入扩展 npm 包，开发自己的 npm 包，commonJS vs ES6 Module 模块化，服务端调试 DeBug
- NodeJS 核心 NodeJS 文件操作，Stream 数据流，上传、下载，深入 HTTP 底层原理，HTTP 请求 和 响应报文，数据格式 Conent-type，静态资源错误处理，Request 和 Response，路由，解析 URL 参数，收集 Request Body 数据
- 异步编程： 深入 NodeJS 在 Web 架构中的作用，异步编程 vs 同步编程模型，洋葱模型的应用，异步异常链 与 全局异常处理，深入 中间件，异步编程实践与应用
- NodeJS 框架： 框架 frame vs 库 lib，Koa 自定义中间件，链式调用，Koa 同步 vs 异步数据处理，多 koa-router 拆分路由层，不同方式参数解析，原生错误处理 和 错误处理中间件，常用第三方中间件，Koa 分层架构设计，Module 模块，Servise 服务层，Controller 控制器
- 数据库： MongoDB 核心配置，Compass GUI 图形界面，MongoDB Shell 客户端，Compass 命令行交互，Collection 集合，Document 文档，Mongoose ODM 库，Schema、Model，完成 CRUD、条件控制，复杂查询优化，NodeJS、Koa 框架操作 MongoDB
- 云服务器部署： 云服务器购买 与 配置，Linux 下 Node 服务部署，数据库云部署，Nginx 反向代理、多项目部署、性能优化，PM2 进程管理、log 日志，服务器域名备案、解析、DNS 验证，HTTPS 加密协议，域名 no-www 跳转 www 最佳实践，前后端联调
Step13：React
React 用于高效 UI 构建，组件化设计促进复用，丰富生态加速开发。学习 React，掌握现代 Web 开发核心技能。
React 入门
到 实战
到 实战
课程内容
- 前置知识： 为什么需要 React 框架、React 简介、创建 React 项目、React 组件基础
- 核心基础： JSX 语法与使用、条件渲染、列表渲染、事件绑定、样式绑定（行内、局部、css 模块化、预处理器 sass、classnames 插件）
- React 组件： 组件分类、state 状态、受控与非受控组件、表单元素、reducer 逻辑整合、props、context 提供数据、自定义组件
- hooks 与 API： useRef、fforwardRef、useImperativeHandle、useEffect、useLayoutEffect、useInsertionEffect、useId、自定义 hook、ahooks 库的使用、createPortal、flushSync
- 性能优化： 组件渲染与提交、React.memo、useMemo、useCallback、懒加载组件、Profiler 组件、react-error-boundary 插件、useTransition、startTransition、useDeferredValue
- React Router 路由： 路由简介、路由的本质、路由安装与使用、路由跳转、路由传参、动态路由、嵌套路由、活动链接、路由数据 API Loader 与 Action、重定向、错误处理等
- Redux 状态容器： 什么是 Redux、Redux 应用的各部及其工作原理、Redux 基本用法、Redux 的工作流、Redux API、React-redux、todos 案例、Redux 的拆分、Redux 的组合、Store 的配置、Reudx 中间件、标准 Redux 模式、手写 Redux、Redux Toolkit
- 其它： antd 组件库、zustand 状态容器、
- 综合项目： 企业级在线教育平台
Step14：云原生容器化 Docker + Kubernetes+ CICD 弹性扩容集群架构实战
云生态 Docker + Kubernetes 大规划集群架构设计落地实战 + 微服务架构实战落地部署 + CICD + 系统平台监控 + 灰度发布，实现容器弹性扩容完整系统项目课
特效与数据交互
模块化
模块化
课程内容
- 系统架构容器化扩展： 系统架构微服务化后面临的服务管理问题分析，微服务架构应对流量高峰时部署扩展复杂度问题分析，微服务架构的运维成本问题分析，容器技术选型 Docker VS Cloud Foundry
- Docker 入门到实践： 容器化演进之路，为什么是 Docker，Docker 环境搭建、架构解析，Docker 概念理解-容器、镜像、仓库操作实战，Docker 集群化部署 MySQL、Redis、RabbitMQ 等实战，掌握核心-如何使用 Dockerfile 解耦应用和部署，Docker 容器网络与通信原理、Veth-Pair 深度解析，打通 Docker 持久化-容器卷机制，大规模服务编排 - Docker Compose 实战，集群化 Docker Swarm
- Docker 企业级项目实战： 容器编排第一代思想-Rancher 集群化编排实战，Docker 构建企业 Jenkins CI 平台，Docker 生态圈：选型和优化，Docker 落地实战，部署微服务
- 容器编排 Kubernetes： Docker、K8S、Rancher 关系，K8S 的背景、组件，k8s 基础概念-Pod，网络通讯机制，生产环境搭建 k8s 集群，k8s 自动扩缩容、容灾、负载均衡实战演练，k8s 内功心法 - 资源清单、控制器、RS、Deployment、DaemonSet、Job、CronJob 详解，集群 Service、Ingress、配置集 ConfigMap、Secret 秘钥技术，Volume、PV、PVC，k8s 集群原理-集群调度原理、污点和容忍、认证和鉴权
- Kubernetes 大型企业级项目实战： Helm 使用 & 部署 Dashboard 控制面板，集成 Prometheus+Grafana 系统监控平台，集成 EFK 日志系统，实现大规模集群架构项目实战、K8S 落地实战，部署微服务
- 容器弹性扩容缩容架构实战 资源管理、属性和配额管理，有状态应用如何实现弹性伸缩和失效重置，容器弹性扩缩容实现资源触发、简单决策，容器弹性扩缩容实现负载触发、动态扩缩容，容器弹性扩缩容实现自由扩缩容
- 构建企业 CI / CD 项目实战 CI/CD 技术栈分析，Jenkins 环境配置整合，Jenkins-Pipeline 和 Blue Ocean&多分支流水线，Jenkins 中集成 Kubernetes，整合 Sonar 代码审查，规范化代码开发，案例一：Git 代码提交触发 + Maven 构建 + 代码扫描 + 邮件通知，案例二：Git 源码下拉 + 参数化构建 + 多环境部署，Rancher 打通大规模容器编排技能栈，KubeSphere 新秀崛起：平台监控、灰度发布、可视化 CICD，展望下一代 Service Mesh
- 项目实战： 基本使用、State、Getter、Action、组合式 Store
