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

逆锋起笔

共 2194字,需浏览 5分钟

 ·

2022-02-27 04:53

以下内容来自公众号逆锋起笔,关注每日干货及时送达

英文 | https://medium.com/dare-to-be-better/free-online-games-to-learn-css-649881ba7579

翻译 | 杨小爱

CSS 是我们用来设计 HTML 文档样式的语言,它描述了 HTML 元素在浏览器中的显示方式。但是,虽然了解 CSS 的基础知识很重要,但现在几乎不使用纯 CSS。
现代开发人员大多使用 CSS 扩展语言(如 Saas)和 CSS3 网页布局模型(如 Flexbox)来设计他们的网站。
但不要气馁——所有这些概念都是相互建立的,而且CSS也不是那么难的事情,只要您愿意多花时间去寻找一些好的学习资源和练习CSS。
如果您刚开始学习 HTML 和 CSS,会觉得很枯燥,但是如果我们采用游戏得方式一起来学习CSS的话,您会觉得它非常有趣。
因此,今天我们就从第一个游戏开始,然后一个一个地完成它们。
这些游戏可以帮助你提升学习的有信心,同时还能增加学习的趣味性,以便帮助您更好的学习与理解CSS flexbox、grid,或者通过与来自世界各地的其他玩家竞争来完善他们的 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 网格(一个用于创建二维网格布局的强大模块)来浇灌胡萝卜作物并毒害杂草。有了它,您可以轻松定义网站上的列、行和网格模板区域。只需打开游戏并立即开始玩 - 无需注册!微信搜索readdot,关注后回复视频教程获取23种精品资料

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 来直观地复制“目标”。

总结
以上就是我今天跟您分享的6个学习CSS的有趣网站,希望对您学习提升CSS技能有所帮助,如果您觉得有用的话,也请您将这篇文章分享给您的朋友,也许能够帮助到他。
最后,感谢您的阅读,喜欢的话,请记得点赞我,关注我。

20 个 CSS 快速提升技巧

22 个用于网站设计的 CSS 库

HTML + CSS 实现的扫雷游戏

请收下这 72 个炫酷的 CSS 技巧

微信上线新功能!网友:太智能了

浏览 51
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报