Less than two weeks ago, we announced our first-ever DEV challenge: The Frontend Challenge.

We welcomed everyone to participate in one or all three prompts:

• CSS Art: Turn your favorite snack into CSS Art
• Glam Up My Markup: Take our provided HTML and make it interactive
• One Byte Explainer: Explain a browser API or feature in 256 characters or less

We were blown away by the results. Each prompt produced literally dozens of submissions that could have won. But of course, there can only be one winner per prompt, and here they are below.

We really really hope that everyone who submitted is back for the next frontend challenge because there are definitely many future winners in this group.

Congratulations To…

@floscode for taking the top spot in the CSS Art category with their deliciously interactive CSS banana. Wow!

This was absolutely creative through and through. It extended the idea of the challenge while really cutting to the heart. Bonus points for a great explanation of where some of the inspiration came from.

The Frontend Challenge: 🍌 bananas are the superior fruit

Florian ・ Mar 25

#frontendchallenge #devchallenge #css

@rafajrg21 for winning the Glam Up My Markup category by making our camp activities interactive, as they should be.

This submission offered an accessible, clean, interactive design which is useful at various window sizes.

The Frontend Challenge: Glammed Up Camp Activities

Rafael Romero ・ Mar 31

#frontendchallenge #devchallenge #css #javascript

@highflyer910 for earning the win in One Byte Explainer with their helpful and concise explanation of the Intersection Observer API.

Intersection Observer API tracks when elements are visible on screen. Avoids expensive event handlers. Optimizes and stays responsive to viewport changes.

Compared to traditional scroll/resize event handlers, it is more efficient while being simpler to implement. Give it a try!

This submission compares and contrasts the API described with the popular alternative which this API took the place of. Great use of the space allotted.

Intersection Observer API - One Byte Explainer

Thea ・ Mar 21

#frontendchallenge #devchallenge #javascript #webdev

In addition to bragging rights, our winners will receive an exclusive winner badge on their DEV profile as well as any gift they’d like from the DEV Challenge collection on the DEV Shop.

All participants will be receiving their participation badge this week.

What’s next?

We’ll be hosting another Frontend Challenge very soon! Be sure to follow our challenge tags so you don’t miss the announcement. Remember, you can always build on the work (and especially the learnings) of previous projects, so not all is lost!

Thank you to everyone who participated. ❤️

We hope you had fun, felt challenged, and maybe added a thing or two to your professional profile.

See you next time!