Chicken Momos — “Little Clouds of Comfort”

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

Inspiration

For this challenge, I wanted to turn a simple comfort food into something more than a static illustration. My goal was to create a cozy, warm, and visually engaging scene while pushing myself to explore what I could create using HTML and CSS alone. ✨

Instead of using external images or illustrations, I wanted to build the artwork from scratch and use CSS for the shapes, colors, shadows, details, and animations.

I also wanted the final scene to have a little movement, so it wouldn't feel like a completely static picture. Small CSS animations helped give the artwork more personality and make the scene feel alive.

🔗 Live Project:
https://codepen.io/editor/Sobia-Khalid/pen/019ff68f-9cae-73a4-8532-a0a9159f62ef

The complete artwork was created using HTML and CSS only. No JavaScript, external images, or SVG illustrations were used.

Journey

I started by breaking the artwork into smaller elements and creating each part using HTML elements. I then used CSS to shape, position, layer, and style everything into one complete scene.

The most interesting part of the process was discovering how much can actually be created with simple HTML elements and CSS properties. I experimented with border-radius, gradients, shadows, transforms, positioning, layering, and keyframe animations to create depth and movement.

I also paid attention to the small details because I wanted the artwork to feel like an actual scene rather than just a collection of shapes.

Adding movement was one of my favorite parts. Instead of using JavaScript, I created the animations entirely with CSS keyframes, which allowed different elements to move subtly and make the overall artwork feel more alive. 🎨✨

There was definitely a lot of trial and error along the way 😭. Some things looked perfect in my head but completely different once I saw them in the browser. Adjusting sizes, positions, shadows, rotations, and animation timing helped me understand CSS much better.

Through this project, I practiced:

• Creating illustrations using HTML elements
• Building CSS shapes from scratch
• Using gradients, shadows, and borders for depth
• Working with positioning and layering
• Using transform and z-index
• Creating animations with CSS keyframes
• Making a detailed scene without JavaScript
• Improving responsive behavior with CSS

I'm especially proud that I was able to create the artwork using HTML + CSS only while still making it detailed, expressive, and animated.

This challenge showed me that frontend development doesn't always have to be about traditional layouts. CSS can be a creative tool too. 💻🎨

Next, I want to experiment with more complex CSS illustrations, interactive scenes, and animations while continuing to improve my frontend skills.

Thanks for checking out my submission! ❤️

Happy coding! ✨

Built With

• HTML
• CSS
• CSS shapes
• CSS gradients
• CSS animations
• CSS transforms
• CSS positioning & layering
• Responsive CSS
• No JavaScript
• No external images
• No SVG illustrations

License

This project is available under the MIT License.

Hashtags

FrontendChallenge #ComfortFoodEdition #CSSArt #CSS #HTML #Frontend #WebDevelopment #CSSAnimation #CodePen