Recently Virtual Coffee @virtualcoffee) has introduced me to CSS Battles at CSS Battle.Dev It's a site that challenges your CSS skills. They show you an image and you recreate it as close as possible.

In Virtual Coffee we do these on Zoom with some members sharing their screens. We discuss strategies for solving the puzzle. I liked it so much I've done more in my spare time.

CSS Battles

As mentioned above CSS Battles are a challenge to recreate an image using CSS and HTML. Your score points as you build.

They score for accuracy and characters use. The more closely your work resembles the target the higher your accuracy. The less characters the higher the score.

To explain I'll work through a challenge or Target. They have a Battle Section and a Daily Target but they work the same.

Set Up

The start of a battle.

The basic screen is three columns, the text editor, your code output, and the target image. Above the code output are some helpful tools, "Slide & Compare" and "Diff", more on them later.

The end result.

Battle Example

This is Challenge #3 Push Button, see it here

This is the starter code for every challenge with instructions in the comments. Don't forgot to delete comments, they added to your character count and you want a low count.

<div></div>
<style>
  div {
    width: 100px;
    height: 100px;
    background: #dd6b4d;
  }
</style>

<!-- OBJECTIVE -->
<!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->

<!-- SCORING -->
<!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->

<!-- IMPORTANT: remove the comments before submitting -->

I setup a pomodoro timer for 25 minutes to block out some time. The first thing, I do is change the background color. The colors are listed under the Target window. Then made a rectangle for the main shape.

  body{
    background:  #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rec{
    width: 300;
    height: 150;
    background: #243D83;
  }

CSS Battle has some tools to help you match the target image. One is a slider that you move a across the Code output window that shows the target and helps you adjust you image.

The other is the diff for difference. Click it and wherever you image aligns with the target image turns black. Here is the diff mode after making and positing the rectangle.

Next I built a big dark blue circle with large border. The border is the outer light blue circle. Since the border color is the same as the overall background color they blend together.

<div class="rec">
  <div class="cir"></div></div>
</div>
<style>
  .rec{
    width: 300;
    height: 150;
    background: #243D83;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cir{
    width: 150;
    height: 150;
    border-radius: 50%;
    background: #243D83;
    border: 50px solid #6592CF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

Then I added the center circle, a div with a class of dot.

<div class="rec">
  <div class="cir"><div class="dot"></div></div>
</div>
.dot{
  width: 50;
  height: 50;
  border-radius: 50%;
  background: #EEB850;
}

It took less than 11:25 to get here. That's including time to stop for screen shots. I'd forgot I wanted to time myself and was taking notes as I went.

I clicked the Submit button and got a score of 600.01 with 100% match and 1094 characters. I realized I hadn't removed the comments. So I had higher character count.

Once the text was removed the score changed to 600.77 with 656 characters. Part of the score is the character count, it's like golf, the lower the better.

Here's the diff tool showing 100% match. Everything is aligned.

Tips to lower your character count.

Notice in the code height and width don't have units. You don't need them for some properties. You can also leave off closing tags, delete white space and indents.

It makes the code hard to read but browser doesn't need them.

Once you learn how to play, remove the commented instruction before you start coding. Otherwise you'll forget.

Battle and Daily Targets

There are different varieties of battles. There are battle where they release a wave of different Target images. These have leader boards where you can compare your score to others. They track the Battle stats for 4 weeks but you can work the targets any time.

You can set a leader board of just your friends.

Then they have a Daily Target. It's only open for 24 hours and there's no leader board just whatever you score.

By default, you can play today's target. If you have a PLUS membership, you can also play all the past daily targets
You cannot improve your highscore on a Past Daily Target. If you are a PLUS user, you can still play and get a score on any past daily target. -- CSS Battle

A PLUS User account is $5 a month of $3 if you pay for a year at once.

There is a learn CSS section of tutorials. They use the game screen to teach fundamentals of CSS. This is for learning CSS not for the learning the game.

Thoughts

This is a cool way to practice some CSS. It's a fun exercise to practice coding skills. Thanks to @meg and the Frontend Friday Folks Fighting group at Virtual Coffee for the introduction.

Try CSS Battles at CSSBattle.dev

-$JarvisScript git push

CSS Battle: Test your Skills