Webデザインとフロントエンドの開発を学ぶ多くの方法は、一部の人は本や記事を読んでするために使用されるいくつかの人々が適切な知識のポイントを獲得し、ビデオのコースを見ることを好みます。もちろん、楽しいゲームをプレイするために学ぶことのようにもテストに効果的な方法であり、自分のスキルをアップグレードしてください。
今日は、11楽しいオンラインゲームを共有するシーンのゲームを通して、あなたのWebデザインとフロントエンドの開発スキルを向上させます。遊び、楽しいです。あなたが知識を学習している場合は、ああしてみてください。
01、することはできませんUnsee
これはあなたの美的、洞察力にオンラインウェブゲームのテストです。あなたは、2つの間のコントラスト差をサポートし、サイトに加えて、あなたは正しいか間違っオプションを教えてくれ、2つのIOSインターフェイスから、より正しいか、適切な設計を選択する必要があります。ゲームの難易度が増加すると、インターフェイスの違いがますます小さくなります。IOSインターフェイスのテストは時間にあなたの視力と感度は、それに挑戦するために迅速に来ます。
住所：HTTPS：//cantunsee.space/
2、カーンタイプ
文字間隔は、マスタ印刷と学ぶことができますデザイナーへのスキルの一つは、カーンの種類はあなたがゲームの文字間隔を調整する助けにオンライントレーニングです。あなたは正しい文字間隔、および対応するスコアを理解するために、「比較」をクリックして、適切な場所に文字を移動する必要があります。あなたは10回のテストを完了したとき、私たちは、最終的なテストのスコアを取得します。
住所：HTTPS：//type.method.ac/
3、シェイプタイプ
デザイナーのために、ラテン語フォントスタイルを増強する能力は、あなたのタイポグラフィとレイアウトのより深い理解を助けることができます。ペンツールに基づい型タイプのゲームは、あなたがスムーズかつ完全な状態を達成するために、フォントのエッジを作るために、スライダをドラッグする必要があります。実際のコースで、あなたはそのような情報のフォントの種類、フォントデザイナーと数十年などのフォントの起源、学ぶことができ、また、構造を描画することにより、ストロークフォントの認識を深める比較すること。
住所：HTTPS：//shape.method.ac
4、ベジエゲーム
PSを使用する場合は、必然的にそれは、ペンツールを使用します。PS愛らしい新しい友人に新しいのために、どのようにそれを把握するペンツールを使用するには？ベジェゲームのゲームを試してみてください。
根据动画演示，你需要利用钢笔工具绘制图形。当然如果你忘记了前面的步骤，系统会有相应的提示。但随着难度的增加，你就要结合之前学到的方法，独立绘制更复杂的图形了。
地址：https://bezier.method.ac/
5、Color
准备好训练你的色彩辨识和感知技巧了吗?那么，快来试试在线交互游戏 Color 吧。在这款游戏中，你需要快速完成常见的配色测试，例如色调、饱和度、互补色、三色、四色等模式测试。分值越能达到「Perfect」，你的颜色感知能力也就越出众哦。
地址：https://color.method.ac/
6、Pixactly
Pixactly 是一个在线测试像素尺寸的网站，通过互动体验帮助你直观的了解像素的尺寸大小。你需要根据像素的宽、高提示来绘制画框，并能及时得到反馈。通过 5 项测试，能够提高你对像素尺寸的把控能力。
地址：http://pixact.ly/
7、Hex Invaders
前端开发过程中，会接触到各种类型的编码，了解 Hex(十六进制)编码是前端开发者需要掌握的知识之一。Hex Invaders 这款游戏则通过互动的方式，帮助你直观的掌握 Hex 编码。你需要根据页面上方出现的 Hex 编码，选择正确的颜色来完成游戏。随着难度的增加，关卡敌人会越来越多，挑战也变得更加烧脑哦。
地址：http://www.hexinvaders.com/
8、Flexbox Froggy
这是一款相当有趣的小青蛙跳荷叶游戏，你可以边玩游戏边学习 Flex 布局的相关知识。你需要使用justify-content属性，帮助青蛙跳到荷叶上。随后你需要按照游戏提示，完成其他属性的学习。游戏共有 24 个关卡，将帮助你更直观的掌握 Flex 布局。
地址：https://flexboxfroggy.com/
9、Flexbox Defense
如果你想提升 Flexbox 技能熟练度，可以尝试 Flexbox Defense 这款游戏。这是一款经典的塔防游戏，你必须使用 CSS 定位塔楼的位置，并抵御敌人的进攻。如果你通关了 Flexbox Froggy，再尝试下这款游戏，你的 Flex 布局技能势必能更上一层楼。
地址：http://www.flexboxdefense.com/
10、Grid Garden
还再利用枯燥的文档学习网格布局吗?不如尝试下 Grid Garden 在线游戏。在这款游戏中，你需要利用网格布局的相应属性，完成胡萝卜浇水的任务。游戏共 28 个关卡，你可以掌握网格布局属性的全部用法，帮助你入门网格布局。
地址：http://cssgridgarden.com
11、CSS Diner
如果你是前端萌新，正在学习 CSS 选择器相关知识，那么这款游戏一定适合你。通过这款游戏，你可以学习到各种 CSS 选择器的用法，例如 CSS 类选择器、子元素选择器、伪类选择器等。挑战 32 个关卡，帮助你更好的掌握 CSS 选择器。
地址：http://flukeout.github.io
