Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There were a couple of fun challenges in the CodePen community this week!

On Tuesday, Wes Bos tweeted a JavaScript challenge for this Pen:

See the Pen zrLjYq by Wes Bos (@wesbos) on CodePen.

The rules of the challenge:

When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

Try do it with out any libraries. Just regular JavaScript

Dozens of people shared their solutions. Wes put together a big collection of responses, and posted his own answer to the challenge, too.

On Wednesday, Krisztina Vajda tweeted a CSS challenge with this Pen:

See the Pen CSS Challenge by Kriszta (@vajkri) on CodePen.

The CodePen community came through with clever suggestions! You can check them all out in the replies to the tweet, but here are two of my favorites:

Krisztina later shared her animated solution:

See the Pen Animate section out by splitting it horizontally in half by Kriszta (@vajkri) on CodePen.

One of the great things about these kinds of challenges is the reminder that there are so many different ways to accomplish the “same” thing with code.

Another great thing is knowing that there are so many very generous and skilled people on CodePen, ready to answer any frontend challenge 😉