6个学习CSS的免费在线游戏网站

01、CSS Diner

地址：https://flukeout.github.io/
非常适合：初学者学习和练习 CSS 和 HTML

如果您是一个零基础的初学者，最好从 CSS Diner 之类的游戏开始。在您准备好掌握更复杂的主题（如 CSS flexbox 或网格）之前，请先了解 HTML 标签、类、id 和其他重要概念。完成此游戏的 32 个级别后，您将拥有坚实的基础，并准备好进入下一个游戏。

02、Grid Garden

地址：https://cssgridgarden.com/
非常适合：学习 CSS 网格

使用 CSS 网格种植胡萝卜园。在这个有趣的小游戏中，您必须通过掌握 CSS 网格（一个用于创建二维网格布局的强大模块）来浇灌胡萝卜作物并毒害杂草。有了它，您可以轻松定义网站上的列、行和网格模板区域。只需打开游戏并立即开始玩 - 无需注册！

03、Flexbox Zombies

地址：https://mastery.games/flexboxzombies/
非常适合：学习 CSS flexbox 布局

Flexbox 是任何前端开发人员都应该掌握的另一个概念。在这款游戏中，每一章都会解开部分情节，让您有机会学习和实践新的 flexbox 概念。

04、Flexbox Froggy

地址：https://flexboxfroggy.com/
非常适合：学习和练习 CSS flexbox 布局

这个游戏很像 Grid Garden，但用于学习 CSS flexbox。它有 24 个级别，您可以按任何顺序练习。

05、Flexbox Defense

地址：http://www.flexboxdefense.com/
非常适合：学习和练习 CSS flexbox

这是另一个以有趣的方式学习 CSS flexbox 的简单浏览器游戏。无需注册，如果您需要快速提醒，您可以跳到任何级别。

06、CSS Battle

地址：https://cssbattle.dev/
非常适合：练习 HTML 和 CSS，与他人竞争

自己玩不如和别人竞争好玩！CSS Battle 是一款非常容易上瘾的 CSS 高尔夫游戏，具有各种级别和排行榜，玩家可以在其中尝试仅使用几行 CSS 来直观地复制“目标”。

原文链接：https://zhuanlan.zhihu.com/p/447712326