dev.to staff for The DEV Team

Posted on Apr 2

Congrats to our Frontend Challenge Winners!

#frontendchallenge #devchallenge #css #javascript

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!

#frontendchallenge

This is the official tag for submissions and announcements related to the community Frontend Challenge.

#devchallenge

This is the official tag for submissions and announcements related to DEV Challenges.

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!

Top comments (37)

Jess Lee • Apr 2

Congratulations @floscode, @rafajrg21, and @highflyer910 -- what a big accomplishment!!

Peter Kim Frank • Apr 2

Congrats!!!

Rafael Romero • Apr 2

Thanks! 🙌🏻 It was very fun, I'm so happy with the result ♥️

Vaibhav Shrimali • Apr 3

They used JS why? but the challenge was css challenge only

Florian • Apr 2

Many thanks to the DEV team for including my CSS banana in the list of the winners! It was amazing to see all the different creative snack entries, with many pushing the boundaries of CSS far beyond traditional methods. While my approach might have been more on the 'square' side 😅

Congratulations to all the talented participants. I'm excited for the upcoming challenge!

Jonas Scholz • Apr 3

the banana is cute, good job 🥺

Ben Halpern • Apr 2

We had some amazing submissions. I hope everyone participates in the next frontend challenge. I think we'll have similar prompts with some new specific requests.