About Cascadia

An internal CSS education platform built for non-technical teams.

What is Cascadia?

Cascadia transforms CSS-phobia into confidence through a dual-mode learning experience. It combines The Deck — a slide-based presentation for passive learning — with The Lab — an interactive coding environment for hands-on practice.

How it Works

The Deck

Markdown-driven slides with syntax-highlighted code examples. Navigate with arrow keys, go fullscreen for presentations, and toggle between Deck and Lab at any time.

The Lab

A real-time coding workspace with Monaco Editor, live preview via iframe, and sequential challenge validation. Complete each challenge to unlock the next.

Progress Tracking

Your code and progress auto-save to local storage. Resume exactly where you left off, even after closing the browser.

Gamification

Earn confetti celebrations and visual badges as you complete challenges. Progress bars show how far you've come in each module.

Curriculum

Day 1: The Cosmetics

Colors, typography, borders, and padding — making things look beautiful.

Day 2: The Structure

The Box Model, display types, and Flexbox basics — controlling layout.

Built With

Astro Vue 3 Tailwind CSS Monaco Editor Nano Stores Cloudflare Pages