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

Completed

Create 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.

MyDash

Dashboard

Level 2: Data Input

Focus: Form Layouts, Input States, Login Screens.

Exercise 1: Settings Form

Completed

Build 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

Completed

Create 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).

ID

Sign in to your account

Level 3: Data Display

Focus: Stats Cards, Complex Tables, Status Badges.

Exercise 1: Stats Grid

Completed

Build 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
12%
Avg. Open Rate
58.16%
2.1%
Avg. Click Rate
24.57%
3.2%

Exercise 2: Data Table

Completed

Create 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.

NameTitleStatusRoleEdit
Lindsay WaltonFront-end DeveloperActiveMemberEdit
Courtney HenryDesignerActiveAdminEdit
Tom CookDirector of ProductInactiveMemberEdit