Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.
Putting it together
We keep every demo in a small repository with one folder per post. Each folder has the HTML, the CSS and a short note on what we tried and dropped. Months later, when a reader asks why a tutorial does something a certain way, the note usually has the answer and saves us a long investigation.
What games already solved
Palettes for isometric work start from one hue. Pick it, then shift only the lightness for the three faces, and cool the shadow slightly towards blue. Adding a second hue for accents is fine, but keep it to small elements such as windows or buttons, or the scene starts to look like a patchwork.
Soren Dahl
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Ivo Petrov
Fixed now, thanks for spotting it.
Dana Ortiz
I teach an intro CSS class and I am going to use this as the final project.
Gus Lindgren
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Inês DuarteAuthor
Same here. Adding will-change on the wrapper fixed it for me.
Nina Ahlberg
Short and useful. More quick tips like this, please.
Bea Kowalski
This finally made the order of rotations click for me. I had them the wrong way round for weeks.