दुनिया 1 / शुरुआती ज़ोन
React Native में छोटा UI kit बनाइए: design tokens, buttons, badges, stat cards, progress bars, course cards, empty states, loading/error states, skeletons, notices, segmented controls और final UI Kit screen। अगला zone खोलने के लिए lessons पूरे करें. Boss Project world के अंत में है।
UI forest readable screens, navigation और reusable components सिखाता है.
Guide: Layout Scout
Reward skill: UI pathfinding
Objective: Lessons clear करें, quests solve करें, XP bank करें और map का next part खोलें.
Free quest
0 / 12 lessons
स्थिति
दुनिया
समय
मैप
पाठ
Progress और XP save करने के लिए sign in करें।
World goal: Mobile sizes पर stable रहने वाला screen route बनाएं.
Skill collected: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 1: Tokens, buttons и badges. इस zone की missions clear करें और path आगे charge करें.
Mission 1
Mission 1: Design tokens: цвета и отступы. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 1: Design tokens: цвета и отступы. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 2: Button variants: primary и secondary. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 3: Badge component: FREE, PRO, NEW. Briefing पढ़ें, practice quest solve करें और XP bank करें.
/course-assets/lessons/ui-components/stat-card.svg
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 2: Карточки и progress. इस zone की missions clear करें और path आगे charge करें.
Mission 4: StatCard: card метрики. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 5: ProgressBar: progress курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 6: CourseCard UI: card курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
/course-assets/lessons/ui-components/empty-state-component.svg
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 3: Состояния интерфейса. इस zone की missions clear करें और path आगे charge करें.
Mission 7: EmptyState: empty state. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 8: Loading и Error states. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 9: Skeleton card. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Mission 10: NoticeCard: info/warning/error. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Boss Level
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Boss zone: Композиция и финальный UI Kit. यहां world portfolio proof में बदलता है. Final boss project.
Boss mission: SegmentedControl: tabs-переключатель. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
Boss mission: Final project: UI Kit screen. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
