Build

There's no pass/fail here — just your interface next to a real one.

22 component-building exercises with a real HTML/CSS/JS editor next to a live preview — no pass/fail suite pretending a UI is right or wrong. Build it, check it against the requirements, then compare your approach with a real solution.

22 of 22

Easy

Pricing Card

CSS · Flexbox

Easy

Accordion / FAQ Toggle

JavaScript · DOM · Accessibility

Easy

Custom Toggle Switch

CSS · Forms

Medium

Tabbed Interface

JavaScript · DOM · Accessibility

Medium

Modal Dialog

JavaScript · DOM · Accessibility

Medium

Live Character Counter + Validation

JavaScript · Forms · DOM

Easy

Star Rating Widget

JavaScript · DOM

Easy

Animated Progress Bar

CSS · Animation

Easy

Stacked Avatar Group

CSS

Easy

Notification Badge

CSS

Easy

Button Loading State

JavaScript · CSS · Animation

Medium

Dropdown Menu

JavaScript · DOM

Medium

Custom Tooltip

CSS

Medium

Countdown Timer

JavaScript

Medium

Password Strength Meter

JavaScript · Forms

Hard

Image Carousel

JavaScript · DOM

Easy

Skeleton Loading Placeholder

CSS · Animation

Easy

Profile Card

CSS · Flexbox · Design Match

Easy

Success Toast

CSS · Animation · JavaScript · Design Match

Medium

Dashboard Metric Tiles

CSS · Flexbox · Design Match

Hard

Segmented Control

CSS · JavaScript · Design Match

Medium

File Upload Drop Zone

CSS · JavaScript · Design Match