这是您以有趣的方式学习 CSS 技术（例如 CSS Grid 或 Flexbox）的方式

[suchona.kani.z]

在我在 adesso 工作期间，开发了一些令人兴奋的概念，帮助前端开发达到新的高度。我作为教练在“基础 HTML、CSS 和 JavaScript”培训课程中教授了一些基础知识。为了不让枯燥的理论让培训学员感到厌烦，我喜欢用游戏的方式来加深学员的基础知识。我想向您更详细地介绍其中三款在线游戏。

#1 CSS 餐厅
我可以请吃饭吗？该游戏是培训课程的基础，旨在向参与者介绍 CSS 选择器或刷新他们对此主题的知识。游戏的目的是通过 CSS 选择器在 32 个级别中选择所需的盘子。它使用与常规 IDE 类似的界面。因此每个玩家都有机会尝试自己的 CSS 选择器。


CSS Diner 界面

正如您在图片中看到的，右侧有一个带有标签的字段。这些与 萨尔瓦多 whatsapp 数据​ 常规 HTML 标签非常相似，但它们以简化的形式表示表格及其上的板的语义结构。页边空白处有对各个选择器的解释以及如何使用它们的说明。如果玩家卡住了，会有一个“帮助，我卡住了！”按钮，其中包含有用的提示，可以帮助您找到想要的牌。

根据我的经验，并非所有方法都有效。但如果你喜欢拼图，你也可以通过其他选择器来实现你的目标。幸运的是，正确的解决方案不只有一种。那么：胃口好！

#2 网格花园（CSS 网格）
这款游戏不一定能帮助您成为园艺高手，但玩家将学习如何使用 CSS 网格灌溉胡萝卜地。 CSS 网格可以更灵活地设计网站布局并将其划分为您自己选择的网格。

没有 CSS 的 HTML
没有 CSS 的 HTML 将所谓的块元素一层一层地显示出来。为了设计元素或页面，需要使用表格布局。通过这种方式，可以构建和设计网站的元素。

使用 CSS 进行设计
作为 HTML 的补充，CSS（层叠样式表）的开发是为了能够将内容与设计分开。幸运的是，这标志着表布局的结束，从此以后：DIV soup！为了能够相邻显示元素，它们根据需要多次嵌套在 DIV 标记中并使用 CSS 声明 - 例如position:left; - 定位。

HTML5：远离 DIV 汤
HTML5引入了一个新的标准，它赋予了DOM（文档对象模型）更多的语义，并使文档的结构逻辑清晰。