This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
When I saw the title of the challenge, I immediately knew — it was time to make chicken pilaf. This is one of my favorite dishes that I can feed all my loved ones with.
I also decided to experiment with CSS in this project — writing styles in a way I don't usually do. For example, I didn't use class or data attributes selectors. I also forbade myself from using pixels — so that I could use only relative sizes.
The result is a simple website that will tell you how to cook this wonderful dish.
Demo
Sometimes the StackBlitz preview doesn't open, so you can view the site on GitHub Pages.
And here is a link to [the source code].(https://github.com/msabitov/chicken-pilaf-demo).
The project is licensed under the Apache License 2.0.
Journey
The first thing I did was imagine a world without JavaScript. It means, we don't have React, Vue, or Svelte — possibly we write websites in a notebook and render HTML in our heads. And when we want to share a website, we tear out a sheet of paper from a notebook, fold it into an airplane and launch it to the recipient ✈️.
But seriously, manually setting up styles without any CSS-in-JS, Tailwind or Material UI feels like true creativity. For me, it's like painting or making wood crafts — you have to work on every detail step by step, evaluate it from afar, and start a new iteration.
So, I freed myself from the JavaScript craving and reached Zen 🧘♂️. After that, I started searching for a suitable palette and fonts — this should create some emotional background. Then I began thinking about the site's structure-one that would be free of stock images and ads. I envisioned the site as a small game world that should feel alive-with a little interactivity, interesting text, and a clear goal.
The only JavaScript code I inlined into the HTML is related to checking all the checkboxes. This is more of a UX issue – I'd be too lazy to click through all the recipe steps, so I decided to give the user a shortcut — perhaps you're a professional chef who knows the recipe perfectly.
As a result I made 4 sections:
- Intro
- Ingredients
- Recipe
- Dish
The ingredients section took me the longest — I decided to write full-fledged CSS components, and in the end I essentially got one hero component, to which parameters are passed via CSS variables and from these parameters come different ingredients. I find this experience most valuable — it shows how to use familiar patterns in an unfamiliar environment without props, state, or lifecycle hooks. I wish attr() function for custom attributes would finally be supported in all browsers—then CSS components would be revealed from a new side.
When this happens, I will rewrite the site to make sure once again that CSS is more powerful than many think.
P.S. When creating the site, I decided to hide all sorts of references within it — to people, games, and more. I wonder how many you can find?😏
Top comments (0)