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.
![floscode](https://res.cloudinary.com/practicaldev/image/fetch/s--hagaVnKv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F1358491%252Fa052ea75-af3a-453d-96e7-d80ef6804f6f.jpeg)
The Frontend Challenge: 🍌 bananas are the superior fruit
Florian ・ Mar 25
@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.
![rafajrg21](https://res.cloudinary.com/practicaldev/image/fetch/s--0UVOzibX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F60601%252F8d4e424e-2f6f-499b-a330-2f4d3bee7e0d.jpg)
The Frontend Challenge: Glammed Up Camp Activities
Rafael Romero ・ Mar 31
@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.
![highflyer910](https://res.cloudinary.com/practicaldev/image/fetch/s--8qqyUJN7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F2491%252F2e334b3d-5af0-43e5-95c0-e3ededf148f7.png)
Intersection Observer API - One Byte Explainer
Thea ・ Mar 21
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
#devchallenge
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)
Congratulations @floscode, @rafajrg21, and @highflyer910 -- what a big accomplishment!!
Congrats!!!
Thanks! 🙌🏻 It was very fun, I'm so happy with the result ♥️
They used JS why? but the challenge was css challenge only
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!
the banana is cute, good job 🥺
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.
Wow, this was so much fun, y'all!
So many great submissions. Congrats all 'round!
Aww thank you and congrats to all winners! I'm so honored to be in this list 🥰
Congratulations to the winners and all the participants!!! And also for the organization!!! Great contest!!!
Congratulations to the winners! 😊
I will be gone for the next challenge. This one was very fun, though!
I love all the winner's submissions. Keep up the good work!
Congrats guys! Very cool and interesting work 👏
Soooo many good entries — I know this was a tough pick, but these are some mighty fine choices! Major congrats to the winners. 👏
And haha, I just gotta say that seeing that banana CSS embedded up top makes me super happy. 🍌
Awesome stuff everybody... here's to a great first challenge and many more to come! 🙌
I'm glad to hear that the banana brings a little smile to your face 😊
Great work everyone!
Great accomplishments for
Congrats to you three for great works done 🏆
Congrats to all participants for joining the challenge 🥈
It's been lots of fun and lessons!
We all look forward to the next Frontend challenge
Wow, BIG Congratulations @floscode, @rafajrg21, and @highflyer910🎉
Congrats ! 🍌
Congrats to the winners!
This was a lot of fun. Looking forward to the future challenges.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.