课程定位与适用基础

这门课专门针对前端基础薄弱或希望系统化补齐HTML、CSS、JS核心技能的群体设计。它不追求快速引入现代框架，而是通过40个精选实战案例，强制学员亲手编写每一行代码，彻底解决“看得懂、写不出”的通病。课程覆盖PC端与移动端开发，涉及电商展示、教育培训等典型业务场景，旨在帮助学员建立扎实的DOM操作、CSS布局及事件驱动思维。若你已熟练掌握Vue或React，这门课可能略显基础；但如果你是转行者、应届生，或是需要独立维护官网的运营人员，它能帮你把零散的语法知识整合为可落地的开发能力。特别建议初学者重点投入前段PC端布局与移动端适配章节，这两部分覆盖了日常开发绝大部分基础需求，务必先吃透再挑战复杂交互。

学习顺序与资料配合方法

切忌线性看完视频再动手。建议采用“拆解-复现-变体”三步法高效利用资料包：首先，观看视频前暂停，根据需求自行绘制页面结构草图，预判标签嵌套与CSS类名结构；其次，手写代码复现案例，遇到卡顿再参考讲师源码，重点对比差异，理解语义化标签与特定定位逻辑的取舍；最后，对每个案例做微改造，如修改配色变量、增加按钮交互或调整响应式断点，强制脱离照抄依赖。处理移动端案例时，务必在真机或浏览器设备模拟模式下测试，观察触摸事件与视口适配的实际表现，确保代码在不同设备上均能稳定运行。这种结合实操的闭环练习，是内化基础技能的关键。

学完能独立做什么

完成全部40个案例后，你将从“理解概念”转变为“独立产出”。具体而言，你将具备从零开始搭建静态企业官网、活动落地页及简单电商前端界面的完整能力。你能独立处理复杂的响应式布局，实现表单校验、动态内容加载等基础交互功能，并读懂、修改现有项目中的HTML/CSS/JS代码以修复页面bug。更重要的是，你建立了标准的工作流思维：从需求分析、结构搭建、样式还原到交互逻辑实现，每一步都有章可循。这种扎实的基础能力，是后续深入学习前端框架、服务端交互乃至全栈开发的必要前提，能让你在团队协作中准确理解代码规范与工程化思维，避免在基础层面反复踩坑。

课程目录

