- 课程体系|
- 知识模块|
- 项目实例|
- 更新模块|
- 2025新增|
- 课程特色|
- 课程大纲
（224G）前端全套视频教程领取
二十五个知识模块
HTML5+CSS3
模块移动端M站
模块JavaScript
编程模块jQuery
模块BootStrap
模块HTML5新特性
模块Nodejs、MySQL与Ajax
模块模块化
模块JavaScript新标准
(ES6\7\8\9)工程化
模块小程序
模块React
模块React轻量级框架之
DvaJSReact轻量级框架之
UmiJSVue
模块Angular
模块框架原理
模块UI组件库
模块协同开发
模块大数据可视化
模块微信相关
模块WebApp与混合开发
模块React-Native
模块Flutter
模块uni-app
模块
贯穿8个企业级项目
- 百战商城
- 路上旅游网
- i动音乐
- 电子商户后台
- 拍卖网站
- 生鲜采购后台管理系统
- 房屋海选平台
- 安心食疗小程序
-
项目一：百战商城
借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用 HTML + CSS + JavaScript 技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平，完成企业级电商项目PC端首页开发。
技术栈：HTML + CSS + JavaScript +Jquery三方库
-
项目二：路上旅游网
路上旅游网无线官网靠谱的旅游攻略,自由行,自助游分享社区,海量旅游景点图片、游记、交通、美食、购物等旅游攻略自由行信息。获取接口动态数据实现数据信息，包含轮播图、推荐攻略、下载加载更多等信息。
技术栈：HTML5+CSS3+JQuery+Swiper移动端项目
-
项目三：i动音乐
i动音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。获取接口动态数据实现音乐数据信息，包含推荐音乐、热歌榜、搜索等信息以及音乐播放展示。
技术栈：基于Vue脚手架搭建移动端项目
-
项目四：电子商户后台
电子商户后台项目是一个大型综合性的商城后台管理平台，主要包含人员管理与商品管理两个大模块。其中人员管理主要进行权限管理，例如只有root才有资格进行注册全新账号，不同权限用户所能操作产品的权限不同。
技术栈：Vue+Vue-router+Vuex+Element-UI+Axios+三方库
-
项目五：拍卖网站
穷游网鼓励和帮助中国旅行者以自己的视角和方式体验世界，为旅行者提供专业、实用、全面的游旅行指南和旅游攻略，是中国旅行者们分享旅游目的地信息和游记攻略的平台。
技术栈：基于React框架实现
-
项目六：生鲜采购后台管理系统
生鲜采购后台管理系统项目是一个大型综合性的商城后台管理平台，主要包含产品管理与订单管理、登录 三个大模块。
技术栈：Vue3+Vue-router+Pinia+Element-Plus+Axios + TypeScript +三方库
-
项目七：房屋海选平台
房屋海选平台主要包含房屋租赁、商城、个人中心、数据中心等多个系统。作为互联网时代房屋平台，拥有完善的房屋租赁资源搜索能力，可以根据城市定位，精确高效的搜索到需要的租赁房源信息。
技术栈：基于React框架
-
项目八：安心食疗小程序
随着社会时代的发展，大家都已经基本接近小康生活水平。也越来越多的人使用小程序方便自己得生活，不是下载大量得APP软件。安心食疗是一个关于美食介绍的小程序，同时推荐美食商城可以选购自己喜欢的食物加入购物车，实现购买美食零食。
技术栈：Vue + Ui-app + 小程序
五大更新模块
小程序云开发
React高级框架DvaJS和UmiJS
Vue企业级电商项目
移动端Flutter课程
React-Native实战开发
小程序云开发
在这个小程序泛滥的时间节点中，微信小程序是用户较多的，也是目前企业的较好选择，所以小程序开发工程师需求也是非常大，我们继增加小程序课程之后，有增加了小程序的云开发，开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
React高级框架DvaJS和UmiJS
在React的技术栈中，DvaJS和UmiJS几乎成为了必选，虽然React的学习路径很陡峭，但是这两个轻量级应用框架大大的简化了React的难度，降低了学习难度与应用难度。BAT更是把他们视为前端开发者的必备技能。我们在课程中详细讲解了这两个框架的应用。无缝对接项目实例开发。
Vue企业级电商项目
Vue的出现开始就受到了大量开发者的追随，后来者居上，在github上也超过了React的存在，也是目前前端面试的必备技能，我们课程中不仅详细的讲解了Vue的知识，同时也增加了多个实战的企业级项目，例如前台站点，音乐类项目，后台管理系统项目等。
移动端Flutter课程
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。一部分的iOS和Android开发者已经转向了Flutter开发，我们的课程中也同样增加了这部分的课程，用来充实大家的技术池。
React-Native实战开发
如果说目前通过前端实战多终端App的开发最好的解决方案自然就是React-Native了，而且也是目前使用最多的。因为我们的课程中增加了大量的完整的React课程，所以，大家上手React-Native变得非常容易。
课程变化
| 新增 |
Vue3 新特性
桌面场景
Flutter 技术
混合开发
RN 技术
UniApp 框架
实时疫情动态项目
项目部署
封装工具库
封装组件库
小程序分包
|
| 升级 |
Webpack5 工程化
React17 版本
大数据可视化
git 高级操作
小程序云开发
高级设计模式
面向对象编程
事件总线
|
| 强化 |
强化 React 基础
强化 TypeScript
强化 Vue 实站项目
强化 Nodejs 服务端
强化大数据可视化
强化多终端混合开发
强化最新 ES 规范语法实战
|
| 优化 |
Vue 项目性能优化
React 项目性能优化
Vue 项目国际化
可视化
token 流程体系优化
单点登陆实现优化
桌面程序打包优化
App 构建项目优化
|
优惠2000元（仅限前100名）
不负春光，和学习恋爱
我们的特色
真的实战类型课程，无论是三大框架
还是小程序都是企业级实战项目，
深度体会应用场景
根据学生需求更新对应课程，
适应工作需求
移动端课程优先，根据市场需求，
实时调整课程就业方法
2024年更新了前端
第六版课程大纲标准
国内技术过硬老师
师资团队
了解WEB前端（HTML5）
-
目前状态
随着互联网与移动互联网的迅猛发展和普及，传统的站点已经不在能满足人们的需求。而现在网上购物，网上直播，网上订餐等都已经成为生活的一部分。而这些内容的呈现，就是WEB前端的展示。当你在朋友圈，好友对话中随手打开的分享页面，也是WEB前端的展示。（我们尝试用通俗的方式来解释前端，可能不够标准，希望您能理解）
-
发展前景
2024年，前端仍然是一个非常火爆的专业，就如我们所见，任何技术实现的结果都需要展示给用户，而这些展示都是需要前端来进行完成。前端也不再是全部依赖于浏览器，而使用 native实现的原生 App 也是越来越多公司的选择。
-
职位方向
前端开发工程师、小程序开发工程师、高级前端开发工程师、前端架构师、高级前端架构师
-
尚学堂的前端
1.前端交互层 2.前端逻辑层 3.服务器层
-
前端交互层
交互层可以理解为特效，我们需要能实现页面的各种特效，以满足目前站点的需求，例如动画、过渡、图形绘制等
-
前端逻辑层
前端逻辑层主要体现在前端的渲染问题，我们都知道，目前都是前后端分离或者混合开发，这无疑都是需要前端来进行渲染的。也就是我们要考虑的是：模板+数据=页面
-
服务器层
作为一名优秀的前端开发者，你需要掌握服务器相关内容，node 则是我们的优先考虑，我们需要构建前端工程化，需要服务器端支持做渲染甚至需要具有完整服务器端开发的能力。
前端课程体系大纲
第一阶段：网页布局阶段
| 章节名称 | 主要学习方向 |
◆ 阶段说明网页布局阶段是前端开发工程师必不可少的入门阶段，通过讲解基础语法、开发工具的使用和大量高质量案例可以达到稳扎基础，顺利入门的效果。网页布局阶段属于尚学堂课程中一大特色，专门针对基础学员打造，避免上来就学面向对象等非常抽象概念，循序渐进，真正达到了学员听得懂、学得会。 每天一个案例，难度平稳增加，避免只学理论，避免出现“一听就会，一写就废” ◆ 阶段目标√ 操作系统发展历史√ 掌握HTML常用标签 √ 掌握 浏览器控制台调试代码 √ 掌握 Vscode软件的安装与使用 √ 掌握CSS选择器和相关属性 √ 掌握 盒子模型相关概念和应用 √ 掌握 浮动原理和使用场景 √ 掌握CSS3新特性 √ 掌握 PC端网站布局 √ 掌握 PS切图、取色、测量 ◆ 阶段特色√ 专为小白和大白设计√ 对基础更加细化，基础学员学起来更轻松 √ 大量案例，讲完即练，练会再讲 √ 每天都有主线，清楚知道每天的学习能用在哪里 √ 基于前端网页布局讲解 √ 由浅入深，循序渐进 |
|---|---|---|
| HTML |
Vscode软件应用
掌握HTML常用标签
搭建页面基本解构
|
|
| CSS |
CSS语法和引入方式
CSS选择器和相关属性
CSS浮动
盒子模型
定位等
|
|
| HTML+CSS案例 |
魅族官网
|
|
| CSS3 |
CSS3新特性 弹性盒子 伪类选择器
|
|
| HTML5 |
HTML5语义化标签 音频、视频标签 画布Canvas
|
|
| HTML5+CSS3案例 |
阴阳师官网
|
|
| 综合项目案例 |
小米官网
|
第二阶段：JavaScript基础
| 章节名称 | 主要学习方向 |
◆ 阶段说明JavaScript是整个前端学习过程中的重难点，是学习前端的基础，也是包含非常多面试题的阶段。尚学堂为学员真正能学到精髓，避免出现“只学皮毛”现象，在讲解JavaScript阶段时会对所讲内容全面跟踪源码，逐行解释。真正做到了深入讲解，也是尚学堂从成立至今不断积累，不断更新的成果。 在一些培训机构单独辅导面试题、最后突击面试题的情况下，尚学堂更为学员考虑，面试题已经跟随课程进行讲解，边学习边准备面试。课程所讲内容囊括市面上的面试题。由老师讲解面试问题和面试答案，并多次帮助学员明确整理面试问题。这也是为什么尚学堂的学生可以达到“未毕业，先就业”的原因。 同时也对算法、数据结构、容器、多线程进行深入讲解。容器作为工作和面试的重点，要求达到手写容器的水平。 每天都有设有综合案例，学以致用。 ◆ 阶段目标√ 掌握 JavaScript基础语法，培养编程、逻辑思维√ 掌握 DOM和BOM对象的常用属性和方法，能够完成网页常见的交互效果 √ 掌握 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性 √ 注重抽象思维的培养，具备面向对象编程的的能力 ◆ 阶段特色√ 案例推动知识点讲解√ 大厂面试中提取案例 √ 大量案例，讲完即练，练完再讲 √ 每天都有主线，清楚知道每天的学习能用在哪里 √ 知识点讲解到代码执行底层原理 √ 通过手写案例，理解起来更清晰 √ 全面的面试题整理及讲解 √ 全是干货，重难点结合案例多次讲解 |
|---|---|---|
| JavaScript基础 |
变量
基本数据类型
数据类型的转换
运算符
if分支
switch分支
三元表达式
while循环
for循环
数组
函数
对象
内置对象
|
|
| WebAPI |
DOM树
DOM对象
获取元素
环境对象
innerHTML
style
事件流
className
classList
间歇函数
延迟函数
事件监听
鼠标事件
键盘事件
高阶函数
节点操作
事件委托
元素位置
BOM
window对象
自定义属性
面试题整理
|
|
| 面向对象编程 以及ES6新特性 |
字面量
构造函数
单体对象
面向对象
原型
class、getter、setter
柯里化
解构
箭头函数
Object
let、const
严格模式
闭包
|
第三阶段：JavaScript高级
| 章节名称 | 主要学习方向 |
◆ 阶段说明深入理解 ECMAScript 的知识体系及工作机制，注重抽象思维的培养，具备面向对象编程的的能力，添加大量企业级需求，从实际复杂需求练习JavaScript技术。◆ 阶段目标√ 面向对象编程√ 原型链查找 √ 掌握正则表达式 √ 掌握设计模式 ◆ 阶段特色√ 注重抽象思维的培养，具备面向对象编程的的能力√ 大量企业需求，关联JavaScript使用 √ 超全面面试题及答案讲解 √ JavaScript结合企业级项目综合练习 |
|---|---|---|
| 面向对象进阶 |
原型链
构造函数
执行上下文
作用域链
闭包
this
面试题整理
|
|
| ES5/ES6/ES7/ES8/ES9应用 |
Promise
Await
ES6对象新增方法
ES7/ES8/ES9新增属性
事件队列
事件循环执行
同步
异步
面试题整理
|
|
| JavaScript项目 |
结合企业级项目
练习JavaScript技术知识点
深入知识掌握
注重抽象思维的培养，具备面向对象编程的能力
|
第四阶：服务器端交互
| 章节名称 | 主要学习方向 |
◆ 阶段说明服务器端交互阶段是承上启下的阶段，目前企业开发并不是直接使用HTML+CSS+JavaScript，但是很多框架都是对其的封装。学习完成此阶段后可以具备编写B/S C/S架构项目的能力。◆ 阶段目标√ 掌握jQuery基本使用√ 深入理解服务器端思想 √ 了解PHP以及MySQL后端服务器语言 √ 掌握Ajax相关知识点 √ 掌握响应式框架Bootstrap框架 √ 掌握版本控制软件 Git √ 掌握移动端布局 ◆ 阶段特色√ 经典重现，包含所有经典知识点√ 初步感受服务器、深入理解前后端交互流程 √ 熟悉项目开发流程 √ 每天都有综合案例，新老知识点融合 √ 全面的经典面试题及答案讲解 |
|---|---|---|
| jQuery |
选择器
节点方法
动画
动画队列
事件
事件委托
链式操作
插件
插件机制协议和容器
|
|
| PHP和MySQL |
PHP基础语法
软件安装
PHP连接数据库
MySQL增删改查语句
|
|
| Ajax 技术 |
客户端与服务器
请求与响应报文
接口
form 表单
文件上传
拦截器
FormData
XMLHttpRequest
防抖
节流
跨域
|
|
| Git |
安装和配置 Git
Git 本地操作的常用命令
.gitignore 忽略文件
Git 分支与常用命令
远程仓库的使用
|
|
| Bootstrap框架 |
媒体查询
Bootstrap框架
组件
栅格系统
响应式网页布局
|
|
| HTML5新属性 |
本地存储
文件上传
画布Canvas
|
|
| 移动端 |
rem、vw/vh、Flex布局模型
Less基础语法
视口
分辨率
二倍图
移动适配
媒体 查询
|
第五阶段：框架前置
| 章节名称 | 主要学习方向 |
◆ 阶段说明框架前置阶段主要针对目前市场上最为流行的node.js、npm、webpack讲解。学习本阶段开始感受架构的魅力和团队开发的魅力。◆ 阶段目标√ 掌握能够使用 npm 维护项目中的依赖包√ 能够使用 Promise 与 async/await 高效的实现异步操作 √ 掌握能够理解 webpack 中的核心概念，为后续项目课的学习打好工程化开发的基础 √ 理解团队开发流程 √ 掌握服务器环境管理 √ 掌握接口文档编写 ◆ 阶段特色√ 案例和项目都是前后端分离架构√ Node.js全面讲解 √ 完全模拟企业小组开发，自定义实现前后端交互 |
|---|---|---|
| Node.js基础 |
Node.js和浏览器的区别 Node.js环境的安装 终端的常用命令 在Node.js 中执行 JS 代码 fs模块 path模块 |
|
| npm |
包的基本概念 npm 包管理配置文件 全局包 项目包 常用的npm命令 模块的 加载过程 |
|
| Express |
Express 的安装和配置 处理 GET 请求 处理 POST 请求 获取参数 处理跨域 |
|
| webpack |
工程化开发的概念 webpack 的基本配置 webpack-dev-server html-webpack-plugin 常用 loader babel |
第六阶段：Vue框架
| 章节名称 | 主要学习方向 |
◆ 阶段说明掌握模块化思想，npm包管理，webpack基础，初探工程化开发。运用Vue2.0全家桶核心内容实现开发中常见的功能，如购物车，经典列表、TodoMVC等。运用 Vant 开发移动端，运用element-ui开发PC后台管理系统。 掌握Vue3新特性、Vite、组合API、Pinia 等。 掌握TypeScript基础语法，并且在Vue3项目中熟练运用TypeScript ◆ 阶段目标√ 掌握Vue基础知识√ 掌握Vue 框架项目脚手架搭建 √ 掌握Vuex数据状态管理 √ 掌握路由跳转 √ 掌握Vue组件之间数据传递的多种方式 √ 掌握Vue3新特性 √ 掌握TypeScript语言 ◆ 阶段特色√ 案例贯穿技术点讲解√ 企业级项目实战案例引入 √ 边讲边练，案例结合知识 √ 项目实战 √ 全套后台管理界面项目 √ 基于Vue3+Vite+Pinia+Element-Plus全家桶开发 √ Vue3.0项目实战案例 √ 真实上线项目 |
|---|---|---|
| Vue基础 |
MVVM
SPA
Vue调试工具
虚拟DOM
diff算法
指令系统
v-model原理
数据选项
生命周期
样式穿透
动态样式
插槽
组件系统
组件通信
自定义指令
ref
动态组件
$nextTick
自定义事件
计算属性
侦听器
组件库
组件封装
路由系统
导航守卫
vue-cli
工程化基础
axios
interceptors
经典案例实战
|
|
| Vue3.0高级 |
Vite
选项API
组合API
setup
生命周期
reactive
toRef
toRefs
computed
组件通信
依赖注入
ref边界
Pinia
TypeScript
|
|
| 实战项目 |
Vue2实战项目：音乐移动端项目
电子商户后台
Vue3实战项目：生鲜采购后台管理系统
|
第七阶段：微信小程序
| 章节名称 | 主要学习方向 |
◆ 阶段说明了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。 基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。 ◆ 阶段目标√ 能够独立开发小程序，提高就业能力，是就业的加分项√ 掌握小程序项目开发流程 √ 掌握uni-app开发小程序技术 ◆ 阶段特色√ 从基础到深入学习以及到项目实战√ 多个企业级项目 √ 全套项目实例原型图，感受产品经理工作内容 |
|---|---|---|
| 小程序基础 |
账号申请
开发工具
工程目录
项目配置
屏幕适配
资源托管
字体图标
数据绑定
事件处理
生命周期
场景值
模块化
网络请求
路由
WXS
模板
组件
UI 框架
表单
Promise
|
|
| uni-app |
脚手架
项目配置
单文件组件
生命周期
条件编译
计算属性
跨平台支持
less
sass
组件通信
|
|
| 电商项目 |
客户消息
微信地址
小程序转发
区域滚动
上拉加载
下拉刷新
数据缓存
用户信息
自定义组件
微信登录
意见反馈
上线发布
|
第八阶段：React框架
| 章节名称 | 主要学习方向 |
◆ 阶段说明React框架阶段学习，进军大厂必备，结合 TypeScript+Hooks 和函数式编程思想完成项目开发。通过React框架学习，可以具备复杂项目架构的能力。无论是小白还是大白，甚至有工作经验的学员在本阶段学习完成后都有非常明显的个人能力提升。 ◆ 阶段目标√ 掌握React基本语法，能够使用class组件实现常见的业务功能√ 掌握运用hooks核心知识 √ 掌握Redux实现状态管理 √ 掌握TypeScript语言 ◆ 阶段特色√ 掌握React基本语法，能够使用class组件实现常见的业务功能√ 掌握运用hooks核心知识 √ 掌握Redux实现状态管理 √ 掌握TypeScript语言 |
|---|---|---|
| React基础 |
组件系统
虚拟DOM
生命周期
无状态组件
有状态组件
ref
class
组件通信
create-react-app
路由
插值
state
|
|
| Hooks |
useState
useEffect
useRef
useContext
useEffect 高级用法
|
|
| Redux |
状态管理流程
action、dispatch、store、combineReducers、reducer、redux-thunk、react-redux
开发调试工具
|
|
| 实战项目 |
穷游商城PC端项目
房屋海选平台移动端项目
|
第九阶段：就业冲刺阶段
| 阶段说明 |
就业冲刺阶段由老师帮助修改简历、模拟面试、解答面试问题。对之前讲解的面试问题进行重难点串讲。
|
| 阶段目标 |
√ 掌握企业真实项目开发顺序
√ 对接企业真是工作需求
√ 建立前端技术体系，搞定高频的面试题
√ 掌握多人协同开发和解决bug的综合技巧
|
| 阶段特色 |
√ 就业老师面试指导
√ 简历指导
√ 模拟面试
√ 面试推荐
√ 毕业后仍可按需学习，免费充电，持续提升
√ 扶上马，再送一程，帮助学员解决工作中的问题
|
- 课程体系
- 25个知识模块
- 8个项目实例
- 5大更新模块
- 2024新增
- 课程特色
- 课程大纲
