对标一线大厂,从 0 到全栈大前端高级工程师

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

Web前端开发学习路线