World 1 / Rookie Zone
Build a small React Native UI kit: design tokens, buttons, badges, stat cards, progress bars, course cards, empty states, loading/error states, skeletons, notices, segmented controls and a final UI Kit screen. Clear lessons to unlock next zone. Boss Project waits at the end.
The UI forest teaches readable screens, navigation, and reusable components that survive real layouts.
Guide: Layout Scout
Reward skill: UI pathfinding
Objective: Clear lessons, solve quests, bank XP, and open the next part of the map.
Free quest
0 / 12 lessons
Status
World
Time
Map
Lessons
Sign in to save progress and XP.
World goal: Build a screen route that stays stable on mobile sizes.
Skill collected: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
This module moves through a focused part of UI Components. Each lesson includes a practical task, validation rules and a hidden solution.
Zone 1: Tokens, buttons и badges. Clear the missions inside this zone to charge the path forward.
Mission 1
Mission 1: Design tokens: цвета и отступы. Read the briefing, solve the practice quest, and bank the XP.
Mission 1: Design tokens: цвета и отступы. Read the briefing, solve the practice quest, and bank the XP.
Mission 2: Button variants: primary и secondary. Read the briefing, solve the practice quest, and bank the XP.
Mission 3: Badge component: FREE, PRO, NEW. Read the briefing, solve the practice quest, and bank the XP.
/course-assets/lessons/ui-components/stat-card.svg
This module moves through a focused part of UI Components. Each lesson includes a practical task, validation rules and a hidden solution.
Zone 2: Карточки и progress. Clear the missions inside this zone to charge the path forward.
Mission 4: StatCard: card метрики. Read the briefing, solve the practice quest, and bank the XP.
Mission 5: ProgressBar: progress course. Read the briefing, solve the practice quest, and bank the XP.
Mission 6: CourseCard UI: card course. Read the briefing, solve the practice quest, and bank the XP.
/course-assets/lessons/ui-components/empty-state-component.svg
This module moves through a focused part of UI Components. Each lesson includes a practical task, validation rules and a hidden solution.
Zone 3: Состояния интерфейса. Clear the missions inside this zone to charge the path forward.
Mission 7: EmptyState: empty state. Read the briefing, solve the practice quest, and bank the XP.
Mission 8: Loading и Error states. Read the briefing, solve the practice quest, and bank the XP.
Mission 9: Skeleton card. Read the briefing, solve the practice quest, and bank the XP.
Mission 10: NoticeCard: info/warning/error. Read the briefing, solve the practice quest, and bank the XP.
Boss Level
This module moves through a focused part of UI Components. Each lesson includes a practical task, validation rules and a hidden solution.
Boss zone: Композиция и финальный UI Kit. This is where the world turns into a portfolio proof. Final boss project.
Boss mission: SegmentedControl: tabs-переключатель. Combine the zone patterns into one final result. Build a screen route that stays stable on mobile sizes.
Boss mission: Final project: UI Kit screen. Combine the zone patterns into one final result. Build a screen route that stays stable on mobile sizes.
