This is a submission for Frontend Challenge – Comfort Food Edition, CSS Art.
Sadhya — Learn About It. Then Experience It. 🌿🍚
I created two connected websites to celebrate Kerala’s Onam Sadhya.
🌿 About Sadhya
Sadhya — A Feast Served on a Leaf | Kerala Onam
An interactive celebration of Kerala’s Onam Sadhya.
Learn about Sadhya, its dishes, traditions, and cultural significance.
🍛 Experience Sadhya
Interact with the Sadhya, add dishes to the banana leaf, eat them, and complete the feast with Payasam.
Recommended journey:
🌿 Learn about Sadhya → 🍛 Experience Sadhya
Inspiration
For this challenge, I wanted to celebrate a comfort food that means much more to me than just a meal — Kerala’s Onam Sadhya.
A Sadhya is traditionally served on a banana leaf and brings together many different flavors, textures, colors, and dishes in one beautiful composition.
Instead of creating one conventional food website, I decided to build two different experiences around the same idea.
The first website helps you understand Sadhya.
The second website lets you experience Sadhya.
The idea was simple:
First, learn what Sadhya is.
Then, experience it.
🌿 Website 1 — About Sadhya
The first website is an informative and visual introduction to Kerala’s Sadhya.
Sadhya is a traditional vegetarian feast from Kerala, especially associated with celebrations such as Onam.
It is traditionally served on a banana leaf and consists of a variety of dishes with different flavors, textures, colors, and preparations.
I wanted this website to introduce visitors to the story behind the meal rather than simply presenting a list of food items.
It explores things such as:
- 🌿 The banana leaf
- 🍚 Rice
- 🥥 Traditional vegetable preparations
- 🥗 Thoran and side dishes
- 🌶️ Pickles and accompaniments
- 🥣 Curries and gravies
- 🍌 Traditional additions
- 🍚 Payasam
- 🌼 The connection between Sadhya and Onam
- ❤️ The cultural feeling of sharing a meal
The design uses Kerala-inspired colors, patterns, natural greens, festive gold, flowers, and other subtle visual references to create an atmosphere around the content.
The main question this website tries to answer is:
“What is Sadhya?”
🍛 Website 2 — Experience Sadhya
After learning about Sadhya, the second website takes the idea one step further.
Instead of simply showing the food, I wanted to turn the Sadhya itself into the interface.
The banana leaf becomes the main canvas.
The dishes become interactive CSS illustrations.
And the visitor becomes the person sitting down for Sadhya.
The interaction follows the feeling of actually having the meal:
Choose your dishes → Add them to the leaf → Eat them → Save room for Payasam → Complete the Sadhya.
You start with an empty banana leaf.
You choose dishes from the catalogue and add them to your leaf.
The dishes don’t just become items in a list — they actually become part of your Sadhya.
You can then interact with the dishes and “eat” them one by one.
The experience tracks your progress as you go through the meal.
Eventually, Payasam becomes the final course. 🍚
Once the feast is complete, the interface transforms into an Onam greeting:
സദ്യ പൂർത്തിയായി
Happy Onam from Kerala. 🌼
The goal was to make the website feel less like a traditional food website and more like a small interactive story.
🎨 Why Two Websites?
I wanted to separate learning from experiencing.
The first website provides the context.
It explains what Sadhya is, introduces its dishes, and gives some cultural background.
The second website takes that knowledge and turns it into an interaction.
Instead of just reading about Sadhya, you get to build your own digital Sadhya and interact with it.
So the two websites create a small journey:
Learn → Explore → Build → Eat → Celebrate
🧑💻 The CSS Art Challenge
The biggest challenge was figuring out how to represent a complete Sadhya without relying on photographs or external food images.
So I decided to treat CSS as the illustration tool.
The banana leaf became the canvas.
Individual dishes became CSS compositions.
Patterns and decorations became part of the atmosphere.
Shadows and gradients created depth.
And JavaScript became the small layer that turned the artwork into an interactive experience.
I spent a lot of time experimenting with:
- CSS shapes
- Gradients
- Shadows
- Textures
- Borders
- Layering
- Positioning
- Pseudo-elements
- Animations
- Transitions
- Responsive layouts
The challenge was to make simple HTML elements and CSS properties feel like recognizable food and traditional objects.
🌼 Kerala & Onam Inspirations
I wanted the project to feel distinctly connected to Kerala and Onam without simply filling the interface with generic cultural decorations.
That led to subtle references throughout the websites:
🌿 Banana leaves — the traditional canvas for Sadhya
🌼 Pookalam-inspired elements — representing the floral atmosphere of Onam
🪔 Nilavilakku — a traditional Kerala lamp
💛 Kasavu-inspired gold — inspired by Kerala’s traditional festive clothing
🌴 Natural Kerala greens — inspired by Kerala’s landscape
🥥 Coconut-inspired colors and textures — reflecting Kerala’s food culture
🍚 Rice and traditional dishes — the heart of Sadhya
🌸 Flowers and festive decorations — connecting the experience to Onam
I tried to keep these elements subtle so that they support the experience rather than overpower it.
✨ My Favorite Part
One of my favorite parts of the project is the interaction between the dish catalogue and the banana leaf.
In a normal food website, selecting a dish might simply update a counter or add something to a cart.
Here, selecting a dish actually changes the Sadhya itself.
The dish appears on the banana leaf.
It becomes part of the meal.
And then the user can interact with it and eat it.
That small interaction is what makes the second website feel more like an experience than a normal UI.
🪔 From Empty Leaf to Completed Sadhya
The interactive experience follows a small story.
You start with an empty banana leaf.
You choose what you want to have.
The leaf gradually fills with food.
You eat the dishes one by one.
Your progress changes.
Then finally, you reach the last course:
Payasam. 🍚
Once everything is completed, the experience ends with:
സദ്യ പൂർത്തിയായി
Happy Onam from Kerala. 🌼
It is my small digital interpretation of the feeling of finishing a traditional Sadhya with family and friends.
💻 Code
Both websites were built from scratch using:
- HTML5
- CSS3
- Vanilla JavaScript
No frontend frameworks were used.
No external food images were used for the CSS artwork.
The visual elements were created using HTML and CSS.
CSS is used for:
- Banana leaf illustration
- Food illustrations
- Food textures
- Shadows and depth
- Kerala-inspired patterns
- Pookalam-inspired decorations
- Nilavilakku
- Decorative elements
- Animations and transitions
- Responsive layouts
JavaScript is used for:
- Dish selection
- Adding dishes to the leaf
- Tracking the Sadhya
- Eating dishes
- Progress management
- Unlocking Payasam
- Completing the feast
- Resetting the experience
🔗 Source Code
The complete source code for both websites is available on GitHub.
🌿 About Sadhya
സദ്യ SADHYA — A Feast Served on a Leaf
An interactive Onam Sadhya you sit down to, not a website you scroll.
You arrive to lamps and drifting petals. You press START SADHYA. A banana leaf — drawn entirely in CSS — is laid in front of you. You choose dishes from an editorial menu; each one flies to its traditional place on the leaf. When the rice arrives, the feast pauses to honour it.
One button sits in the middle of the stage and carries the whole ritual:
Phase Button Unlocks when The feast FINISH EATING rice (ചോറ്) and at least one curry are on the leaf Payasam FINISH THE FULL MEAL one of three payasams has been served Pookalam COMPLETE SADHYA all five flower rings are laidPayasam stays locked — 🔒 “Sweetness comes last.” — until you finish eating Finishing the full meal folds the leaf…
🍛 Experience Sadhya
SADHYA — A Feast Served on a Leaf
An interactive page about Onam Sadhya, the vegetarian feast served on a banana leaf in Kerala, India. Twenty-four dishes are laid out on a leaf you can explore filter, taste-map, and fill yourself.
Built for the DEV Community Frontend Challenge — Comfort Food Edition (Perfect Landing). HTML, CSS and vanilla JavaScript. No framework, no backend no runtime dependencies.
Why a sadhya
Most “comfort food” pages are about one dish. A sadhya is the opposite: twenty-odd small preparations arranged in a specific order around a mound of rice, eaten by hand, off a leaf that goes out with the compost afterwards. It is comfort food as a layout problem — which is exactly what makes it worth building in a browser.
The page tries to be a reference as much as an experience. Every dish carries its Malayalam name, a…
🛠️ Technologies
HTML + CSS + Vanilla JavaScript
No external frontend framework was required.
The main goal was to see how far I could push CSS as a visual and illustration tool, while keeping the experience interactive, responsive, and usable.
❤️ A Little Note
This project is my personal digital interpretation of Onam Sadhya.
Sadhya traditions, dishes, serving styles, and recipes can vary between families and regions, so this project isn’t intended to represent one universal version of Sadhya.
It is simply my attempt to take something deeply connected with celebration, togetherness, family, and home and turn it into a small interactive frontend experience.
I wanted to create something that doesn’t just show food.
I wanted it to tell a small story:
Learn about it.
Sit down for it.
Build your leaf.
Enjoy the meal.
Finish with Payasam.
Celebrate Onam. 🌼
A banana leaf became the canvas.
The food became the interface.
And the Sadhya became the experience.
Thank you for visiting and exploring both websites.
ഓണം ആശംസകൾ! 🌼
Happy Onam from Kerala. ❤️
답글 남기기