//LEARN_PATH / TRACK

# Your learning path

Tick stages off as you finish them. Move at your own pace — the order matters more than the speed. Your progress is saved automatically in this browser.

GREENLIGHT
01–04

## Foundations

Pick your tools

1. 01

   #### Learn the web first

   PRE

   Counter-intuitive but true: don’t start with our docs. They assume web-dev fundamentals. Spend a few days on HTML & CSS basics first — everything after gets easier.

   External → Kevin Powell (free) ⏱ 2–4 days
2. 02

   #### Pick your block flavor

   CHOICE

   Decide between GreenShift Blocks (predefined, ready-made designs) and GreenLight Elements (raw HTML-tag equivalents, maximum control). Different philosophies — pick the one that fits how you build.

   Read → GreenLight vs Greenshift ⏱ ~30 min
3. 03

   #### Choose a theme route

   CHOICE

   Classic theme or Block (FSE) theme? Each unlocks different workflows. Watch the overview, then commit — mixing routes mid-project costs you time.

   Watch → Classic vs FSE ⏱ 20 min
4. 04

   #### Pick a build workflow

   CHOICE

   Classes, frameworks, no framework, variables — sites can be built many ways. Skim the basic workflows video so you know what tradeoffs you’re signing up for.

   Watch → Basic workflows ⏱ 15 min

05–07

## Build basics

Ship your first site

1. 05

   #### Master the Stylebook

   CORE

   The Stylebook is where every global style lives. You can ship a site without it — but in 99% of cases you shouldn’t. Learn it once and stop fighting cascade.

   Doc → Stylebook & globals ⏱ 45 min
2. 06

   #### Layout blocks

   CORE

   Every page is built on layout blocks. Consistent section widths and spacing come from here — get this right and the rest of the site stays clean.

   Doc → Layout blocks ⏱ 40 min
3. 07

   #### Design panels & productivity

   CORE

   The most-used design panels plus the productivity tips video. This is the muscle-memory layer — the keyboard shortcuts and quick-copy patterns that compound every day.

   Doc + Watch → Productivity ⏱ 1 hr

08–09

## Going further

Make it shine

1. 08

   #### Motion, panels & interactions

   EXTRA

   Sliding panels, popups, animations and the Interaction Layer system. The toolkit that takes a site from finished to memorable.

   Watch + Doc → Interactions ⏱ Self-paced
2. 09

   #### Dynamic data & AI

   EXTRA

   No real site lives without dynamic data — Query Builder, dynamic fields, dynamic placeholders. Then plug in the AI helper for design and block generation.

   Doc → Query + Dynamic + AI ⏱ Self-paced