通过响应式网页设计训练营学习掌握 CSS

一段时间以来， YouTube 上的观众一直要求我创建一个关于构建网站的深入课程，所以今天我非常高兴地告诉你们，我已经与 Scrimba 合作，为你们带来响应式网页设计训练营。

该课程主要关注如何构建响应式网站，但只关注响应性对我来说感觉不对。

我希望它尽可能具有包容性，以便刚开始学习 HTML 和 CSS 的人能够毫不畏惧地投入其中，但我也希望确保它足够深入，以满足那些已经参与游戏一段时间的人的需求。

可以想象，这意味着内容非常丰富！它包含173节课，内容时长超过15个小时。

为了帮助组织如此多的内容，课程分为几个模块（您可以在下面找到每个模块的更详细的分类）：

• 模块 1：CSS 基础知识
• 模块 2：开始响应式思考
• 模块 3：提升我们的风格
• 模块 4：将 flexbox 提升到新的水平
• 模块 5：CSS 网格：终极布局工具
• 模块 6：更上一层楼

因此实际上，该课程更像是 6 门独立课程，但每门课程都建立在前一门课程的基础上。

通过实践学习

我强烈主张边做边学。我觉得没有必要在还没用过某个东西（比如 flexbox）之前就学习它所有的知识。

flex-basis当您最初只是想创建几列时，了解什么是横轴有什么意义呢？

所以这门课程的核心理念是边做边学。我采用这种方式是因为，当你完成课程后，你不仅会熟悉课程内容，还能掌握 CSS 的实际操作。

完成本课程后，你将能够熟练掌握 CSS。我们无法涵盖所有​​内容，但通过本课程打下的基础将为你继续学习和构建网站奠定成功的基础。

如果您想了解一下，请点击此处。此外，在发布期间，您可以享受 71% 的折扣！如果您想了解更多信息，请继续阅读！

Scrimba 改变了游戏规则

正如我一开始提到的，我和Scrimba的团队合作开发了这门课程。如果你不熟悉 Scrimba，他们已经彻底改变了在线学习 Web 开发的规则。

当您第一次深入了解时，它可能看起来像任何其他视频课程，但您可以直接在视频播放器中与代码进行交互。

是的，你没听错，你可以暂停视频，在视频播放器中修改代码 ，并在内置预览窗口中实时查看更新。点击播放，视频就会从上次中断的地方继续播放。真是太神奇了。

等等，我是谁？

我的名字是 Kevin Powell，我有一个专门讨论 CSS 的YouTube 频道，目前拥有超过 80,000 名订阅者。

我也在课堂上教学，目前我已经进入第六个教学年。

我教授的课程内容包括 HTML 和 CSS 入门、页面布局、排版、Photoshop 等等。

通过我在课堂上教学的经验，我亲眼目睹了学生身上很多有效和无效的方法，并且我将这些经验运用到我构建这门课程的方式中。

我对 CSS 也非常热爱。我把这门课程看作是一个机会，可以帮助大家了解我为什么如此热爱 CSS！

如果您已准备好将您的 CSS 技能提升到一个新的水平，请单击此处注册！

模块的更详细细分

模块 1 - CSS 基础知识

模块 1延续了我免费HTML 和 CSS 速成课程的精髓。因此，它从非常基础的水平开始，但很快就能提高！

在本模块中，我们将探索一些基础知识，例如理解盒子模型，并确保我们正确理解继承和特殊性等内容，许多人，甚至是经验丰富的开发人员，都对此感到沮丧。

尽管重点是基础知识，但我们还是添加了 Google 字体和一些设计技巧和窍门，以便开始使一些简单的布局看起来不错。

在深入研究更复杂的材料之前，它是一个必不可少的模块，可以确保我们都理解 CSS 的基本概念。

模块 2 - 开始响应式思考

这个模块很大，是本课程的核心，也是重点。它介绍了新单元、媒体查询，并开始讲解弹性盒。

它还深入讲解了如何在编写代码之前分析布局。这是一项基础技能，也是许多人难以掌握的技能。

除了提前规划之外，我们还开始探索如何命名我们的课程，以避免在项目规模扩大时遇到问题。

本模块最后构建了一个三页的网站并确保它完全响应。

模块 3 - 提升我们的风格

这篇文章主要介绍 CSS 的更细微的一面。

首先继续上一个项目，使其变得更好，然后再深入另一个设计，在其中学习一些额外的内容，例如背景图像、渐变、视口单位、一些关于排版的更精细的细节，以及创建和设计基本形式。

它是关于更深层次地理解 CSS 并开始释放它的一些惊人潜力。

本模块总结了如何构建一个简单、响应迅速的启动页面，但它迫使我们继续提升对 CSS 的了解。

模块 4 - 将 flexbox 提升到新的水平

模块 4是一个节奏的变化。

至此，我们已经创建了很多内容。我们开始熟悉它们的运作方式，所以现在是时候深入研究 flexbox（CSS 中的两个布局工具之一）。

我们研究它的更精细的细节，例如flex-basis，align-self弹性框内的自动边距如何变化（以及更多！）。

完成此模块后，您将学会如何真正正确地控制页面上的每个元素。

模块 5 - CSS 网格：终极布局工具

接下来是时候了解 CSS Grid 了，它是 CSS 最新的布局工具。它比 flexbox 有了很大的进步。它允许我们构建更复杂的布局，同时简化 HTML 代码！

本模块探讨了它的工作原理，以及诸如、和网格区域之类的东西如何auto-fit使minmax()创建响应式网站变得更加 容易！

我们将研究如何使用网格重新创建一些旧布局，并查看一些简单的页面设计，以及网格在查看全局和组件级别时如何发挥超级作用。

模块 6 - 更上一层楼

模块 6是最终项目，我们将所有内容整合在一起并构建一个 3 页的网站，使用我们迄今为止学到的所有内容，包括 CSS Grid。

在此过程中，我们将通过探索新事物将事情提升到一个新的水平，例如伪元素、一些巧妙的阴影技巧，以及对 JavaScript 的深入研究。

准备好提升您的 CSS 技能并掌握响应式网站的构建吗？

如果您想提升自己的 CSS 技能，在发布期间，它现正以 29 美元的价格出售，比最终价格优惠 71%！点击此处深入了解，将您的 CSS 技能提升到新的水平。