Hassan

Posted on Aug 12

DASTAN The Taste of Home Every culture has a taste of home.

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge Perfect Landing Submission 🍲🥧

DASTAN — The Taste of Home 🍲

This is my submission for the Frontend Challenge – Comfort Food Edition, Perfect Landing.

What I Built

For this challenge, I wanted to create something that felt more like a story than a typical food website.

That idea became DASTAN — The Taste of Home.

“Dastan” means a story, and the concept behind the project is simple: food is rarely just food. A dish can remind us of a person, a place, a family gathering, or a moment we haven't thought about in years.

DASTAN is a visual, editorial-style landing page that explores comfort food from different parts of the world through photography, cultural stories, ingredients, and the people behind the memories.

The goal was to make the experience feel warm, premium, and personal from the moment someone opens the page.

The Idea

The line that shaped the whole design was:

Every culture has a taste of home.

I wanted the website to communicate that feeling without relying on a traditional recipe-blog layout.

Instead, I treated each dish almost like a magazine story.

You can discover dishes from different regions, read the story behind them, and explore how food connects people across cultures.

The Design

I went for an editorial-inspired visual direction rather than a conventional modern dashboard.

The design uses:

Warm cream backgrounds
Deep charcoal sections
Muted gold accents
Large serif typography
Editorial-style food photography
Rounded cards
Generous spacing
Strong visual hierarchy
Story-focused content
Subtle borders and details

I wanted the interface to feel like opening a beautifully designed food magazine.

At the same time, I made sure the experience remains comfortable to use on smaller screens.

What You'll Find

🌍 Global Comfort Food

DASTAN brings together dishes and stories from different parts of the world.

Examples include:

Tonkotsu Ramen — Japan
Hyderabadi Dum Biryani — India
Kimchi Jjigae — Korea
Lasagna alla Bolognese — Italy
Lahori Chicken Karahi — Pakistan

Each one is presented as more than a dish. It has a place, a story, and a cultural connection.

📖 The Human Story

One of my favorite parts of the project is the storytelling.

Instead of only showing ingredients and cooking times, the experience introduces a small human story around the food.

For example, a dish can be connected to a grandmother, a family table, a winter evening, or a Sunday meal.

That helped me keep the project connected to the comfort-food theme instead of making it feel like another recipe website.

🍜 Cultural Stories

The individual food pages go deeper into the origins and traditions behind each dish.

The goal isn't simply to say what the food is, but to give visitors a reason to care about it.

🧂 Global Kitchen Milestones

I also created a section focused on cooking techniques and ingredients.

Things like toasting spices, blooming aromatics, slow cooking, and building layers of flavor become part of the story.

Responsive Design

I designed DASTAN with a mobile-first mindset.

The screenshots above show the experience on a mobile device, where the content remains readable and the cards, typography, images, buttons, and navigation adapt to the available space.

I paid particular attention to:

Mobile spacing
Typography scaling
Image proportions
Touch-friendly buttons
Long-form content
Card layouts
Navigation
Avoiding horizontal overflow

The experience should feel intentional on a phone rather than simply being a desktop website squeezed into a smaller screen.

The Journey

One of the biggest challenges was balancing visual design with readability.

It is easy to make a food website look attractive when you have large images and beautiful typography. The harder part is making sure the design still works when there is a lot of content.

I spent a lot of time thinking about hierarchy:

What should the visitor see first?

Where should their eyes go next?

How much text is enough?

How can a food image tell part of the story without overwhelming the page?

That process pushed me to think less like someone simply building a webpage and more like someone designing an editorial experience.

What I Learned

This project taught me that a strong landing page isn't only about adding more features.

Sometimes the strongest designs come from having a clear idea and building everything around it.

I also learned more about:

Creating visual hierarchy
Editorial-style layouts
Responsive design
Typography pairing
Designing around photography
Storytelling through UI
Mobile-first layouts
Creating consistency across multiple sections

Most importantly, I learned that the small details matter.

Spacing, typography, borders, image cropping, button placement, and even the amount of text on a screen can completely change how a website feels.

Why I Chose Food

I chose comfort food because almost everyone has a food that feels like home.

It might be something cooked by a parent.

Something a grandmother used to make.

A meal shared with friends.

Or even a simple dish eaten during a difficult day.

Those experiences are different for everyone, but the feeling is surprisingly universal.

That's what I wanted DASTAN to capture.

What's Next

This challenge started as a landing-page concept, but I can see DASTAN becoming something much bigger.

Some ideas I'd like to explore next include:

Community-submitted food stories
Personal family recipes
Interactive world exploration
More countries and regional dishes
Food-story profiles
Save and bookmark functionality
Search and discovery
More immersive storytelling
Audio stories from contributors

For now, I'm happy with DASTAN as a visual exploration of the idea that food can carry memories across generations and borders.

Final Thoughts

Building DASTAN reminded me why I enjoy frontend development.

A website doesn't always have to solve a complicated technical problem.

Sometimes it can simply make someone stop scrolling for a moment and feel something.

For me, that feeling is home.