从零开始制作网站非常有成就感。但学习如何制作，一开始可能令人望而生畏。您需要掌握 HTML、CSS 和 JavaScript，还要具备一定的界面设计知识，让网站更易于浏览。
许多人以为学习这些技能就意味着要阅读大量代码、观看 YouTube 上的技术教程，或者为每个科目报名课程。这些学习方法都有效，但包括我在内的许多人觉得很难坚持，因为缺少动手实践。
这让我想到一种更具互动性的学习方式：把学习“游戏化”。通过玩游戏来练习设计和编程等不同科目，有助于记忆，也能让您在把知识应用到现实场景时更有准备。因此，我研究了五款可以帮助您掌握建站技能的游戏。
制作网站首先需要学习的东西之一是 HTML，即“超文本标记语言”。它决定了文字、图片和其他媒体在数字页面上的排布方式。HTML 通常需要配合 CSS 和 JavaScript 才能呈现出最佳效果，本文稍后会介绍。
虽然 Codédex 涵盖多种语言，但它是少数以游戏形式教授 HTML 的资源之一。在其中，您会玩一系列名为“任务”的游戏来获取经验值（EXP）。任务要求您在屏幕中间的脚本中编写代码，左侧有简短说明解释练习的概念，右侧是显示任务结果（即您所写代码的输出）的终端。每完成一个任务，您就会获得更多经验值，用来解锁涉及更复杂 HTML 概念的高级任务。
我喜欢这款游戏的布局，因为“说明”“脚本”和“输出”三个部分都在同一个屏幕上。我也喜欢它轻松的学习方式：您可以按自己的节奏获取经验值，即使代码写错，角色也不会受到任何“惩罚”。这种宽容让 Codédex 感觉很“舒适”，您可以慢慢学习。
“设计”是制作网站时最重要的考虑之一。每个热门网站都有自己独特的外观。例如在 Google 上，搜索结果采用简单的文字排版，标题比条目描述更大，因此很容易找到信息。当您希望用户在网站上停留更久时，如何设计用户看到的内容最为关键。
Designercize 并不像本文其他条目那样是一款可以互动的在线游戏，而是一个用来生成实践游戏或练习的模板。它会生成带有难度、时间等要求的挑战，促使您针对特定主题设计网页，以帮助特定人群。“设计什么”“为谁设计”和“帮助谁”都是随机生成的，因此很难预测下一个会是什么。
Designercize 设计简洁，适用于许多场景。您可以用它来练习自己的技能、和朋友互相挑战，甚至用来考核应聘者。正因为用途开放，我非常推荐网站设计的新手和高手都试一试。
用户界面（UI）看似简单，实则复杂。UI 是关于用户如何与应用互动的设计：点哪里、看什么、元素如何移动，以及许多其他以操作为基础的问题。在我看来，这是网站开发中最难学的部分，因为用户的行为难以预测。
尽管难以预测，UI 设计中仍有一些会让用户恼火、应当避免的做法。游戏 User Inyerface 展示了许多这样的例子。这个数字实验一开始看起来像是坏掉了，但随着您浏览下去，就会发现那些“bug”都是故意设计的。点了没反应的按钮、打断您手头任务的随机弹窗，以及导航糟糕的下拉菜单，只是它设置的挑战中的几个例子。
虽然这个网站让我很恼火，但我强烈建议您至少试一次，以了解在开发网站 UI 时不该做什么。在游戏中让您吃尽苦头的地方，值得在为自己的网站添加类似功能时牢记。通过挫败感，User Inyerface 让您明白，好用的 UI 能让网站对用户更友好。
回到网站开发使用的编程语言，来谈谈 JavaScript（JS）。JS 用于在网站上实现动态内容行为，例如移动的文字、视频等。由于语法复杂，且需要记住大量不借助网络就难以掌握的知识，它被认为是三种网站开发语言中最难学的。
Elevator Saga 的开发者接受了把这门难学的语言“游戏化”的挑战。在他们的游戏中，您要在可视化的电梯模拟中解决遵循同一结构的问题：“在 X 秒内运送 X 个人”。解决这些问题的唯一方法就是编写 JS 代码。玩这个游戏确实需要一定的语法知识。不过别担心，游戏提供了程序的基础代码，以及包含实用指令的 API 供您参考。
我最喜欢 Elevator Saga 的地方，是围绕它形成的社区。在游戏论坛里，其他用户分享自己的解法，并尝试找出最高效的完成方式。比起自己编写解决方案，我更享受看看别人在游戏中发现了什么。
最后，我想谈谈 CSS，即“层叠样式表”。CSS 用于设置网页上 HTML 的外观样式。它能让页面看起来更整洁，并自定义文字的显示方式。CSS 易于学习，被视为万维网开发的基石。
为了帮助学习 CSS，我强烈推荐 Coding Fantasy 的几款冒险游戏。在他们的角色扮演游戏（RPG）中，您通过编写 CSS 代码让队伍在格子间移动并攻击敌人。在 Flex Box Adventure 中，您扮演亚瑟王，对抗三个邪恶的兄弟；而在他们的另一款 CSS 游戏 Grid Attack 中，您将踏上拯救世界的崇高旅程。
两款游戏都需要您运用“CSS Grid 的力量”来打败敌人、完成任务。
这些有趣的冒险游戏，是通过 RPG 类型学习 CSS 的好方法。它轻松的方式主要面向年轻学生，但我相信，想以怀旧方式学习网站开发的年长人士也同样可以玩得很开心。