├── 1-认知篇：带你走进前端的世界/ │ ├── [ 18M] 1-1 课程导学-让你快速了解课程 │ ├── [ 12M] 1-2 带你走进前端的世界 │ ├── [ 20M] 1-3 前端行业的发展与规划 │ ├── [ 18M] 1-4 前端的今生来世 │ └── [ 15M] 1-5 前端的三大核心技能 ├── 2-体验篇：你的第一个网页【梦开始的地方】/ │ ├── [ 54M] 2-1 必选利器-前端开发工具 │ ├── [ 39M] 2-2 初体验-搭建html 网页初始化标签 │ └── [8.4M] 2-3 选学篇：Sublime与VSCode编辑器 初始化骨架 ├── 3-案例1： 仿百度图文列表实战【HTML篇】/ │ ├── [ 13M] 3-1 案例分析：百度图文混排效果-修改版 │ ├── [ 44M] 3-2 理解img标签的作用和含义 │ ├── [ 33M] 3-3 理解a标签的作用和含义 │ ├── [ 17M] 3-4 理解div标签的作用和含义 │ ├── [ 19M] 3-5 理解ul标签的作用和含义 │ ├── [ 13M] 3-6 理解ol标签的作用和含义 │ └── [ 54M] 3-7 【网页搭建思路与规范】 百度新闻图文混排骨架搭建 ├── 4-案例2：前端必备技能–PS网页切图【PS篇】/ │ ├── [ 18M] 4-1 【图片认知】 5大图片类型，在网页中的展示方式 │ ├── [ 25M] 4-2 【基础操作】 PS从安装、新建到保存 │ ├── [ 35M] 4-3 【辅助切图】 PS图像放大与缩小功能及辅助线的使用 │ ├── [ 27M] 4-4 【字体设置】 PS软件字体操作及字体库的文字安装 │ └── [ 21M] 4-5 【截取图片】 PS选取框的基本使用- ├── 5-案例3：仿QQ邮箱登陆实战【HTML篇】/ │ ├── [2.2M] 5-1 案例分析：QQ邮箱登陆框案例分析与思路- │ ├── [ 17M] 5-2 第一步：input标签实现输入框 │ ├── [ 19M] 5-3 第二步：设置输入框默认内容 │ ├── [ 11M] 5-4 第三步：button标签实现按钮 │ ├── [ 22M] 5-5 第四步：p标签实现内容文字 │ ├── [ 13M] 5-6 第五步：span标签实现内置文字 │ ├── [ 38M] 5-7 【网页搭建思路与规范】 QQ邮箱登录框骨架HTML搭建- │ └── [ 42M] 5-8 【经验分享】如何使用浏览器功能看到元素状态 ├── 6-案例4：仿B站导航条案例【基础样式】【CSS篇】/ │ ├── [2.1M] 6-1 .【案例分析】B站导航条案例 │ ├── [ 44M] 6-2 交互方式：CSS样式和HTML的交互方式- │ ├── [ 19M] 6-3 第一步：运用CSS 基本样式设定案例元素宽高 │ ├── [ 20M] 6-4 第二步： 运用CSS的群组选择器来控制导航的一群元素 │ ├── [ 27M] 6-5 -第三步：运用CSS的基本样式设定文字的行高、对齐的样式 │ ├── [ 42M] 6-6 -第四步：运用CSS的基本样式设定元素的边框 │ ├── [ 21M] 6-7 第五步：运用CSS的基本样式设定元素的圆角 │ ├── [ 28M] 6-8 灵活运用：深入CSS集选择器 │ └── [ 28M] 6-9 讨论：猜猜网页中哪些是CSS样式？ ├── 7-案例4：仿B站导航条案例【布局】【CSS篇】/ │ ├── [ 24M] 7-1 第一步：浮动布局实现导航元素连续排列 │ ├── [ 32M] 7-2 第二步：元素外边距样式实现导航元素间距离 │ ├── [ 19M] 7-3 第三步：元素内边距样式实现文字与元素的间隙 │ ├── [ 29M] 7-4 重点知识：盒子模型【重点】 │ ├── [ 87M] 7-5 第四步：完善b站导航条效果 │ └── [7.5M] 7-6 避坑：浮动的坑问题 ├── 8-案例5：经典背景图文列表【CSS篇】/ │ ├── [4.7M] 8-1 案例分析：经典背景图文列表案例分析与思路 │ ├── [ 15M] 8-2 理论实操：图文背景如何设定 │ ├── [ 33M] 8-3 理论实操：理解元素的颜色背景设定 │ ├── [ 38M] 8-4 理论实操：元素的图片背景的平铺、大小、定位设置 │ ├── [ 15M] 8-5 基础知识：背景样式缩写方式 │ ├── [ 84M] 8-6 综合实战：背景图文列表的图片列表制作 │ ├── [ 26M] 8-7 理论实操：文字大小、粗细、风格、颜色的样式 │ ├── [ 27M] 8-8 文字大小写字母样式、字体类型、首行缩进样式 │ ├── [ 12M] 8-9 理论实操：文字中英文折行 │ ├── [ 15M] 8-

10 基础知识：文本缩写样式 │ └── [113M] 8-

11 综合实战：实现背景图文列表制作 ├── 9-案例6：首页单屏案例实战【CSS篇】/ │ ├── [3.5M] 9-1 案例分析：首页单屏案例分析与思路 │ ├── [ 51M] 9-2 .理论实操：元素的相对、绝对定位 │ ├── [ 19M] 9-3 .理论实操：元素的固定、相对、默认定位 │ ├── [ 22M] 9-4 .理论实操：标准流和非标准流 │ ├── [ 33M] 9-5 理论实操：元素变行内、变块、变行内块样式 │ └── [ 30M] 9-6 .理论实操：CSS的重置方式与命名规范 ├── 10-案例7：仿爱奇艺视频首页新片预告案例实战【CSS篇】/ │ ├── [3.5M] 10-1 案例分析：仿爱奇艺视频首页新片预告模块 │ ├── [ 61M] 10-2 第一步：案例图片圆角制作 │ ├── [ 30M] 10-3 理论实操：百分比样式如何设置 │ ├── [ 27M] 10-4 第二步：图片圆角是如何被裁减的？（理解元溢出隐藏、滚动条样式） │ ├── [ 15M] 10-5 理论实操：透明样式如何设置 │ ├── [ 83M] 10-6 第三步：首页新片预告模块的制作（1） │ ├── [ 84M] 10-7 第三步：首页新片预告模块的制作（2） │ └── [ 14M] 10-8 经验分享：图片下面的三像素的解决方式 ├── 11-案例8：仿京东导航条带下拉效果实战【CSS篇】/ │ ├── [3.7M] 11-1 案例分析：大厂电商导航条的模块分析与思路 │ ├── [ 19M] 11-2 第一步：导航条触碰下拉效果（理解鼠标浮动伪类、链接激活伪类） │ ├── [ 21M] 11-3 理论实操：未访问链接、已链接激活伪类制作 │ ├── [ 14M] 11-4 第二步：导航条触碰时光标改变效果 │ ├── [ 52M] 11-5 第三步：完成大厂电商导航条模块（1） │ ├── [ 56M] 11-6 第三步：完成大厂电商导航条模块（2） │ ├── [ 76M] 11-7 第三步：完成大厂电商导航条模块（3） │ ├── [ 51M] 11-8 第三步：完成大厂电商导航条模块（4） │ └── [ 83M] 11-9 第三步：完成大厂电商导航条模块（5） ├── 12-案例9：仿QQ空间留言板案例实战【CSS篇】/ │ ├── [1.4M] 12-1 案例分析：讲解留言板模块 │ ├── [ 14M] 12-2 第一步：运用文本域实现留言板的输入框 │ ├── [ 17M] 12-3 理论实操：单选框、多选框的制作 │ ├── [ 78M] 12-4 第二步：完成留言板制作 │ └── [ 27M] 12-5 经验分享：框架标签的制作 ├── 13-综合案例10：企业首页实战项目【PC端网页布局】/ │ ├── [ 29M] 13-1 案例分析：企业首页项目的整体的分析与制作思路 │ ├── [ 80M] 13-2 第一步：头部导航模块制作 │ ├── [ 83M] 13-3 第二步：banner切换面板模块制作（1） │ ├── [ 76M] 13-4 第二步：banner切换面板模块制作（2） │ ├── [113M] 13-5 第三步：功能性图标文字模块制作 │ ├── [ 76M] 13-6 第四步：产品优势模块制作 │ ├── [138M] 13-7 第五步：产品特点模块制作 │ ├── [114M] 13-8 第六步：产品服务模块制作 │ ├── [ 63M] 13-9 第七步：服务行业模块制作（1） │ ├── [ 76M] 13-10 第七步：服务行业模块制作（2） │ ├── [ 74M] 13-

