01Current
NPQuest
Mission 1
Mission 1: Design tokens: цвета и отступы. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+40 XP
World 4 / शुरुआती ज़ोन
UI Components
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 के अंत में है।
NP
World entranceUI ForestBiome: Forest
UI forest readable screens, navigation और reusable components सिखाता है.
Guide: Layout Scout
Reward skill: UI pathfinding
Objective: Lessons clear करें, quests solve करें, XP bank करें और map का next part खोलें.
Route progress0%
UI Forest
Mobile sizes पर stable रहने वाला screen route बनाएं.
Route progress0%
Free quest
0 / 12 lessons
दुनिया 1शुरुआती ज़ोनBoss Project
World route
What you will build
Create responsive screens and reusable components.
What you should know
World 3: Expo Start
Recommended previous world
World 3: Expo StartNext world
World 5: Forms और Validationस्थिति
मुफ्त
दुनिया
दुनिया 1
समय
10 घं 25 मिन
मैप
4 zones / 12 lessons
पाठ
0 / 12 lessons
Progress और XP save करने के लिए sign in करें।
Quest mapUI Forest0/12
Navigation Treant
02Locked
Quest
Mission 2
Mission 2: Button variants: primary и secondary. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+50 XP
03Locked
Challenge
Mission 3
Mission 3: Badge component: FREE, PRO, NEW. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+40 XP
04Locked
Quest
Mission 4
Mission 4: StatCard: card метрики. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+45 XP
05Locked
Quest
Mission 5
Mission 5: ProgressBar: progress курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+50 XP
06Locked
Reward
Mission 6
Mission 6: CourseCard UI: card курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+60 XP
07Locked
Quest
Mission 7
Mission 7: EmptyState: empty state. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+45 XP
08Locked
Quest
Mission 8
Mission 8: Loading и Error states. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+55 XP
09Locked
Challenge
Mission 9
Mission 9: Skeleton card. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+50 XP
10Locked
Quest
Mission 10
Mission 10: NoticeCard: info/warning/error. Briefing पढ़ें, practice quest solve करें और XP bank करें.
+50 XP
11Locked
Boss
Boss mission
Boss mission: SegmentedControl: tabs-переключатель. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
+60 XP
12Locked
Boss
Boss mission
Boss mission: Final project: UI Kit screen. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
+90 XP
Mission 1
Mission 1: Design tokens: цвета и отступы. Briefing पढ़ें, practice quest solve करें और XP bank करें.
Skill collectedUI pathfinding
Final objectiveUI Forest
Navigation Treant
World goal: Mobile sizes पर stable रहने वाला screen route बनाएं.
Skill collected: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
लेवल 1
Tokens, buttons и badges
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 1
Zone 1: Tokens, buttons и badges. इस zone की missions clear करें और path आगे charge करें.
लेवल 1NEXT LEVEL+40 XP
Design tokens: цвета и отступы
Mission 1: Design tokens: цвета и отступы. Briefing पढ़ें, practice quest solve करें और XP bank करें.
40 मिन
लेवल 2LOCKED+50 XP
Button variants: primary и secondary
Mission 2: Button variants: primary и secondary. Briefing पढ़ें, practice quest solve करें और XP bank करें.
50 मिनपहले पिछला लेवल पूरा करें
लेवल 3LOCKED+40 XP
Badge component: FREE, PRO, NEW
Mission 3: Badge component: FREE, PRO, NEW. Briefing पढ़ें, practice quest solve करें और XP bank करें.
40 मिनपहले पिछला लेवल पूरा करें
/course-assets/lessons/ui-components/stat-card.svg
लेवल 2
Карточки и progress
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 2
Zone 2: Карточки и progress. इस zone की missions clear करें और path आगे charge करें.
लेवल 1LOCKED+45 XP
StatCard: card метрики
Mission 4: StatCard: card метрики. Briefing पढ़ें, practice quest solve करें और XP bank करें.
45 मिनपहले पिछला लेवल पूरा करें
लेवल 2LOCKED+50 XP
ProgressBar: progress курса
Mission 5: ProgressBar: progress курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
50 मिनपहले पिछला लेवल पूरा करें
लेवल 3LOCKED+60 XP
CourseCard UI: card курса
Mission 6: CourseCard UI: card курса. Briefing पढ़ें, practice quest solve करें और XP bank करें.
1 घंपहले पिछला लेवल पूरा करें
/course-assets/lessons/ui-components/empty-state-component.svg
लेवल 3
Состояния интерфейса
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Zone 3
Zone 3: Состояния интерфейса. इस zone की missions clear करें और path आगे charge करें.
लेवल 1LOCKED+45 XP
EmptyState: empty state
Mission 7: EmptyState: empty state. Briefing पढ़ें, practice quest solve करें और XP bank करें.
45 मिनपहले पिछला लेवल पूरा करें
लेवल 2LOCKED+55 XP
Loading и Error states
Mission 8: Loading и Error states. Briefing पढ़ें, practice quest solve करें और XP bank करें.
55 मिनपहले पिछला लेवल पूरा करें
लेवल 3LOCKED+50 XP
Skeleton card
Mission 9: Skeleton card. Briefing पढ़ें, practice quest solve करें और XP bank करें.
50 मिनपहले पिछला लेवल पूरा करें
लेवल 4LOCKED+50 XP
NoticeCard: info/warning/error
Mission 10: NoticeCard: info/warning/error. Briefing पढ़ें, practice quest solve करें और XP bank करें.
50 मिनपहले पिछला लेवल पूरा करें
Boss Level
Boss LevelBoss Project
Композиция и финальный UI Kit
इस module में UI Components का focused practical part बनता है। हर lesson में task, validation rules और hidden solution है।
Boss zone
Boss zone: Композиция и финальный UI Kit. यहां world portfolio proof में बदलता है. Final boss project.
लेवल 1Boss LevelLOCKED+60 XP
SegmentedControl: tabs-переключатель
Boss mission: SegmentedControl: tabs-переключатель. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
1 घंFinal Questपहले पिछला लेवल पूरा करें
लेवल 2Boss LevelLOCKED+90 XP
Final project: UI Kit screen
Boss mission: Final project: UI Kit screen. Zone patterns को एक final result में combine करें. Mobile sizes पर stable रहने वाला screen route बनाएं.
1 घं 20 मिनFinal Questपहले पिछला लेवल पूरा करें
Have a question or found an issue?
Your message will include this course context.
XP PRACTICE
Reinforce what you learned
Play a short code game or test your speed in the Arena.