Jess Lee

for The DEV Team

Posted on Jul 29

Join our latest Frontend Challenge: Comfort Food Edition 🍲

#devchallenge #frontendchallenge #css #javascript

Features a CSS art prompt

We're back with another Frontend Challenge, and this time we're hungry! 🍜🥧

Running through August 16, Frontend Challenge: Comfort Food Edition invites you to build something inspired by the food that makes you feel at home.

Show off the dish you make when nothing else will do, build a site for a restaurant that exists (or one that only lives in your head), share the recipe you've been perfecting for years, or put a spotlight on a regional dish that deserves more attention. Whether you're a CSS connoisseur, a JavaScript chef, or somewhere in between, there's a prompt here for you.

We hope you give it a try!

The Prompts

CSS Art: Comfort Food

Create a work of art using primarily CSS! Let food be your inspiration: a steaming bowl of ramen, a stack of pancakes, a perfectly cut slice of pie, or the dish you grew up eating.

CSS Art Submission Template

Note: We're now allowing a sprinkle of JavaScript in CSS Art submissions! However, judging will continue to focus primarily on the CSS component, so keep JavaScript usage light and purposeful. The star of the show should still be your CSS skills.

Perfect Landing: Comfort Food

Build a polished, functional landing page with a food theme. This could be a real or imaginary restaurant, a recipe collection, a food festival, a love letter to a regional dish, or anything else you can imagine, as long as it captures the theme and demonstrates excellent frontend fundamentals.

Perfect Landing Submission Template

Note: You may use JavaScript, TypeScript, Dart, WebAssembly, or any other browser-compatible language/runtime in your Perfect Landing submissions! Show us what modern web development can do.

Judging Criteria and Prizes

CSS Art submissions will be evaluated on:

Creativity
Effective Use of CSS
Aesthetic Outcome

Perfect Landing submissions will be evaluated on:

Accessibility
Usability and User Experience
Creativity
Code quality

Prizes

Each prompt winner will receive a DEV++ Membership and an exclusive DEV Badge. All Participants with a valid submission will receive a completion badge on their DEV profile.

How To Participate

Publish a post using the submission template provided above and required #frontendchallenge tag. You can submit to one or both prompts, and you can make multiple submissions per prompt (just publish a separate post for each).

You can level up your post by embedding your project directly in your submission. Embeds to consider:

Google Cloud Run: {% embed cloud_run_link %}
CodePen: {% codepen https://... %}

Please review our judging criteria, rules, guidelines, and FAQ page before submitting so you understand our participation guidelines and official contest rules such as eligibility requirements.

Important Dates

July 29: Frontend Challenge: Comfort Food Edition begins! 🍲
August 16: Submissions due at 11:59 PM PDT
September 10: Winners Announced

We can't wait to see what you cook up! Questions about the challenge? Ask them below.

Happy coding!

Top comments (35)

FrancisTRᴅᴇᴠ (っ◔◡◔)っ • Jul 29

Can't wait for someone to push CSS to the limit!

Hala Kabir • Jul 30

I still don't have the Idea on what to use as the main foodd i like almost every one from my country!!!!!!!!!!!

Paulo Henrique • Jul 29

I knew that all that time learning how to cook would pay off

Comment marked as low quality/non-constructive by the community. View Code of Conduct

Koshiro Watanabe • Jul 31

hi, nice to meet you.
I'm a fullstack AI developer with 5years.
I want to collaborate with you.
I can likely be of help to you. Let me handle the tasks that are keeping you busy or proving difficult for you to manage.

Allen Labrague • Jul 30

🍜 Cozy Ramen Night 🌙

Hi everyone! 👋

I just published my CSS Art submission for the Frontend Challenge.

I'd love to hear what you think—whether it's about the artwork, animations, or overall design. Constructive feedback is always welcome! 😊

🔗 Submission

dev.to/a11en/cozy-ramen-night-acb

Happy coding, and good luck to everyone participating! 🚀✨

Sarvar Nadaf • Jul 29

Let's gooooooooooooooo

Ben Halpern The DEV Team • Jul 30

Looking forward to this!

Frank • Jul 29

This sounds like a fun challenge! Will there be any specific expectations around responsive design for the food layouts

David James • Jul 30

Really?

Geordy Elian Reyes Mendoza • Aug 1

🫓 Pupusas at Midnight 🕯️

Just published my CSS Art submission: El Salvador's national comfort food — pupusas with curtido and salsa, drawn entirely in CSS. No images, no SVG.

The twist: the scene has a light switch. One single div with mix-blend-mode: multiply turns the whole table into a night pupusería lit by a flickering candle.

🔗 dev.to/eliandev/turn-off-the-light...

Would love feedback, especially on the geometric tablecloth — it's five bands of repeating-conic-gradients and it fought me the whole way. Good luck everyone! 🇸🇻

Talha Ramzan • Jul 31

Comfort food + CSS art is such a fun prompt combo. Already thinking about attempting a steaming plate of biryani in pure CSS, the rice grain texture alone sounds like a fun rabbit hole (probably way too many box-shadow layers, but that's half the appeal of these challenges).

Good to see JS being allowed in CSS Art now too, even if just "a sprinkle", makes stuff like steam animation or a subtle simmer effect possible without turning it into a full JS project.