响应式设计: 从入门到精通 | Responsive Design for Beginners

本课程手把手教你运用HTML和Sass/SCSS，将设计稿落地为完整网站，一站式掌握实战网页开发流程与技巧。

课程介绍

本课程聚焦使用HTML和Sass/SCSS完成从设计到网站搭建的全流程，教学模式区别于传统课程。不同于逐类讲解CSS属性的授课形式，课程全程跟随完整项目实战，从Figma设计稿起步搭建网站，同时拆解开发过程中高频遇到的各类问题。学习本课程，能够完整模拟真实职场的网页开发工作场景。

• 在VS Code中搭建专属开发工作流
• 完成Sass文件编译操作
• 规范梳理项目文件结构
• 搭建GitHub仓库，实现代码版本管理
• 解读Figma设计稿，转化为SCSS样式代码
• 引入Google Fonts字体与Font Awesome图标库
• 结合HTML、SCSS与JavaScript，开发无障碍响应式网站
• 借助Firefox开发者工具排查样式故障
• 将成品网站部署至Netlify平台

课程学习主题

课程分为多个阶段，循序渐进讲解现代网页开发核心知识点，各阶段学习内容如下：

基础课程（22小时）

• 合理运用语义化HTML标签
• 依托BEM规范、Sass分文件、混入、CSS自定义属性及辅助类编写高效样式
• 吃透CSS层叠规则
• 掌握行内、行内块、块级元素的文档流特性与常见问题
• 使用Flexbox与Grid完成页面布局
• 区分px、em、rem、ch、%、vw等CSS单位的适用场景
• 借助clamp()函数打造响应式排版
• 熟练使用CSS自定义属性（变量）
• 通过srcset与设备像素比（DPR）实现响应式图片适配
• 掌握SVG图片及内联SVG的使用方法
• 利用CSS过渡制作悬停动画
• 实现线性渐变背景效果
• 运用CSS calc()函数完成数值计算

高级课程（4小时）

• 制作悬停动态下划线与背景效果
• 使用CSS网格模板区域、命名网格线优化布局
• SVG图形绘制与应用
• 元素绝对定位实战
• 通过nth-child伪类选择器实现内容块交替展示
• 活用::before与::after伪元素
• 表单元素个性化样式定制

最终课程（6小时）

• 借助JavaScript开发兼具动画效果与无障碍特性的汉堡菜单
• 理解层叠上下文与z-index层级规则
• 利用CSS自定义属性搭建配色主题体系
• 结合CSS网格、auto-fit与minmax()构建自适应块状网格
• 通过CSS网格与绝对定位实现内容叠加效果
• 使用object-fit、object-position调整图片展示形态
• 利用mix-blend-mode为图片添加创意滤镜
• 掌握Node、npm及package.json基础用法
• 使用Vite JS编译Sass与JavaScript模块

整套课程体系内容详实、由浅入深，助力学员全面吃透现代网页开发核心技能，夯实实战能力。