Ilish Polao: Bringing My Ultimate Comfort Food to Life with Pure CSS

Mahbuba Sultana — Tue, 04 Aug 2026 15:31:04 +0000

This is my official entry for the Frontend Challenge - Comfort Food Edition under the CSS Art category.

Inspiration 🍚🐟
When thinking about "comfort food," I didn’t want to pick a generic burger or pizza. I wanted to build something tied directly to home and my culture: Ilish Polao (Hilsha fish cooked with fragrant rice).

Hilsha is the national fish of Bangladesh, and Ilish Polao—paired with a side of spicy-sweet tomato chutney—is the ultimate comfort meal in our house. Translating a dish loaded with personal memory into raw CSS felt like the perfect way to combine culture with code.

Demo

mahbubasultanaety.github.io

GitHub Repository:

MahbubaSultanaEty / hilsha-polao

How I Built It
Instead of relying on SVGs or background images, every visual element in this piece is built from scratch with HTML elements and pure CSS styling.

Here is a quick breakdown of what went into the scene:

Fish-Shaped Platter:
Built using layered border-radius curves and subtle box-shadows to mimic ceramic depth.
The Polao Mound:
Formed using rounded CSS containers with layered gradient textures.
Scattered Rice Grains:
Instead of hardcoding dozens of
tags in HTML, I used a tiny JS script to generate and randomly position rice grains over the mound so the texture feels natural rather than grid-like.
The Hilsha Piece:
Crafted with CSS clip-paths and custom border geometries to get the signature cut and inner texture right.
Animated Steam:
CSS keyframe animations controlling opacity and vertical translate transforms to give the food a hot, fresh feel.
Garnishes & Sides:
Added cinnamon sticks, bay leaves, green chilies, and a small side bowl of tomato chutney to complete the plate.

The Sprinkle of Javascript: Rice Generation
Hardcoding hundreds of rice grains in static HTML felt redundant. So I used the minimal for loop JS approach to scatter them:

This tiny bit of scripting saved me time and made the plate look organic every single render.

Takeaways
Building CSS art always forces you to think differently about web layout tools. border-radius, clip-path, and CSS animations aren't just for UI cards and buttons—they're fully capable illustration tools when pushed a bit.

Would love to hear what you think of the dish in the comments! What's your go-to comfort food you'd try rendering in CSS?

The Little Flower That Brought Me Back to Coding

Mahbuba Sultana — Sun, 02 Aug 2026 10:50:44 +0000

How "Shiuli" became my favorite flower

*The Small Idea That Started My Coding Journey*

I never thought a small design idea would be the reason I fell in love with code.

Before this moment, I had already tried stepping into programming. A relative introduced me to it, and like many beginners, I started watching free HTML and CSS tutorials on YouTube.

But honestly? Nothing clicked.

I could understand the syntax, but I couldn't connect it with anything real. Without practical implementation or a clear learning path, coding felt like blind memorization.

Slowly, I started believing that maybe coding just wasn't for me.

📸 The Spark of Curiosity

Fast forward to September 2025.

I’ve always loved photography. For me, capturing moments isn't just about taking pictures—it’s about observing small details, noticing things others might overlook, and finding the story behind them.

While looking through one of my photos of Shiuli flowers, a creative idea popped into my head:

What if I replaced the middle "O" in the word *"October"** with a single Shiuli flower?*

It was a simple concept, but I wanted to bring my imagination to life.

I asked ChatGPT how to edit it, but it couldn't quite capture my exact vision. When I asked how I could build it myself, it introduced me to image editing concepts and—more importantly—the power of code.

That was the moment everything changed. For the first time, I wasn't just consuming content—I was genuinely curious about how to build something.

I asked a simple question:

"Is there a way for someone with a completely non-technical background to learn coding through real implementation, quizzes, and hands-on tasks?"

The answer was a resounding yes.

💡 Realizing What Coding Really Is

I quickly discovered that programming isn't about memorizing rigid syntax. It’s about:

🎨 Creating things from scratch
🧪 Experimenting with new ideas
🧩 Solving problems step-by-step
✨ Turning imagination into reality

That small spark of curiosity led me to pick my first structured learning platform and take my real first step into web development.

A simple Shiuli flower became more than just a favorite flower—it became a symbol of my curiosity, creativity, and the start of my developer journey. 🌼

🛠️ Turning the Idea Into Reality

Fast forward to August 2026: I built it!

I recently recreated that exact concept using HTML and CSS. I built a responsive webpage where the Shiuli flower replaces the middle "O" in October—exactly as I imagined it back then.

You can check out the project here:

🌼 Live Demo: mahbubasultanaety.github.io/shiuly-story
💻 Source Code: GitHub Repository

If you've ever felt stuck or wondered if coding is right for you, sometimes all it takes is one small personal project to make it all click. What was the spark that got you into coding? Let me know in the comments!