如果你正在考虑转前端，大概率会刷到一堆“三个月拿下大厂 offer”的宣传。这篇不打算给你打鸡血，只说清楚一件事：这门以“零基础 + 企业级教育网站”为主线的课，到底适合谁、学完能做到什么程度、资料包该怎么用。
它解决的是哪个具体场景
很多零基础学习者的困境不是“找不到资料”，而是学完 HTML、CSS 之后不知道下一步干什么，知识点散落一地，写页面全靠复制粘贴。这门课把目标收得比较窄——带你从零做出一套教育类网站的前端页面，包含课程列表、课程详情、登录注册这类真实存在的功能模块。也就是说，它给的是一个能落地的场景，而不是漫无边际地铺知识点。
教育网站这类项目的好处是结构清晰、页面类型不复杂，但该有的东西一样不少：导航、卡片列表、表单校验、数据渲染、页面跳转。对新手来说，这是一个难度刚好、又不至于像“仿淘宝首页”那样一上来就劝退的练手题材。
学完之后能独立做什么
完成基础阶段后，你应当能独立把一张设计稿还原成静态页面，处理常见的布局问题，比如多列卡片对齐、响应式在窄屏下的折叠。这部分考验的是 CSS 的熟练度，没有捷径，只能靠一行行写。
进入项目阶段后，重点转向 JavaScript 的实际使用：从接口取回课程数据并渲染到页面上、做表单的非空与格式校验、控制弹窗和页签的显示隐藏。这些不是玩具 demo，而是日常前端工作里反复出现的动作。学完如果你能不看教程、自己把这几块逻辑串起来，说明你已经具备继续往框架方向走的底子。
需要提醒的是：这门课不涉及 Vue、React 这类主流框架，也不覆盖工程化构建。它的定位是把原生三件套和 WebAPI 打扎实，属于“地基”而非“封顶”。如果你的目标是尽快上手公司现有框架项目，学完这门课还需要再接一段框架内容。
资料适合什么基础的人
- 完全没写过代码、但能坚持每天投入一到两小时的人：可以跟，但要做好前两周进度偏慢的心理准备，环境配置和语法陌生感是必经阶段。
- 学过一点 HTML/CSS、卡在 JavaScript 的人：收获会最直接，项目部分能帮你把零散知识串成完整流程。
- 已经能独立写项目、只差框架经验的人：不必从头看，可以只挑项目实战部分对照自己的写法查漏补缺。
资料怎么用效率更高
建议把基础知识部分当“工具书”而非“连续剧”。遇到布局或语法卡壳时再回看对应小节，比从头顺序刷完更省时间。项目阶段则相反，尽量跟着完整敲一遍，尤其是报错处理和调试的部分——这些内容看会了和写会了差距很大。另外，每完成一个模块，试着脱离视频自己复现一次，哪怕慢一点，这一步决定了你是“看懂了”还是“会用了”。
最后说一句筛选标准：判断这类零基础课值不值得投入，不看宣传语写得多满，而看它有没有给你一个能拿出手的完整作品，以及学完之后你是否清楚自己下一步该补什么。这门课在这两点上是过关的——前提是你愿意动手写，而不是只看。
课程目录
第一章 页面结构解析-HTML 浏览器介绍 认识网页 常见浏览器 浏览器内核 web标准 HTML基本结构 HTML初识 HTML骨架 我的第一个页面及其标签简介 猪八戒版骨架记忆法 HTML常用标签 什么是标签及其分类 标签嵌套和并列关系 简单小测验 开发工具sublime sublime生成html骨架 doctype文档类型 字符集简介 标签的语义化及其标题标签 段落标签和水平线标签 课堂案例-新闻页面 换行和div span标签 文本格式化标签 标签属性 图像标签 链接标签 锚点定位 base标签 特殊字符 注释标签 相对路径 相对路径(一) 相对路径(二) 列表 无序列表的使用 无序列表注意事项 有序列表 四大名著案例 自定义列表 第一天HTML总结 表单和表单控件 表单的作用 文本框和密码框 单选按钮和复选按钮 默认选中表单属性 input按钮组 最多字符数和文本值 label标签 文本域 下拉菜单 表单域 第二章 页面美容师-CSS/CSS3 CSS介绍 CSS产生的原因 CSS网页的美容师 体会CSS样式 CSS样式规则 font字体 字体样式字号和字体 字体字号常用技巧 unicode字体 CSS注释 字体加粗 字体倾斜 字体综合设定 CSS基本选择器 调试工具chrome使用 标签选择器 体会类选择器 CSS命名规范 谷歌课堂案例 多类名选择器 ID选择器 id选择器和类选择器的区别 通配符选择器 链接伪类选择器的使用 链接伪类的简写方式 CSS外观样式及应用 CSS颜色 行高对齐和首行缩进 字间距和单词间距 颜色半透明 文字阴影初识 sublime快捷方式 CSS样式表 内部样式表 行内样式表 外部样式表 三种样式表总结 标签显示模式 块级标签显示模式 行内标签显示模式 行内块元素 显示模式转换 CSS复合选择器 交集选择器 并集选择器 后代选择器 子元素选择器 课堂练习-测试选择器 CSS书写规范 CSS背景及应用 背景颜色图片及其平铺 背景位置（一） 背景位置(二) 背景附着(固定) 背景简写 背景半透明 背景缩放（一） 背景缩放（二） 多背景图片 CSS三大特性 CSS层叠性 CSS继承性 CSS优先级 权重叠加 继承的权重为0 css权重6道精华题 优先级总结 CSS盒模型及应用 看透网页布局本质 认识盒子模型组成 盒子边框 边框综合写法(一) 边框综合写法(二) 圆角矩形 盒子内边距 外边距以及盒子居中对齐 文字盒子居中图片和背景区别 清除内外边距 行内元素上下内外边距的问题 外边距合并(一) 外边距合并(二) 盒子的计算尺寸 padding不影响盒子大小的情况 盒子模型布局稳定性 浮动及应用 文档流介绍 浮动是用来做文字环绕效果的 体会浮动 浮动就是漂浮的意思 浮动首先需要添加标准流父级 浮动特性对齐父盒子 浮动特性盒子排列 浮动影响盒子显示模式 浮动总结 清除浮动 清除浮动的本质 额外标签法 父级添加overflow方法 CSS四种定位及应用 为什么学习定位 定位属性 静态定位(1) 相对定位 绝对定位脱标 父级没有定位 父级有定位 何为子绝父相 定位练习-哈根达斯 绝对定位水平垂直居中 固定定位 叠加次序 定位总结 固定绝对定位模式转换 第三章 JavaScript基础知识 JavaScript介绍 网页、网站和应用程序 JavaScript的强大 JavaScript最初的目的 JavaScript现在的意义 JavaScript和HTML、CSS的区别，以及组成 JavaScript初体验 计算机组成 JavaScript变量 什么是变量 变量的使用 ������������淶 交换两个变量 JavaScript数据类型 数据类型-Number String类型 Undefined和Null typeof和注释 转换成字符串类型 转换成数值类型1 转换成数值类型2 转换成布尔类型 JavaScript操作符 数学运算符 一元运算符讲解 逻辑运算符 关系运算符 赋值运算符和运算符的优先级 JavaScript流程控制及应用 表达式和语句 流程控制 分支结构 分支结构补充和作业 三元运算符讲解 switch 成绩转换案例 布尔类型的隐式转换 while循环 while案例 dowhile dowhile案例 for循环 循环案例1 打印正方形 打印三角形 打印99乘法表 break和continue 调试 JavaScript数组及应用 数组1 数组2 数组3 求一组数的和和平均值 求最大值和最小值-剪裁 分隔符 筛选数组 翻转数组 JavaScript函数及应用 为什么要有函数 函数的参数 函数的参数案例-剪裁 函数的返回值 arguments 函数案例1-剪裁 函数案例2 函数案例3 函数案例4 函数其它概念 代码规范 作用域 作用域链 预解析 对象概念 JavaScript对象 对象之字面量 创建对象的方式 new关键字的执行过程 this 遍历对象和删除对象的属性 第四章 页面动效实现-WebAPI DOM介绍 WebAPI的概念 JavaScript组成 DOM相关概念 获取页面元素 根据id获取元素-剪裁 getElementsByTagName1 getElementsByTagName2 获取元素的其它方式 注册事件及应用 注册事件 点击按钮切换图片 非表单元素的属性 点击按钮div显示隐藏 表单元素的属性 给文本框赋值 检测用户名和密码 样式操作及应用 样式操作1 样式操作2 开关灯 显示隐藏二维码案例 高亮显示正在输入的文本框 设置大小和位置 隔行变色和高亮显示 BOM介绍及应用 BOM 对话框 js中的加载讲解 setTimeout讲解 删除提示讲解 setInterval讲解 第五章 项目实战-在线教育培训网站 项目实战导学 项目实战-教育培训网站导学 网站顶部内容实现 顶部内容实现导学 项目环境搭建 网站顶部结构实现 PxCook工具下载与使用 顶部具体样式（上） 顶部具体样式（下） 总结 网站导航条内容实现 导航条内容导学 导航条结构实现 导航条样式（1） 导航条样式（2） 导航条样式（3） 总结 网站下拉菜单内容实现 下拉菜单导学 下拉菜单结构实现 下拉菜单定位实现 下拉菜单美化 下拉菜单显示与隐藏 总结 网站横向菜单内容实现 横向菜单内容导学 横向菜单结构实现 横向菜单样式实现 横向菜单显示与隐藏 总结 网站轮播图实现 轮播图-导学 轮播图结构实现 轮播图图片布局 轮播图图片呈现顺序调整 解决元素的层级关系 在轮播图上添加箭头图标 轮播图底部(横向)图标结构创建 轮播图底部图标样式设定 单击右侧箭头图标，实现轮播图切换 实现轮播图循环播放 底部图标切换 单击左侧箭头图标，实现轮播图切换 单击底部图标，完成轮播图切换 轮播图自动播放效果实现 总结 网站优势版块实现 优势版块导学 优势版块结构实现 优势版块整体样式设计 优势版块具体内容样式设定 总结 网站问题项目版块实现 问题项目版块导学 问题项目版块标题区域结构设计 问题项目版块标题区域样式设定 问题项目版块具体内容结构 问题项目版块具体内容版心区域样式 问题项目版块具体内容样式设定 问题项目版块'预约试听按钮'样式 总结 网站课程中心版块实现 培训课程中心版块实现导学 培训课程中心版块标题区域实现 培训课程中心版块课程内容结构 培训课程中心版块版心样式设计 培训课程中心版块版心文本样式设计（1） 培训课程中心版块文本版心样式设计（2） 培训课程中心版块'查看详情'样式 总结 网站解决方案版块实现 解决方案版块导学 解决方案版块标题区域结构 解决方案版块标题区域样式 解决方案版块具体内容结构 解决方案版块版心区域样式 解决方案版块背景图像添加 解决方案版块伪类样式 解决方案文本样式 总结 网站讲师团队版块实现 讲师团队版块导学 讲师团队标题区域实现 讲师团队版块讲师列表结构 讲师团队版块版心区域样式 讲师团队版块第一位讲师样式效果 讲师团队版块“查看详情”样式实现 讲师团队版块讲师列表样式 讲师团队版块讲师简介样式 讲师团队版块‘查看更多’样式 总结 网站课程合作案例版块实现 合作案例版块导学 合作案例整体结构实现 总结 网站服务版块实现 服务版块导学 服务版块标题结构实现 服务版块标题样式 服务版本服务内容结构设计 服务版块服务内容样式设计 服务版块'我们的优势'内容样式设计 服务版块’我们的优势‘文本样式 总结 网站公司介绍版块实现 公司介绍版块导学 公司介绍版块结构实现 公司介绍版块图片定位 公司介绍版块图片样式 公司介绍版块文本样式 总结 网站在线报名版块实现 在线报名版块导学 在线报名版块表单创建 在线报名版块版心样式 在线报名版块表单样式 在线报名版块文本样式 在线报名表单校验 总结 网站底部信息版块实现 页面底部版块导学 页面底部结构实现 页面底部版块文本样式 总结
