This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
When DEV said comfort food, I didn't think of restaurant platters or Sunday lunch.
I thought of home. College. Friends walking through the city with no plan except to find something to eat. I thought of the aroma that hits you when you pass a thela — that small street cart — and your feet turn toward it before your brain catches up. 😮💨
That smell. That steam. That queue. That's where this project starts.
Chai — the anytime drink 🍵
Back here in India, chai is not a morning-only drink. It never was.
Wake up early? Chai.
Study? Chai.
Work? Chai.
Friends hanging out? Chai.
Just woke up from a nap? First thing — chai. 😴➡️🍵
Cutting, full, adrak wali, elaichi — the variations change, but the feeling doesn't. One hot sip and you feel totally alive and awake. That's not marketing copy. That's memory. ✨
Back home, it's tradition. When a guest visits — any programme, any festival, any gathering — the first thing offered is chai. It sounds odd to outsiders. Here it's normal. It's just how things work.
I come from a town built around agriculture and education. Chai isn't one crowd's drink. Workers, teachers, officers, employees — everyone has their spot. There's a chai thela wala near us who keeps a separate monthly account for each regular. They settle up at month-end. It sounds extreme until you live it — and it isn't addiction. 😅 Chai is the fastest, easiest drink with a little belly-filling warmth. People pair it with biscuits or toast. Folks in agriculture often eat salted rotis with chai. My father leaves early for work — chai then too. I used to have mine with biscuits and toast. Same ritual, different schedules.
With friends — the real comfort menu 🌙
When we gathered for a walk or to kill free time, we didn't just walk. We ate our way through the city. Sometimes the whole evening was one food stop after another.
Pani puri was — and still is — my absolute go-to. Tangy, semi-spicy, that one-bite explosion where teekha pani, potato, and crunch land together. You can't eat it slow. You shouldn't. Six puris, six little decisions, zero regrets. 💥
And here's the tradition where I'm from: a true pani puri lover always asks for two suki papdi after the last puri. If you don't — well, don't call yourself a lover. It's the finishing move here — crunchy and dry after all that pani. Non-negotiable. 🫡
Vada pav is a whole culture. There are tons of famous shops for one dish. Same ingredients everywhere — pav, batata vada, chutneys — and yet every shop tastes different. We picked the stall based on mood. Feeling classic? One place. Feeling spicy? Another. Feeling nostalgic? The one from college days.
A couple recently opened a shop nearby with 35+ variations — genuinely fantastic, mind-blowing. That place changed the game, but mood-based shop picking never stopped. 🤯
I still prefer Mumbai style: green chutney, onion, vada, dry chutney, tamarind chutney. Simple layers — wholesome ingredients, nothing fancy, just done right.
And honestly? One vada pav is enough for an average appetite. Fast, filling, done. That's the beauty of it. 🙌
Banana chips are the road home. 🛣️🍌
I belong to Jalgaon, Maharashtra — Banana City. It sits in the heart of India's banana belt: the prime hub of banana production in the country. Drive those highways and you don't only see plantations. Every few kilometres there are small shops frying banana chips live — paper-thin nendran coins, still hot from the oil, tossed with black salt and red chilli powder.
You stop. You take a paper cone. You pinch a coin with every sip of chai. Fresh. Loud. Crisp. That smell of hot oil and spice is as much home as the thela itself — and it's the plate on this counter. 🔥
Our breakfast-with-friends wasn't always idli or dosa. Sometimes it was poha — and never plain:
- Rasa poha
- Misal poha
- Tari poha
- A squeeze of lemon on top
- A pinch of black salt
Wah. Even writing this makes my mouth water. 🤤
These were my go-to comfort foods with friends in college and the years we were still learning who we were. Even today, when we gather, we don't miss the chance. Same hunger. Same lanes. Same laughter. Different year. 🫶
At home — mother's kitchen 🏠
At home, my mother often made idli, dosa, sambar, and poha.
Poha became the comfort dish when I was hungry between lunch and dinner — that in-between hunger when you don't want a full meal but need warmth. Amma would make it quickly, and somehow it always tasted like she knew exactly how hungry you were. 💛
Idli and dosa weren't snacks for me — I often replaced a full meal with them. Nutrient-rich, satisfying, served with sambar, coconut chutney, potato sabji spread inside, and a thin layer of dry chutney on top. Still the best combination for me.
The dosa I love most? Paper-thin and super crisp — the kind that crackles when you bite — with cheese melted inside and coconut chutney on the side. (The counter art is paneer dosa — same love, different stuffing — but the feeling is identical.) 🧀
Why I built Nukkad Chat Corner ✨
All of this lives at a thela — not a fancy restaurant, not a food court. Steel counter. String lights. Queue on the wall. Someone calling out order numbers. The smell of chai and fried batter before you even see the menu. 🏮
That's the world I wanted to rebuild in CSS.
Nukkad Chat Corner is the name of the website — a single-page night thela of eight dishes from my real life, sculpted in pure CSS. No food photographs. No menu prices. No frameworks. Just gradients, @keyframes, @property, :has() rituals, steam, and a little JavaScript where CSS alone couldn't finish the story.
Each plate carries a ritual line (how we actually eat it). Click opens a comfort-plate theater — enlarged CSS sculpture first, then story, craft tags, and optional nutrition tucked below.
| Plate | Ritual / meaning |
|---|---|
| 🍵 Masala Chai | Cutting · two dunks — the anytime drink |
| 💧 Pani Puri | Always two suki papdi — friends and teekha pani |
| 🥪 Vada Pav | Shop by mood — one is enough |
| 🥥 Idli Platter | Break, dip, then chutney — Amma's quiet comfort |
| 🥞 Paneer Dosa | Tear while it crackles |
| 🍋 Indori Poha | Lemon first, sev last |
| 🌶️ Misal Pav | Farsan just before the bite |
| 🍌 Jalgaon Banana Chips | A coin with every sip of chai |
Open index.html. A short welcome curtain greets you — "Arre bhai, cutting chai garam hai…" — then the hero chai, comfort story, and eight CSS plates. 👋
A note for my hometown friends 💛
This one's for every walk we took, every pani puri stand we debated, every vada pav shop we chose by mood, every highway stop for hot banana chips, and every poha breakfast that tasted better because we were together.
Shoutout to my town friend — @rajat_savdekar — you know exactly which thela I mean.
Demo
🔗 Live demo: Nukkad Chat Corner
Try this flow:
- Open the live site — skip or watch the CSS welcome curtain 👋
- Smell the night thela — sit with the hero chai (pure CSS, full-bleed) 🍵
- Hover the food directly — biscuit dunk, pani fill-tilt-pop, vada bun press 👆
- Click any plate for the enlarged CSS sculpture + comfort story 🍽️
- Scroll the plates — night counter, native smooth scroll, no layout jumps ✨
Journey
Why a thela, not a gallery? 🏮
Most CSS art sits on a white page like a museum piece. Comfort food in India doesn't live in museums. It lives at a thela — steel surface, string lights, queue on the wall, chai steam in the air.
I didn't want a menu website. I wanted you to feel like you're walking past a shop at night and stopping because the smell won. 😮💨
The micro welcome curtain came first — kulhad steam, "Arre bhai, cutting chai garam hai…" — then a brand-forward hero chai and a plates theater with signature food rituals, not ₹ price tags.
CSS is the star ⭐
Every dish is built from scratch:
-
repeating-linear-gradient— pav crust, kulhad ridges, wood grain, banana leaf ribs -
radial-gradient/conic-gradient— tea meniscus, puri shells, idli pores, dosa griddle burns -
@keyframes— steam convection, string-light flicker, heat shimmer, lamp pool pulse -
transform-style: preserve-3d— pani puri isometric clusters, idli platters, dosa cones -
:has()food hovers — hover the chai cup, not the card, and the steam responds
Cards stay static so scrolling stays smooth. The food inside moves. Early versions lifted whole cards and the page fought itself — the final build keeps cards still and lets the food breathe. 😌
Light JavaScript, on purpose ⚡
Indori Poha is a CSS flake mound — box-shadow rice, radial turmeric, a CSS spoon. Everything on the counter is CSS.
Near-zero JS: one tiny app.js only wires reduced-motion and keyboard Escape/Enter for the plate radios. Welcome, back-to-top, lights, scroll, and the plate overlay are CSS/HTML. No framework. No animation loop. JavaScript supports the story; CSS tells it.
Lighting and atmosphere 🌙
Warm string bulbs. Amber corner pools. Neon spill. Chai steam catching lamplight. The kind of night you know from a galli when you're waiting for your order with friends. 🫶
prefers-reduced-motion is respected throughout — welcome curtain hides, smooth scroll turns off, rituals settle.
What I'm proud of 💛
- The chai glass — because chai isn't just a beverage here, it's a lifestyle 🍵
- Pani puri as a 7-puri cluster — the dish I was most excited to render in CSS 💥
- Jalgaon banana chips — the highway shops of home, fried live, black salt and chilli 🍌
- Modal dish tickets — history, how to eat, healthier style, nutrition per serving
- A counter that scrolls smooth and feels like the shops we grew up around
- Tell me which dish feels most like your thela — I'd love to hear it.
Code
Khushalsarode
/
css-art-food-challenge
dev.to CSS Food Art Challenege
Nukkad Chat Corner
The comfort food I grew up eating — sculpted in pure CSS.
A single-page night-tapri experience for the DEV Frontend Challenge: Comfort Food Edition CSS Art prompt. Eight Indian street and household dishes, zero food photographs, zero frameworks, zero build step.
Arre bhai, cutting chai garam hai!
Live demo
https://css-art-food-challenge.khushalsarode-in.workers.dev/
Repository
https://github.com/Khushalsarode/css-art-food-challenge.git
License
MIT
Docs index
docs/README.md
Table of contents
About
Nukkad Chat Corner rebuilds an Indian night tapri as CSS art: steel counter energy, string lights, chai steam, and eight plates drawn with gradients, transforms, and keyframes — not photographs.
It is
It is not
A static HTML/CSS/JS art page
A restaurant ordering SaaS
A DEV CSS Art challenge submission
A framework demo or SPA
Memory theater with ritual lines
A priced menu
License: MIT
Top comments (0)