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 (54)
Can't wait for someone to push CSS to the limit!
I still don't have the Idea on what to use as the main foodd i like almost every one from my country!!!!!!!!!!!
I knew that all that time learning how to cook would pay off
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.
🍜 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! 🚀✨
Let's gooooooooooooooo
Looking forward to this!
🍕 Nonna's Table 🔥
Hey folks! Just dropped my submission for the challenge — a wood-fired pizza place landing page, built around the idea that comfort food is really about the ritual around it, not just the food.
Would genuinely love a second pair of eyes on the scroll animations (GSAP + Motion) and whether the copy feels warm without being cheesy 🍕. Any feedback is welcome!
🔗 Submission
dev.to/hoseinmdev/nonnas-table-11ha
Good luck to everyone else who submitted, excited to go through the other entries 👀
had to copy the link and opened it on a new tab, you could maybe try to embed it using CTRL+K, humble opinion though lol :)
Haha thanks for the heads up! Totally forgot to format it properly. Appreciate the tip! 🙏
i wanna try this!!
🫓 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.
🔗 Turn Off the Lights: A CSS-Only Salvadoran Pupusa Table
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! 🇸🇻
link seems broken was eager to see your submission.
Already working thanks! 🙏
This sounds like a fun challenge! Will there be any specific expectations around responsive design for the food layouts
Really?
🍜 Tonkotsu ramen with CSS flavour
Hi everyone! 👋
I just published my CSS Art submission for the Frontend Challenge.
Caution : This Artifact is inedible.
🔗 Submission
dev.to/naman_dhakad/tonkotsu-ramen...
Some comments may only be visible to logged-in visitors. Sign in to view all comments.