🍲 Just built Cozy Hearth for the Comfort Food Challenge! Pure CSS Art ramen, hot cocoa & grilled cheese with live interactive controls — no libraries, no frameworks, just HTML + CSS + vanilla JS. Come cook with me! 🍜☕🥪

swatiicfai — Sun, 16 Aug 2026 11:54:05 +0000

Frontend Challenge Perfect Landing Submission 🍲🥧

swatiicfai

Aug 16

Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲

#devchallenge #frontendchallenge #webdev #javascript

2 min read

Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲

swatiicfai — Sun, 16 Aug 2026 11:52:12 +0000

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

What I Built

Cozy Hearth is a digital sanctuary dedicated to the foods that make us feel at home. It combines both challenge prompts (CSS Art and a Perfect Landing Page) into a highly polished, interactive experience.

🌟 Key Features:

Interactive CSS Art Canvas: Three beautiful, pure CSS graphics representing comfort classics—a steaming bowl of Ramen, a warm cup of Hot Cocoa, and a golden toasted Grilled Cheese Sandwich with tomato soup.
The Kitchen Playground: Users can customize their dishes in real-time! Toggle toppings (egg, nori, green onions, marshmallows), adjust steam speed, change mug colors, choose soup broths, or pull the grilled cheese to adjust elasticity.
Real-time CSS Variables Viewer: A built-in terminal block showing exactly how CSS Custom Properties (variables) update dynamically inside :root as you interact with the controls.
Interactive Cooking Tracker: Clicking "Cook This Dish" slides out a dynamic recipe drawer. It features an interactive checklist to tick off prep ingredients and a step-by-step progress cards to guide you through the cooking process.
Community Recipe Vault: A fully validated, local-storage-backed form allowing users to publish their own custom comfort recipes, which instantly render into the visual catalog.
Accessibility First: Designed with fluid layouts, semantic HTML5 structure, full keyboard navigability, and ARIA attributes.

Demo

🐙 GitHub Repository: https://github.com/swatiicfai/Cozy-Hearth
🌐 Live Demo: https://swatiicfai.github.io/Cozy-Hearth/

Journey

My goal was to prove that CSS Art doesn't have to be static. By tying pure CSS graphics to user-controlled JavaScript state, the food actually comes alive:

Ramen: Constructed using organic, multi-layered border-radius values (like 50% 50% 50% 50% / 60% 60% 40% 40% for egg-whites) and keyframes that wiggle noodles.
Hot Cocoa: Modeled bobbing marshmallows using independent @keyframes delays to simulate natural floating on dark cocoa liquid.
Grilled Cheese: Created stretchable cheese strings using CSS border parameters and scaling transforms controlled dynamically.

What I Learned & What I'm Proud Of

I'm incredibly proud of the Recipe Drawer and Step Tracker. By breaking down recipes into interactive steps, the landing page is not just beautiful to look at, but genuinely useful. Coding the real-time CSS variables viewer was also a fun challenge—it turns the playground into a mini educational sandbox demonstrating how CSS custom properties react dynamically to JavaScript events!

DEV Community: swatiicfai

🍲 Just built Cozy Hearth for the Comfort Food Challenge! Pure CSS Art ramen, hot cocoa & grilled cheese with live interactive controls — no libraries, no frameworks, just HTML + CSS + vanilla JS. Come cook with me! 🍜☕🥪

Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲

Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲

What I Built

🌟 Key Features:

Demo

Journey

What I Learned & What I'm Proud Of