11 第八步：友情链接模块制作 │ ├── [104M] 13-

12 第九步：底部导航模块制作 │ └── [ 19M] 13-

13 经验分享与项目总结 ├── 14-加油站：网页是如何交互【初识JavaScript】/ │ ├── [ 18M] 14-1 理论实操：javascript：hello word(1) │ ├── [ 20M] 14-2 理论实操：变量及符号(1) │ ├── [ 23M] 14-3 理论实操：常用数据类型简介(1) │ ├── [ 19M] 14-4 理论实操：JS的报错类型及注释方式(1) │ ├── [ 30M] 14-5 理论实操：JS中的函数概念及使用(1) │ └── [ 42M] 14-6 理论实操：JS中的预解析与变量提升和作用域概念(1) ├── 15-案例11：如何让自己的百度百科点击量突破5w？【JS操作浏览器窗口】/ │ ├── [ 53M] 15-1 理论实操：js中对window对象的基本理解 │ ├── [ 27M] 15-2 理论实操：JS中轮循定时器与延时定时器的使用 │ ├── [ 18M] 15-3 理论实操：JS中打开与关闭浏览器的方法 │ ├── [ 22M] 15-4 理论实操：window常用属性与特性 │ ├── [6.1M] 15-5 练习：如何让自己的百度百科点击量突破5w？-练习需求 │ └── [ 18M] 15-6 练习：如何让自己的百度百科点击量突破5w？-练习解析 ├── 16-案例12：打字机效果-JS中的基础操作【JavaScript篇】/ │ ├── 【更多it资源关注www.】 │ ├── [ 21M] 16-1 理论实操：JS中的基本运算 │ ├── [ 22M] 16-2 理论实操：JS中字符串运算与拼接 │ ├── [ 15M] 16-3 理论实操：JS中的递增与递减 │ ├── [ 14M] 16-4 理论实操：JS中的计算BUG │ ├── [ 19M] 16-5 理论实操：布尔值的基础操作 │ ├── [9.2M] 16-6 练习：打字机效果 – 需求 │ └── [ 15M] 16-7 练习：打字机效果 – 解析 ├── 17-案例13、14：广告弹窗效果【DOM基础操作】【JavaScript篇】/ │ ├── [ 32M] 17-1 理论实操：document对象与点击事件 │ ├── [ 52M] 17-2 理论实操：js中选取元素的方式 │ ├── [ 25M] 17-3 理论实操：js中控制元素样式的方式 │ ├── [ 49M] 17-4 理论实操：js中控制元素常见属性 │ ├── [8.0M] 17-5 案例实战：改变链接的指向实操 – 需求 │ ├── [ 75M] 17-6 案例实战：改变链接的指向实操 – 解析 │ ├── [7.7M] 17-7 案例实战：广告弹窗效果 – 需求 │ ├── [ 59M] 17-8 案例实战：广告弹窗效果 – 解析 │ ├── [5.7M] 17-9 练习：使用JS给予相应的样式 – 需求 │ └── [ 37M] 17-

