Application UI Pro Track
Master the art of complex dashboards, data-heavy layouts, and functional forms.
Level 1: The Shell
Focus: Sidebar Layouts, Fixed Positioning, Responsive Navigation.
Exercise 1: Application Shell
CompletedCreate a standard dashboard layout with:
1. Sidebar (Fixed on desktop): Logo, Navigation Links (Dashboard, Team, Settings), and User Profile at bottom.
2. Mobile Header: Visible only on mobile, with a Menu button.
3. Main Content Area: The gray background area where content lives.
Tom Cook
View profile
Dashboard
Level 2: Data Input
Focus: Form Layouts, Input States, Login Screens.
Exercise 1: Settings Form
CompletedBuild a user profile settings form with:
1. Profile Photo uploader (circle with "Change" button).
2. Input fields (Name, Email, Bio).
3. Notification Toggles (Email, SMS).
4. "Save" and "Cancel" buttons actions.
JPG, GIF or PNG. 1MB max.
Exercise 2: Login Screen
CompletedCreate a clean, centered Login Card with:
1. Logo and "Sign in to your account" header.
2. Email and Password inputs with floating labels or clear labels.
3. "Forgot password?" link and "Sign In" button (full width).
Sign in to your account
Level 3: Data Display
Focus: Stats Cards, Complex Tables, Status Badges.
Exercise 1: Stats Grid
CompletedBuild a grid of 3 stats cards (e.g., Total Subscribers, Avg. Open Rate, Click Rate).
Include positive/negative trend indicators (e.g., ↑ 12% vs last month).
- Total Subscribers
- 71,897
- Avg. Open Rate
- 58.16%
- Avg. Click Rate
- 24.57%
Exercise 2: Data Table
CompletedCreate a responsive data table showing a list of Users.
Columns: Name, Title, Status (Active/Inactive badge), Role, and an "Edit" button.
Essential reuse of `divide-y` and `striped` rows.