Thế giới 1 / Khu nhập môn
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.
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.
Quest miễn phí
0 / 12 bài học
Trạng thái
Thế giới
Thời lượng
Bản đồ
Bài học
Đăng nhập để lưu tiến độ và XP.
World goal: Build screen route ổn định trên mobile sizes.
Skill collected: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
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: Tokens, buttons и badges. Clear các mission trong zone này để đẩy path tiến lên.
Mission 1
Mission 1: Design tokens: цвета и отступы. Đọc briefing, solve practice quest và bank XP.
Mission 1: Design tokens: цвета и отступы. Đọc briefing, solve practice quest và bank XP.
Mission 2: Button variants: primary и secondary. Đọc briefing, solve practice quest và bank XP.
Mission 3: Badge component: FREE, PRO, NEW. Đọc briefing, solve practice quest và bank XP.
/course-assets/lessons/ui-components/stat-card.svg
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: Карточки и progress. Clear các mission trong zone này để đẩy path tiến lên.
Mission 4: StatCard: card метрики. Đọc briefing, solve practice quest và bank XP.
Mission 5: ProgressBar: progress курса. Đọc briefing, solve practice quest và bank XP.
Mission 6: CourseCard UI: card курса. Đọc briefing, solve practice quest và bank XP.
/course-assets/lessons/ui-components/empty-state-component.svg
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: Состояния интерфейса. Clear các mission trong zone này để đẩy path tiến lên.
Mission 7: EmptyState: empty state. Đọc briefing, solve practice quest và bank XP.
Mission 8: Loading и Error states. Đọc briefing, solve practice quest và bank XP.
Mission 9: Skeleton card. Đọc briefing, solve practice quest và bank XP.
Mission 10: NoticeCard: info/warning/error. Đọc briefing, solve practice quest và bank XP.
Boss Level
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: Композиция и финальный UI Kit. Đây là nơi world biến thành portfolio proof. Final boss project.
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.
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.
