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.
Foundations
Pick your tools-
01
Learn the web first
PRECounter-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.
-
02
Pick your block flavor
CHOICEDecide 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.
-
03
Choose a theme route
CHOICEClassic theme or Block (FSE) theme? Each unlocks different workflows. Watch the overview, then commit — mixing routes mid-project costs you time.
-
04
Pick a build workflow
CHOICEClasses, 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.
Build basics
Ship your first site-
05
Master the Stylebook
COREThe 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.
-
06
Layout blocks
COREEvery 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.
-
07
Design panels & productivity
COREThe 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.
Going further
Make it shine-
08
Motion, panels & interactions
EXTRASliding panels, popups, animations and the Interaction Layer system. The toolkit that takes a site from finished to memorable.
-
09
Dynamic data & AI
EXTRANo real site lives without dynamic data — Query Builder, dynamic fields, dynamic placeholders. Then plug in the AI helper for design and block generation.