缺什么补什么：别拿“懂点语法”当全栈

这份资料解决的是“前后端割裂”和“只会抄组件”的问题。很多人写了两年页面，一问数据怎么从浏览器流到服务器、npm 到底在装什么、包管理依赖冲突怎么排错，就全凭感觉猜。这门课的主线是把 Web 程序当成一个整体来拆：从开发环境配置、npm 命令实战，到 JavaScript 语言底座，再到控制流语句，逼你把“知其然不知其所以然”的断层补上。它适合两类人：一是只会写静态页面、想往全栈方向挪步的前端新手；二是后端转岗、需要快速补齐浏览器端运行机制和 JS 基础的开发者。如果你连变量声明和基础数据类型都分不清，别跳着看，老老实实从入门模块开始敲代码。

建议先看的几块与配套练习

资料的前半部分是骨架，别一上来就死磕语法细节。建议先看“Web 程序的构成”和“配置开发环境”这两块，建立全局视角，搞清楚一个请求在本地是怎么跑起来的。接着直接进入“npm 命令实战”，这部分千万别只用眼睛看，必须跟着资料在自己的终端里把初始化、安装、依赖树查看等命令敲一遍，把环境跑通是第一要务。随后再切入 JavaScript 部分，从基础数据类型、对象类型到运算符，重点理解类型转换的坑。配套练习方面，不要去搞花哨的特效页面，而是结合“Web 程序开发实战”这一节，自己手写一个包含基础表单提交和简单数据校验的本地页面。遇到卡壳的地方，回头去查“判断语句”和“循环语句”的对应章节，缺什么补什么，别假装自己全都会。

学完能独立回答的三个问题

看完这套资料，你应该能脱离教程独立做点实事，并清晰回答以下几个问题：第一，拿到一台空电脑，你能否独立配置出 Web 开发环境，并用 npm 管理好一个项目的依赖？第二，JavaScript 的基础数据类型和对象类型在内存表现和传值传引用上有什么本质区别？第三，给你一个具体的业务逻辑（比如校验一段输入并循环处理一组数据），你能否用判断、循环和表达式写出正确的控制流，而不是只会复制粘贴现成的代码块。资料里的视频线索只用来帮你理解概念和纠错，真正的能力长在敲击键盘的手指上。把课程里的片段拆成小练习，自己动手改写代码并观察运行结果，这才是查漏补缺的正确姿势。

课程目录

1-1 [Web 入门] Web 程序的构成 (28:10)
1-2 [Web 入门] 配置开发环境 (09:08)
1-3 [Web 入门] npm 命令实战 (16:02)
1-4 [Web 入门] Web 程序开发实战 (39:20)
1-5 [Web 入门] Javascript 语言的构成元素 (22:00)
1-6 [Web 入门] 基础数据类型 (21:02)
1-7 [Web 入门] 对象类型 (26:16)
1-8 [Web 入门] 运算符 (41:39)
2-1 [Javascript 高级课程] javascript 的判断语句 (19:08)
2-2 [Javascript 高级课程] javascript 的循环语句 (27:18)
2-3 [Javascript 高级课程] 表达式与语句 (14:52)
2-4 [Javascript 高级课程] 函数之一 (13:14)
2-5 [Javascript 高级课程] 对象 (08:01)
2-6 [Javascript 高级课程] 原型链 (12:22)
2-7 [Javascript 高级课程] 通过原型链创建类 (07:47)
2-8 [Javascript 高级课程] 原型链实现类的继承 (10:35)
2-9 [Javascript 高级课程] 原型链、类与继承的实例复习 (06:38)
2-10 [Javascript 高级课程] 类 (06:21)
2-11 [Javascript 高级课程] 类的继承写法 (20:15)
2-12 [Javascript 高级课程] 详细定义对象属性 (16:55)
2-13 [Javascript 高级课程] 继承再续 (25:56)
2-14 [Javascript 高级课程] 对象属性拷贝 & 对象属性的访问方式 (30:47)
2-15 [Javascript 高级课程] 遍历对象属性与封印对象 (37:12)
2-16 [Javascript 高级课程] 实例复习 (07:16)
3-1 [HTML5 高级课程] html 文档结构与标签 (16:23)
3-2 [HTML5 高级课程] 标签全局属性 (08:13)
3-3 [HTML5 高级课程] 行内标签 (10:59)
3-4 [HTML5 高级课程] 容器标签与语意的重要性 (40:30)
3-5 [HTML5 高级课程] 表单（上） (14:45)
3-6 [HTML5 高级课程] 表单（下） (18:05)
3-7 [HTML5 高级课程] 表格 (25:27)
3-8 [HTML5 高级课程] 获取 DOM 对象 (24:30)
3-9 [HTML5 高级课程] CSS 选择器 (01:13:41)
3-10 [HTML5 高级课程] 操作 DOM 对象 (34:43)
3-11 [HTML5 高级课程] 加载事件与事件处理器 (14:40)
3-12 [HTML5 高级课程] 鼠标事件 (20:15)
3-13 [HTML5 高级课程] 键盘事件 (21:28)
3-14 [HTML5 高级课程] 表单事件、事件冒泡和取消默认事件处理 (23:42)
3-15 [HTML5 高级课程] meta 常规用法 (16:42)
4-1 [CSS3 实战] 盒子模式和块级元素 (29:59)
4-2 [CSS3 实战] 行内元素&box-sizing (21:57)
4-3 [CSS3 实战] 定位和垂直居中 (23:13)
4-4 [CSS3 实战] 布局 (40:26)
4-5 [CSS3 实战] 布局练习（上） (43:34)
4-6 [CSS3 实战] 布局练习（下） (15:55)
4-7 [CSS3 实战] 圣杯布局实例解析 (26:55)
4-8 [CSS3 实战] 双飞翼实例布局讲解 (11:05)
4-9 [CSS3 实战] 通过 flex-utils 认识一下 flex 布局 (18:53)
4-10 [CSS3 实战] flex 基础实例讲解 (30:50)
4-11 [CSS3 实战] 用 flex 对计算器与产品布局 (14:55)
4-12 [CSS3 实战] 背景 (10:48)
4-13 [CSS3 实战] 背景玩练 (12:17)
4-14 [CSS3 实战] @media 媒体查询 (14:14)
4-15 [CSS3 实战] 字体与文本 (17:21)
4-16 [CSS3 实战] 照顾一下 IE (06:17)
4-17 [CSS3 实战] 过度 (10:14)
4-18 [CSS3 实战] 动画 (08:21)
4-19 [CSS3 实战] 2D 变换 (16:10)
4-20 [CSS3 实战] 3D 变换 (18:48)
4-21 [CSS3 实战] FileReader (14:31)