Mastery Points
0
Active Mission
Mission: Change 'bg-blue-600' (mobile color) to 'bg-red-600' to brand the mobile view.
Objective: add bg-red-600 to the code
Current MissionIN PROGRESS
Riddle:Mission: Change 'bg-blue-600' (mobile color) to 'bg-red-600' to brand the mobile view.
33%
Reward: 50 XP Verified
Fluid Responsive UX in html-css
Context & Logic
Scale across devices using @media queries and Viewport Units.
Technical Reference
@media (max-width)Changes styles based on browser width.
mobile-firstWriting default styles for mobile, then scaling up.
vw / vh unitsPercentage of the viewport width/height.
breakpointsIndustry standards (768px tablet, 1024px desktop).
Interactive Workshop
Interactive Playground
Source HTMLMarkup
Source CSSStyle
Live Output Pane
Sync activeTailwind Core Loaded
Standard CSS Scope
Auto-Sync Preview
Modify the source above to see live changes. Supports standard CSS and Tailwind utility classes.
Test Your Knowledge
Assessment Mode1What is 'Mobile-First' design strategy?