DEV Community: Sobia khalid

Ice Cream Truck in the Park 🍦

Sobia khalid — Fri, 14 Aug 2026 16:27:31 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Ice Cream Truck in the Park 🍦🌅

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

For this challenge, I wanted to create something that captures the feeling of a warm summer evening and the simple happiness that comes with getting ice cream from a colorful little truck.

I decided to create an ice cream truck in a sunset park, surrounded by trees, rolling hills, a road, falling leaves, and a glowing evening sky.

I wanted the scene to feel playful, nostalgic, and peaceful — like those summer evenings when you hear an ice cream truck coming down the street and suddenly everyone becomes five years old again. 😭🍦

Instead of focusing only on the truck, I wanted to create a complete little environment around it. The sunset, clouds, trees, road, menu board, falling leaves, and small ice cream details all help make the illustration feel like a real scene rather than a single object.

Demo

🔗 Live Project:

The artwork was created using HTML, CSS, and SVG. I didn't use external images — the visual elements were created from scratch using code. The scene also includes CSS animations to bring different parts of the illustration to life.

Journey

I started by creating the overall environment and deciding how I wanted the different layers of the scene to work together.

I began with the sunset background, using gradients to create the transition between the darker purple sky and the warm orange glow near the horizon. I then added the sun and its soft glowing halo to create the golden-hour atmosphere.

After that, I built the background scenery with rolling hills, grass, and trees. I used SVG shapes for the trees and layered different shades of green to give the landscape more depth. I also added subtle tree-swaying animations so the background wouldn't feel completely static.

The ice cream truck was definitely the main part of the project. I built it piece by piece, including the colorful body, serving window, doors, windshield, wheels, headlights, bumpers, and rooftop ice cream cone.

One of my favorite details is the little ice cream cup inside the serving window. I created the cup, soft-serve layers, caramel drizzle, sprinkles, cherry, and highlights using SVG shapes and gradients. This was a fun challenge because I wanted the ice cream to have enough depth and detail to actually look like a dessert rather than just a few basic shapes. 🍨✨

I also wanted the truck itself to feel alive, so I added several small animations. The wheels have spinning spokes, the rooftop ice cream cone gently bounces, and the melting ice cream drips animate downward.

Then came the little details that really completed the scene: drifting clouds, falling leaves, swaying grass, the roadside “TODAY'S TREATS” sign, and a soft golden-hour overlay. These details may be small, but they helped give the illustration a much stronger atmosphere.
One of the biggest things I learned from this project was how important layering and positioning are when creating CSS art. Instead of thinking about the scene as one image, I had to think about it as many individual layers that needed to work together.

I also focused on responsiveness. The main scene uses a proportional 16 / 10 aspect ratio, percentage-based positioning, and responsive adjustments so that the environment stays together across different screen sizes.

I also added support for prefers-reduced-motion, so users who prefer less animation can experience the scene without the moving elements.

Through this project, I practiced:

Creating detailed illustrations with HTML and CSS
Using SVG to create custom shapes and artwork
Building scenes with multiple layers
Using gradients for lighting and depth
Creating shadows and visual depth
Working with absolute positioning and z-index
Creating animations with CSS keyframes
Using transforms for movement and rotation
Creating responsive CSS artwork
Adding reduced-motion support for accessibility

I'm especially proud of how all these small pieces came together to create an entire little world. What started as an idea for an ice cream truck turned into a complete sunset park scene with movement, atmosphere, and tiny details. 🍦🌅

This project reminded me that frontend development isn't limited to websites, cards, and buttons. HTML and CSS can also be a creative canvas for illustration and storytelling. 🎨💻

Next, I'd love to experiment with more detailed CSS artwork, interactive scenes, and animations that respond to user interaction.

Thanks for checking out my submission! ❤️

Happy coding and happy ice cream! 🍦✨

Built With

HTML
CSS
SVG
CSS gradients
CSS shapes
CSS animations
CSS transforms
CSS positioning & layering
Responsive CSS
prefers-reduced-motion
No external images
No JavaScript

License

This project is available under the MIT License.

Hashtags

frontendchallenge #devchallenge #css #codepen

Wishing everyone the best of luck with the challenge! 💗✨

Can't wait to see everyone's creative comfort-food artworks. May your ideas be creative, your animations be smooth, and your CSS actually behave on the first try 😭💻🍦

Happy coding, everyone! 🍀🎨

Cozy Comfort Bowl — Pure CSS HTML , AND JS Art 🍲✨

Sobia khalid — Fri, 14 Aug 2026 15:18:13 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

For this challenge, I wanted to create something that instantly gives the feeling of a warm, comforting meal after a long day. I decided to create a cozy bowl of soup/stew filled with colorful toppings and ingredients.

I wanted the artwork to feel warm and satisfying while also giving me the opportunity to experiment with different CSS shapes, colors, gradients, shadows, and layering.

The dark background helps make the warm brown tones of the soup and the colorful toppings stand out. I also added small details like the eggs, vegetables, mushrooms, green garnishes, and onion rings to make the bowl feel more detailed and visually interesting. 🍲

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

Demo

Journey

I started by creating the bowl and building it up layer by layer. I used multiple HTML elements and CSS properties to create the bowl's different sections, including the outer wooden texture, rim, inner bowl, and the soup itself.

After creating the base, I worked on the individual ingredients. Each topping was created from simple HTML elements and then transformed using CSS. I experimented with border-radius, gradients, shadows, transforms, positioning, and layering to make the ingredients look more three-dimensional.

One of the more interesting parts was creating the different food elements from basic shapes. The eggs, mushrooms, green vegetables, garnishes, and purple onion rings all started as simple shapes and were gradually styled to make them look more recognizable.

Getting the layering right was also important. I used positioning and z-index to make the ingredients appear as though they were actually sitting inside the bowl rather than simply floating on top of it.

The biggest lesson from this project was seeing how far CSS can go when you stop thinking of it only as a styling language and start treating it like an illustration tool. 🎨

There was definitely some trial and error along the way 😭. Adjusting the proportions, shadows, rotations, and positions took quite a few attempts before everything felt balanced.

Through this project, I practiced:

Creating food illustrations using HTML elements
Building CSS shapes from scratch
Using gradients for depth and lighting
Creating realistic-looking shadows
Working with positioning and z-index
Using transforms and rotations
Combining multiple simple shapes into detailed objects
Creating depth through layering
Designing a complete scene using HTML, CSS and JS
Improving responsive behavior with CSS

I'm especially proud that I was able to create a detailed food illustration without relying on images.

This challenge reminded me that CSS isn't just for making things pretty — it can be a creative medium on its own. 💻🎨

Next, I want to experiment with even more detailed CSS illustrations, stronger animations, and interactive food scenes.

Thanks for checking out my submission! ❤️

Happy coding and happy eating! 🍲✨

Built With

HTML
javascript
CSS
CSS shapes
CSS gradients
CSS shadows
CSS transforms
CSS positioning & layering
Responsive CSS
No external images
No SVG illustrations

License

This project is available under the MIT License.

Wishing everyone the best of luck with the challenge! 💗✨
Can't wait to see everyone's creative CSS comfort-food artworks. May your CSS behave on the first try 😭💻🍲

Chicken Momos — “Little Clouds of Comfort”

Sobia khalid — Wed, 12 Aug 2026 15:58:31 +0000

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:

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

SafeHaven: A Java Desktop App Designed for Autistic Children's Learning Journey

Sobia khalid — Sun, 05 Jul 2026 16:14:33 +0000

SafeHaven-AutismAid