World 4 / Khu nhập môn

UI Components

Xây một React Native UI kit nhỏ: design tokens, buttons, badges, stat cards, progress bars, course cards, empty states, loading/error states, skeletons, notices, segmented controls và final UI Kit screen. Hoàn thành bài học để mở zone tiếp theo. Boss Project đang chờ ở cuối thế giới.

Vào World 4
NP
World entranceUI ForestBiome: Forest

UI forest dạy readable screens, navigation và reusable components.

Guide: Layout Scout

Reward skill: UI pathfinding

Objective: Clear lessons, solve quests, bank XP và mở phần tiếp theo của map.

Route progress0%

UI Forest

Build screen route ổn định trên mobile sizes.

Route progress0%
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 Start

Next world

World 5: Forms và Validation

Trạng thái

Free

Thế giới

Thế giới 1

Thời lượng

10 giờ 25 phút

Bản đồ

4 zone / 12 bài học

Bài học

0 / 12 bài học

Đăng nhập để lưu tiến độ và XP.

Quest mapUI Forest0/12

Navigation Treant

01Current
NP

Quest

Mission 1

Mission 1: Design tokens: цвета и отступы. Đọc briefing, solve practice quest và bank XP.

+40 XP
02Locked

Quest

Mission 2

Mission 2: Button variants: primary и secondary. Đọc briefing, solve practice quest và bank XP.

+50 XP
03Locked

Challenge

Mission 3

Mission 3: Badge component: FREE, PRO, NEW. Đọc briefing, solve practice quest và bank XP.

+40 XP
04Locked

Quest

Mission 4

Mission 4: StatCard: card метрики. Đọc briefing, solve practice quest và bank XP.

+45 XP
05Locked

Quest

Mission 5

Mission 5: ProgressBar: progress курса. Đọc briefing, solve practice quest và bank XP.

+50 XP
06Locked

Reward

Mission 6

Mission 6: CourseCard UI: card курса. Đọc briefing, solve practice quest và bank XP.

+60 XP
07Locked

Quest

Mission 7

Mission 7: EmptyState: empty state. Đọc briefing, solve practice quest và bank XP.

+45 XP
08Locked

Quest

Mission 8

Mission 8: Loading и Error states. Đọc briefing, solve practice quest và bank XP.

+55 XP
09Locked

Challenge

Mission 9

Mission 9: Skeleton card. Đọc briefing, solve practice quest và bank XP.

+50 XP
10Locked

Quest

Mission 10

Mission 10: NoticeCard: info/warning/error. Đọc briefing, solve practice quest và bank XP.

+50 XP
11Locked

Boss

Boss mission

Boss mission: SegmentedControl: tabs-переключатель. Kết hợp các pattern của zone thành final result. Build screen route ổn định trên mobile sizes.

+60 XP
12Locked

Boss

Boss mission

Boss mission: Final project: UI Kit screen. Kết hợp các pattern của zone thành final result. Build screen route ổn định trên mobile sizes.

+90 XP

Mission 1

Mission 1: Design tokens: цвета и отступы. Đọc briefing, solve practice quest và bank XP.

Skill collectedUI pathfinding
Cửa hàng thưởng
Final objectiveUI Forest

Navigation Treant

World goal: Build screen route ổn định trên mobile sizes.

Skill collected: UI pathfinding

Level 1

Tokens, buttons и badges

Module này xây một phần practical tập trung của UI Components. Mỗi lesson có task, validation rules và hidden solution.

Zone 1

Zone 1: Tokens, buttons и badges. Clear các mission trong zone này để đẩy path tiến lên.

Level 1NEXT LEVEL+40 XP

Design tokens: цвета и отступы

Mission 1: Design tokens: цвета и отступы. Đọc briefing, solve practice quest và bank XP.

40 phút
Vào level
Level 2LOCKED+50 XP

Button variants: primary и secondary

Mission 2: Button variants: primary и secondary. Đọc briefing, solve practice quest và bank XP.

50 phútHoàn thành level trước
Level 3LOCKED+40 XP

Badge component: FREE, PRO, NEW

Mission 3: Badge component: FREE, PRO, NEW. Đọc briefing, solve practice quest và bank XP.

40 phútHoàn thành level trước
Level 2

Карточки и progress

Module này xây một phần practical tập trung của UI Components. Mỗi lesson có task, validation rules và hidden solution.

Zone 2

Zone 2: Карточки и progress. Clear các mission trong zone này để đẩy path tiến lên.

Level 1LOCKED+45 XP

StatCard: card метрики

Mission 4: StatCard: card метрики. Đọc briefing, solve practice quest và bank XP.

45 phútHoàn thành level trước
Level 2LOCKED+50 XP

ProgressBar: progress курса

Mission 5: ProgressBar: progress курса. Đọc briefing, solve practice quest và bank XP.

50 phútHoàn thành level trước
Level 3LOCKED+60 XP

CourseCard UI: card курса

Mission 6: CourseCard UI: card курса. Đọc briefing, solve practice quest và bank XP.

1 giờHoàn thành level trước
Level 3

Состояния интерфейса

Module này xây một phần practical tập trung của UI Components. Mỗi lesson có task, validation rules và hidden solution.

Zone 3

Zone 3: Состояния интерфейса. Clear các mission trong zone này để đẩy path tiến lên.

Level 1LOCKED+45 XP

EmptyState: empty state

Mission 7: EmptyState: empty state. Đọc briefing, solve practice quest và bank XP.

45 phútHoàn thành level trước
Level 2LOCKED+55 XP

Loading и Error states

Mission 8: Loading и Error states. Đọc briefing, solve practice quest và bank XP.

55 phútHoàn thành level trước
Level 3LOCKED+50 XP

Skeleton card

Mission 9: Skeleton card. Đọc briefing, solve practice quest và bank XP.

50 phútHoàn thành level trước
Level 4LOCKED+50 XP

NoticeCard: info/warning/error

Mission 10: NoticeCard: info/warning/error. Đọc briefing, solve practice quest và bank XP.

50 phútHoàn thành level trước
Boss LevelBoss Project

Композиция и финальный UI Kit

Module này xây một phần practical tập trung của UI Components. Mỗi lesson có task, validation rules và hidden solution.

Boss zone

Boss zone: Композиция и финальный UI Kit. Đây là nơi world biến thành portfolio proof. Final boss project.

Level 1Boss LevelLOCKED+60 XP

SegmentedControl: tabs-переключатель

Boss mission: SegmentedControl: tabs-переключатель. Kết hợp các pattern của zone thành final result. Build screen route ổn định trên mobile sizes.

1 giờFinal QuestHoàn thành level trước
Level 2Boss LevelLOCKED+90 XP

Final project: UI Kit screen

Boss mission: Final project: UI Kit screen. Kết hợp các pattern của zone thành final result. Build screen route ổn định trên mobile sizes.

1 giờ 20 phútFinal QuestHoàn thành level trước

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.

Open mini-gamesOpen Arena