Amazonサイバーマンデー開催中!12/9まで!

"CSS Battle" is interestingUse your CSS skills to get a high score!【Study css】

It's all in English, but the site "CSSBattle" was opened the other day.
As the name implies, it's about using CSS to battle with other users.

It was interesting to play a little, so i'd like to introduce how to play CSS battle this time.
If you have time for designers and coders, why don't you play with them?

参考 CSSBattleCSSBattle

How do I play CSS Battle?

The purpose of the game is to express the given target image with as little code (HTML and CSS) as possible.

It is an image that displays the score by writing a little code while expressing the content of the image 100, and competes with other users.

As of April 2019, there are 12 targets available, with 12 overall rankings and two rankings for each one target.


How to use CSS Battle

How to use is quite simple.

When you first transition to site TOP, you will be asked to log in with your GitHub account, Twitter account, and Google account, so you can sign in with your favorite account.

Then there are 12 targets on the screen, so you can choose your favorite target.

The next screen displays the editor to write the code on the left, the output screen with what you write in the editor in the center, and the target image to the right.

It's easier than that.
Just write code to match the target image to the editor.

When you're done, press submit at the bottom of the screen to see your own score.

I tried to do course 1, but the result was…
Currently, the highest score on course 1 seems to be 834.56 points.

Well, how do I get so.


CSS Battle Summary

It is good that you can study while having such fun.

Please try once if you are interested by all means.

参考 CSSBattleCSSBattle