↩ Return

Stylo

May 1, 2024

JavaScript · HTML5 Canvas · Education

Stylo CSS learning interface

The challenge

Learning CSS is often frustrating for beginners because the feedback loop is slow. Text-based tutorials do not allow for experimentation, and sandboxes like CodePen can be overwhelming.

The solution

Stylo bridges the gap with a dual-mode editing experience. Users can start with visual sliders to understand properties, and watch the actual CSS code generate in real time. This builds mental models faster than code-only learning.

Stylo visual CSS controls synced to live code

Key features

  • Visual and code sync: adjust a slider, see the code update; edit the code, see the slider move.
  • Guided path: structured lessons from box model to flexbox and grid.
  • Live playground: experiment in the browser without a build step.
Stylo guided lessons and browser playground