Many ways learning web design and front-end development, some people prefer to watch a video course, some people used to reading books and articles acquire the appropriate knowledge points. Of course, like learning to play fun games are also an effective way to test and upgrade their skills.
Today we will share 11 fun online game, improve your web design and front-end development skills through the game of the scene. Entertaining, fun. If you are learning the knowledge, try oh.
01、Can’t Unsee
This is a test of your aesthetic, insightful online web games. You need to select more correct or appropriate design from two iOS interface, in addition to the site tell you right or wrong option, also supports the contrast difference between the two. With increasing difficulty of the game, the interface differences will become increasingly smaller. IOS interface test your eyesight and sensitivity to time, come quickly to challenge it.
Address: https: //cantunsee.space/
2、Kern Type
Character spacing is one of the skills to master print and designers will learn, Kern Type is an online training to help you adjust character spacing of the game. You need to move the letters to the appropriate location, click on the "Compare" to understand the correct character spacing, and the corresponding score. When you have completed 10 tests, we will get the final test score.
Address: https: //type.method.ac/
3、Shape Type
For designers, the ability to enhance the Latin font style, can help you a deeper understanding of typography and layout. Shape Type game based on the pen tool, you need to drag the slider to make fonts edge to achieve a smooth and full state. In the course of practice, you can learn about the origins of the font, such as information font type, font designers and decades, and also to compare deepen awareness of stroke fonts, by drawing the structure.
Address: https: //shape.method.ac
4、The Bezier Game
When using PS, inevitably it will use the pen tool. For new to PS adorable new friend, how to use the pen tool to grasp it? Try The Bézier Game game.
根据动画演示，你需要利用钢笔工具绘制图形。当然如果你忘记了前面的步骤，系统会有相应的提示。但随着难度的增加，你就要结合之前学到的方法，独立绘制更复杂的图形了。
地址：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