10 练习：使用JS给予相应的样式 – 解析 ├── 18-案例15：用户名 │ ├── [8.4M] 18-1 案例分析：项目的整体的分析与制作思路 │ ├── [ 54M] 18-2 第一步：运用js中的if判断语句实现登陆判断 │ ├── [ 22M] 18-3 第二步：运用 js中“与”方法进行判断 │ ├── [ 22M] 18-4 第三步：运用js中“或”方法进行判断 │ └── [ 58M] 18-5 第四步：完成用户名 ├── 19-案例16：前端选项卡案例【JS流程控制】【JavaScript篇】/ │ ├── [8.5M] 19-1 案例分析：选项卡的制作思路分析 │ ├── [ 47M] 19-2 理论实操：理解js中的for语句 │ ├── [ 32M] 19-3 理论实操：js控制元素的class方法 │ ├── [ 43M] 19-4 理论实操：理解js中this对象与对象属性【重点】 │ ├── [ 66M] 19-5 实战练习：前端选项卡的制作 │ └── [ 19M] 19-6 理论实操：js中switch语法的使用方法 ├── 20-案例17、18：留言板效果案例【JavaScript篇】/ │ ├── [8.5M] 20-1 案例分析：留言板效果分析与思路 │ ├── [ 49M] 20-2 理论实操：js获取父、子节点、子元素方法【重点】 │ ├── [ 46M] 20-3 理论实操：js生成及插入元素的方法【重点】 │ ├── [ 26M] 20-4 理论实操：js删除及替换元素方法【重点】 │ ├── [ 19M] 20-5 理论实操：js控制内容的方法【重点】 │ ├── [ 78M] 20-6 实战：留言板效果制作-1 │ ├── [ 57M] 20-7 实战：留言板效果制作-2 │ ├── [ 77M] 20-8 实战：留言板效果制作-3 │ ├── [4.3M] 20-9 练习：星级评分效果的实现-需求 │ └── [103M] 20-

10 练习：星级评分效果的实现-解析 ├── 21-案例19：模拟短信发送案例【JS事件操作】【JavaScript篇】/ │ ├── [ 15M] 21-1 理论实操：js中鼠标双击、移入事件 │ ├── [ 13M] 21-2 理论实操：js中鼠标移出、内部移动事件 │ ├── [ 21M] 21-3 理论实操：js中鼠标右键、按下抬起事件 │ ├── [ 15M] 21-4 理论实操：js中事件捕获与冒泡机制 │ ├── [ 29M] 21-5 理论实操：JS事件中的事件对象 │ ├── [ 33M] 21-6 理论实操：JS中阻止事件冒泡与默认行为 │ ├── [ 17M] 21-7 理论实操：js中输入框获取焦点、失去焦点、内容改变事件 │ ├── [2.8M] 21-8 练习：模拟短信发送效果-需求 │ └── [ 47M] 21-9 练习-模拟短信发送的效果-解析 ├── 22-案例20：web便签拖拽效果【JavaScript篇】/ │ ├── [6.4M] 22-1 案例分析：Web便签拖拽效果的需求分析 │ ├── [ 23M] 22-2 第一步：理解元素可见宽度与高度属性 │ ├── [ 20M] 22-3 第二步：理解元素元素边缘距离属性 │ ├── [ 22M] 22-4 第三步：简易元素拖拽效果实现 │ ├── [ 30M] 22-5 第四步：元素拖拽效果完整实现 │ └── [100M] 22-6 实战练习：web便签拖拽效果实现 ├── 23-案例21：简易文字查询修改器【字符串方法集】【JavaScript篇】/ │ ├── [ 12M] 23-1 理论实操：字符串连接、大小写转换方法 │ ├── [ 22M] 23-2 理论实操：查找索引、替换内容方法 │ ├── [ 21M] 23-3 理论实操：去掉空格、字符串转数组方法 │ ├── [ 19M] 23-4 理论实操：字符串截取方法 │ ├── [8.0M] 23-5 练习：简易文字查询修改器-需求 │ ├── [ 86M] 23-6 练习：简易文字查询修改器 – 解析（1） │ └── [ 98M] 23-7 练习：简易文字查询修改器 – 解析（2） ├── 24-案例22：元素拖拽回放效果【数组方法合集】【JavaScript篇】/ │ ├── [ 28M] 24-1 理论实操：查询连接、倒叙方法 │ ├── [ 22M] 24-2 理论实操：数组转字符串、数组截取方法 │ ├── [ 19M] 24-3 理论实操：数组基础方法 │ ├── [ 23M] 24-4 理论实操：数组万能、排序方法 │ ├── [ 26M] 24-5 理论实操：数组循环方法 │ ├── [2.8M] 24-6 实战：元素拖拽回放效果 – 需求 │ └── [ 52M] 24-7 实战：元素拖拽回放-解析 ├── 25-案例23：购物车效果【JSON对象数据】【JavaScript篇】/ … 其余 6

25 项略，目录共 825 项