Challenges

Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on. The best Pens get picked and featured on the homepage!

Get notified of each week’s challenge, ideas, and resources via email.

This month’s theme

Puzzles

It's the July #CodePenChallenge!

This month is all about puzzles 🧩

We've got 4 weeks of fun ahead of us, playing with front-end versions of all sorts of puzzles.

Each Monday we'll give you a new challenge prompt to puzzle out, along with a starter template to help you get going, plus lots of ideas and helpful resources to help you grow or flex your front-end development skills.

This week’s challenge

Puzzle Pieces

Your challenge: create a Pen that includes puzzle pieces

Upcoming challenges

  • Maze

Past months

These months each have four challenges which have already been completed. Check out all the cool Pens people created for them.

Let's Scroll!

The June #CodePenChallenge starts now!

This month is all about scrolling 📜

We're going to spend June exploring the ins & outs, ups & downs, and side-to-sides of scrolling on the front-end. It's a great opportunity to sharpen up your CSS and JavaScript techniques and play around with motion and interaction in your front-end designs.

Each week this month, we'll give you a scrolling concept as a prompt, plus a starter template and a bunch of ideas & resources to help you grow your skills and flex your front-end knowledge.

Let's scroll!

Filters

Welcome to the May #CodePenChallenge ☀️

This month is all about filters! Each week this May, we'll work with a different kind of front-end filtering, using techniques from CSS, JavaScript, and SVG. In week 4, we'll put them all together for a final filtering extravaganza.

Every Monday for the next 4 weeks we'll give you a starter template, plus lots of ideas and resources to help you develop new skills or flex your filter know-how. Let's go!

Bubbles

The April #CodePenChallenge starts now!

This month, we're going to play around with bubbles 🫧

Each week this month we'll give you a bubble-themed coding prompt, plus lots of resources and ideas to help get your creativity bubbling.

Notifications

The March #CodePenChallenge starts now!

This month, we're going to take a deep dive into the design and function of notifications 🔔

Love them or hate them, notifications are an important feature of so many sites & apps. Well thought out, pleasingly designed notifications can make the difference between a UX that bugs the user and a fun interaction that the user looks forward to seeing!

Each week this March we'll work with a different piece of the notification experience. We'll have plenty of ideas and resources as we go to keep you notified of how to approach the challenge. And, the skills you grow in each challenge will help you tackle the next one.

Leap Year

The February #CodePenChallenge starts now!

2024 is a leap year, a calendar phenomenon that adds an extra day to February every four years (with some exceptions, which we'll get into later).

In honor of this special year, we'll spend all 29 days of February leaping around the front-end, playing with the "leap" theme and building JavaScript and CSS skills as we go.

Every Monday for the next 4 weeks we'll give you a starter template, plus lots of ideas and resources to help you leap in!

CSS Stunts

New year, new #CodePenChallenge!

For more than 10 years, CodePen has been the home of Pens that really push the limits of CSS. The innovative developers in the CodePen community are constantly expanding their understanding and imagination around what CSS can do, leading to some truly mind-blowing CSS stunts.

For this month's challenge, we're going to help you build your front-end skills or flex your CSS chops by digging into the details of how those Pens that make you say "you can do that in CSS?" really work. And we're not just doing it to teach you a couple party tricks! A good understanding of some CSS stunts — including their limitations & pitfalls — can teach you a lot about the front-end.

We'll start off with a few tried & true CSS stunts, then move on to the current cutting edge. By the end of week four you'll have a whole bunch of new CSS tricks up your sleeve!

Pairs of Opposites

The final #CodePenChallenge of 2023 starts now!

This month, we're going to be working with opposites.

Opposites in size, shape, color, or texture can bring intrigue to a front-end design, and they're also just plain fun to play with! This month we invite you to use your imagination and dig into the possibilities of a series of opposite pairs.

Each week in December, we'll prompt you with a pair of opposites, a starter template and a lots of ideas & resources.

Then it's up to you to decide how those two contrasting concepts will interact with each other in your Pen.

Style Trends

The November #CodePenChallenge starts now!

This month is all about ✨style

Each week in November, we'll take inspiration from a current UI design style trend. We'll give you an unstyled HTML template and lots of examples and resources for exploring each week's design style. After that, every design choice is up to you. You're in charge of the color palette, layout, typography, use of (or lack of) whitespace — everything!

This month is a fun opportunity to explore styles you haven't tried before, or flex your front-end design chops!

And, this month has a little meta-challenge within the challenge. Though the styles will change each week, in homage to CSS Zen Garden, the HTML template will be exactly the same each week. Can you spin up a unique style for the same page 4 times in a row? Let's find out!

Halloween Party!

The October #CodePenChallenge starts now!

This month, we're having a Halloween party 🎃

Each week in October we'll invite you to try a new Halloween-themed prompt. We'll give you a starter template, plus lots of ideas and resources to help you get into it. Then, it's up to you to show us front-end tricks & treats!

Navigation

The September #CodePenChallenge starts now!

This month, we're focusing on navigation ⛵️

Good navigation helps your visitors find the shortest, clearest path to the thing they want to do in your site or app. There's a bit of an art to it, and it helps to have a lot of design patterns in your tool chest. This month is all about building up those tools!

All through September, we'll give you a navigation style or technique as a prompt, plus a starter template and a ton of ideas & resources to help you navigate through the challenge.

Photos

Welcome to the August #CodePenChallenge!

This month is all about photos 📸

Photos are a major part of what makes the web fun, informative, and useful, so of course front-end developers spend a whole lot of time working with them. This month's challenge is filled with fun opportunities to hone or flex your HTML, CSS, and JavaScript skills as we build Pens with photos.

All through August, we'll dig into the details of photos on the web, from the HTML basics all the way through to interactive photo experiences.

Each week's prompt will add on to what we learned in the previous week, and on week four we'll have a fun final project that brings it all together. Throughout the challenge, we'll have lots of ideas to spark your imagination and plenty of resources to help you level up your skills.

CodePen Challenges are purely for fun. It's not a competition. There is nothing to lose, and the only thing to gain is skill through practice. It's in the style of the ol' CodePen Pattern Rodeo's and community-organized events like #Codevember. If you'd like to sponsor a month, contact chris@codepen.io.