原文地址：Interactive Learning Tools For Front-End Developers

原文作者：Louis Lazaris

译文出自：掘金翻译计划

本文永久链接：面向前端开发人员的交互式学习工具

译者：前端picker

校对者：无（欢迎大家提意见，喷我都行）

快速总结：通过玩游戏或许我们可以更好的学习前端。因为我们收集了大量的交互式编码工具和游戏来帮助您学习 CSS、JavaScript、SQL、React、Vim、正则表达式、Jamstack 以及几乎所有介于两者之间的语言。

软件行业发展是十分迅速的，所有学习新技能对于我们来说是很正常的事情。在过去的一段时间，我收集了许多交互式编码工具和应用，希望可以帮助您填补 Web 领域开发技能的空白。

下面是目录。

CSS Flexbox	JS Promisees
CSS Grid Layout	JS Game: JSChallenger
CSS Selectors Cheatsheet	JS Game: JSRobot
CSS Animations	Programming Languages, Codewars
CSS Ruler	React
CSS Filters	Regular Expressions
CSS Game: CSSBattle	Regex Crossword
CSS Game: CSS Diner	RegexOne
Git Branching	Service Workers
Jamstack	SQL
JS Design Patterns	SQL: SQLBolt
JS Game: Elevator	SQL Police Department
JS Game: Screeps	TypeScript
JS Game: Untrusted	Vim

CSS FlexBox Layout工具

FLEX BOX ADVENTURE

Flex Box Adventure是一款互动冒险游戏，使用flexbox来解决24项挑战。

KNIGHTS OF THE FLEXBOX TABLE

Knights of the Flexbox Table是另一门精心设计的交互式课程，可帮助您了解 flexbox 规范的不同方面。通过 18 个“地牢”来教你 flexbox。本课程并不是编写纯 CSS，而是要求使用 Tailwind CSS 类，这意味着您将学习 flexbox 以及 Tailwind CSS。

FLEXBOX FROGGY

Flexbox Froggy是一个存在很久的网站，至今认识学习flexbox的一个选择。

FLEXBOX ZOMBIES

Flexbox Zombies是一个学习 flexbox 语法的教育游戏。每个部分都有一个与僵尸相关的古诗，同时让你学习到新的flexbox语法。

FLEXBOX DEFENSE

Flexbox Defense是一个“塔防”策略游戏，通过 12 个挑战教你 flexbox，你必须使用 flexbox 语法来阻止来袭的敌人越过你的防御。

FLEXY BOXES

如果您发现其他一些 flexbox 工具使用起来有些困难，那么Flexy Boxes可能是一个不错的选择。这是一个简单的 flexbox 游乐场，它也为您生成代码。作为一个较旧的工具，这也提供了遗留的 flexbox 代码和供应商前缀。

CSS Grid Layout 工具

GRID GARDEN

Grid Garden来自 Codepip，与 Flexbox Froggy 相同，包括 28 个不同的级别，教您了解 CSS Grid Layout 规范的不同部分。

CSS GRID CHEAT SHEET

该CSS GRID CHEAT SHEET是视觉和互动指南，了解CSS网格。在网格中选择一个框，然后使用左侧边栏中的选项和设置来调整网格布局规范的不同部分。

GRID ATTACK

Grid Attack与前面提到的 Flexbox Adventure 来自同一个创作者。它并不是免费的，包含 80 个类似于现实世界网格布局问题的交互式挑战。

GRID CRITTERS

Grid Critters是一个基于交互式挑战的平台，用于在类似视频游戏的环境中学习 Grid Layout 规范的不同部分。本课程包括 10 章，每章分为多个级别，有的多达 20-26 个级别。

CSS 技能工具

CSS SELECTORS CHEATSHEET

CSS Selectors Cheatsheet 是一个交互式练习，用于测试您对 CSS 选择器的理解。前几个相当容易，但随着您进入更高级的选择器，如较少使用的伪类，练习难度会增加。

CSS ANIMATIONS

如果您想提高在 Web 上制作动画的技能，CSS Animations是一个可靠的、功能齐全的平台，用于学习和试验 CSS 动画规范的不同部分。这门由 32 部分组成的课程包含许多预制图形，这些图形在课程中用作动画的基础。这是一种使用 CSS 学习关键帧动画的有趣方式。

CSS RULER

CSS Ruler为您提供了可以试验的三种 CSS 单位的视觉表示：字体相对（例如 rem、ch）、视口百分比（例如 vh、vw）和绝对（例如 px、in）。

FILTER BLEND

FILTER BLEND 是小网站，使用CSS的不同值围绕让你一塌糊涂mix-blend-mode，background-blend-mode和filter性能。您可以在图层中添加一个或多个您自己的图像以及背景颜色，然后调整设置以查看不同值的行为。

CSSBATTLE

CSSBattle可能是此列表中唯一有可能使您成为更糟糕的开发人员的交互式学习工具！它可以让您进行交互式挑战，其目标是使用纯 CSS 以最少的代码复制给定的图像。通过这些练习，您肯定会学到很多关于 HTML 和 CSS 的知识，但这些技术在实际场景中通常没有用处。

CSS Diner

CSS Diner非常适合 CSS 初学者或不熟悉高级 CSS 选择器的人。这个游戏允许您通过一个有用的 HTML 查看器在食品上使用真正的 CSS 选择器，这样您就可以看到图形和代码之间的关系。

学习 JavaScript 的工具

TYPESCRIPT EXERCISES

TYPESCRIPT EXERCISES 是一个交互式游乐场，用于学习 TypeScript 的不同功能，TypeScript 是过去几年越来越受欢迎的流行 JavaScript 超集。如果您对 TypeScript 有基本的了解并想扩展它，这个应用程序可能适合您。

DESIGN PATTERNS GAME

Design Patterns Game并不适合初学者，如果您有相当多的编程经验或对 JavaScript 非常熟练，但从未真正研究过 JavaScript 设计模式，那么这可能是一个不错的起点。

REACT TUTORIAL

现在有很多地方可以学习 React，而React Tutorial也是一个不错的选择。它从一些 JavaScript 概念开始，这些概念对于理解很重要，以便更有效地使用 React。此外，页内编辑器为您提供自动完成提示以及解决挑战的提示。并非所有课程都是免费的，但这里足以让您在付费之前深入了解 React 的基础知识。