Advanced CSS and Sass: Flexbox, Grid, Animations and More!

互联网上最先进的现代 CSS 课程：掌握 Flexbox、CSS Grid、响应式设计等众多技能。

讲师:Jonas Schmedtmann

您将学到什么

• 众多现代 CSS 技巧，打造惊艳的设计和效果
• 高级 CSS 动画：使用 @keyframes、animation 和 transition
• CSS 的幕后工作机制：层叠、优先级、继承等。
• CSS 架构：组件化设计、BEM 方法、编写可重用代码等。
• 使用 Flexbox 构建大型实战项目
• 使用 CSS Grid 构建大型实战项目：CSS Grid 布局实战
• 在实际项目中使用 Sass：全局变量、架构 CSS、管理媒体查询等。
• 高级响应式设计：媒体查询、移动优先与桌面优先、em 和 rem 单位等。
• 响应式图片在 HTML 和 CSS 中的应用以加快页面加载速度
• SVG 图像和视频在 HTML 和 CSS 中的应用：构建背景视频效果
• NPM 生态系统：开发工作流和构建流程
• 在课程问答中获得友好且快速的支持
• 可下载的讲座、代码和设计资源，适用于所有项目

课程要求

• 本课程不适合初学者——在学习之前，你应该熟练掌握 HTML 和 CSS 编码。
• 任何计算机和操作系统都适用——Windows、macOS 或 Linux
• 无需任何付费软件——你现有的文本编辑器就已经足够好用了。

课程描述

您是否已经编写了一段时间的 CSS，但希望将技能提升到下一个层次？您是否对诸如继承、优先级或层叠等 CSS 术语感到困惑？

好消息：有一个资源可以让你学习所有先进的和现代的 CSS 技巧和技术！

欢迎来到“高级 CSS 和 Sass”，这是互联网上最先进、最现代且内容最全面的 CSS 课程。它包含了一切您想要在高级 CSS 课程中获得的知识，甚至更多。

在这门课程中，您将学到复杂的 CSS 动画、先进的响应式设计技术、Flexbox 布局、Sass、CSS 架构以及基础的 CSS 概念等知识。

像我所有的其他课程一样，在这门课上您会构建美丽且精心设计的项目，让您对自己感到自豪，并准备好独立开发复杂的项目。

完成本课程后，您将：

1. 掌握最现代和先进的 CSS 属性和技术；
2. 精通前沿布局技术 Flexbox 和 CSS Grid；
3. 准备好为各种设备和情况构建响应式布局；
4. 深入了解 CSS 在幕后的工作原理；
5. 使用 Sass 构建可重用性和可维护性的大型 CSS 代码库。

请注意，本课程不适合绝对初学者，因此您应该已经具备中级 HTML 和 CSS 技能（如果您不具备这些技能，请查看我的其他课程）。

这门课程非常庞大，时长超过 28 小时。以下是您将学到的内容：

大量现代前沿的 CSS 技术，用于创建惊艳的设计和效果：
clip-path、background-clip、mask-image、background-blend-mode、shape-outside、filter、backdrop-filter、object-fit、transform、column-count、hyphens、perspective、calc() 和自定义 CSS 属性；
高级 CSS 动画
使用 @keyframes、animation 和 transition；
现代 CSS 开发所需的高级选择器、伪类和伪元素；
CSS 在幕后的工作原理：
层叠、优先级、继承、值处理、视觉格式化模型、盒模型、盒子类型、定位方案和堆叠上下文；
CSS 架构：
7-1 规则、组件式设计、BEM 方法论，编写可重用、可维护且可扩展的代码；
Sass 入门：
变量、嵌套、部分文件、导入、混入、函数、继承等；
在实际项目中使用 Sass：
设置全局变量、构建可重用性、架构 CSS 和管理媒体查询；
NPM 生态系统：
设置开发流程以编译 Sass 并实现自动浏览器刷新，创建构建过程以合并、前缀和压缩 CSS 文件；
现代响应式设计：
流体网格、布局类型、灵活图片、使用媒体查询测试不同屏幕宽度、像素密度和触摸能力；
高级响应式设计工作流程：
移动优先与桌面优先策略、选择断点、em 与 rem 单位以及特性查询以检测浏览器支持；
在 HTML 和 CSS 中实现响应式图片，加快页面加载速度：
分辨率切换、密度切换、艺术方向；
HTML 和 CSS 中的 SVG 图片：
如何使用 SVG 及其原因、生成 SVG 图标精灵、通过 CSS 更改 SVG 颜色及最佳实践；
在 HTML 和 CSS 中嵌入视频：
构建背景视频效果；
Flexbox 布局：
主要概念，介绍 Flex 容器和 Flex 项目的特定属性，应用于大型实际项目中的高级定位技术；
CSS Grid 布局
：主要概念、CSS Grid 与 Flexbox 的区别以及应用于实际项目的布局技巧。这部分内容本身就可以成为一门完整的课程！

为什么您应该学习这门课？
您可能已经看到这门课程的内容非常丰富，但也许您仍然不确定是否真的需要学习高级 CSS？

这是因为 CSS 非常容易上手。事实上，大多数开发人员严重低估了 CSS 的重要性和力量。但这与事实相去甚远！

CSS 让我们的设计栩栩如生。我们可以用它做很多事情！掌握像 Flexbox、CSS Grid 和动画这样的高级技术将让您在使用过时方法的许多 CSS 开发者中脱颖而出。

此外，当您尝试精通 CSS 并维护大型项目时，CSS 可能会变得非常棘手。因此，对基础知识有良好的理解对于任何严肃的前端开发者来说都是绝对必要的。

而这门课程可以帮助您解决所有这些问题！

所以，您应该学习这门课吗？答案很可能是肯定的！

无论您是刚开始还是已经是经验丰富的前端开发人员，在这门课程中一定会有适合您的内容。

现在报名，您将获得以下福利：
28 小时更新的高清视频，易于搜索和引用（非常适合 Udemy Business 学生）
专业的英文字幕（不是自动生成的那种）
可下载的设计资产 + 每个部分的启动代码和最终代码
理论视频的可下载幻灯片（保证不会无聊！）
免费的课程问答支持
许多小挑战包含在视频中，以便您跟踪进度。

如果您看到这里，请务必观看宣传视频查看课程项目。我保证您会感到惊讶！

之后，我希望欢迎您成为我的新学生。我相信您一定会喜欢这门课！

本课程适合谁:

• 希望将自己的 CSS 技能更新到最现代水平的 CSS 开发者
• 希望扩展工具集，学习动画、flexbox、Sass、NPM、SVG 等更多内容的 CSS 开发者
• 希望深入了解 CSS 内部工作机制的前端开发人员
• 任何想要真正精通 CSS 的人！