Congrats to the Frontend Challenge: Comfort Food Edition Winners!

#devchallenge #frontendchallenge #css #javascript

Pure CSS cat bakery wins top spot

We are so excited to announce the winners of our Frontend Challenge: Comfort Food Edition!

This challenge asked you to put the food that means something to you on the web, and the range of what came back was wonderful. Imaginary restaurants, overflowing noodle bowls, and regional dishes were the spotlight. We saw into the depths of your CSS refrigerators, and scrolled landing pages that made our mouths water. These projects were built with real care for accessibility, and your write-ups were as generous with what went wrong as with what went right.

Thank you to everyone who participated. Reading through these submissions was a genuine pleasure.

Now, let's celebrate our winners!

🎉 Congratulations To…

CSS Art Winner

Frontend Challenge CSS Art Submission 🍲🥧

Jessica Doering

Aug 10

Kitty Cafe, a whole bakery drawn in CSS 🐱🍰

#frontendchallenge #devchallenge #css #codepen

7 min read

@sizzlebop drew an entire bakery in CSS, and then made every single thing in the case a cat. A macaron with ears, a matcha cupcake, a taiyaki, a paw print cookie, a donut with far too many sprinkles, and a whole kitty cake on the shelf that you have to order 48 hours in advance.

No images, SVG, canvas, or JavaScript. "Every whisker is a div with a border radius." The shop cat wakes up when you click her and dozes off on her own, and there is a ball of yarn on the floor you can pick up and give to her, all running on checkbox state machines. The whole thing is keyboard accessible and the menu is repeated as plain text for smaller screens.

Perfect Landing Winner

Frontend Challenge Perfect Landing Submission 🍲🥧

Mike

Aug 6

🥁 Mâm Cơm Landing Page: I built a Vietnamese dinner tray on a 3,000-year-old bronze drum

#devchallenge #frontendchallenge #webdev #javascript

10 min read

@minhlong2605 built Mâm Cơm, a landing page for the Vietnamese family rice tray, laid out on the face of a Đông Sơn bronze drum cast around 1000 BCE. The central tray is a spinnable lazy susan you can drag, swipe, click, or spin with the arrow keys, built as an ARIA tablist bent into a circle.

The write-up is just as thoughtfully composed as the web page. Mike walks through a contrast bug that every automated checker missed, the 3D version he built and then threw away for being a worse idea rendered better, and a handful of layout bugs that looked fine and measured wrong. We learned a lot from this one (about the code AND the food).