Exercise Level: BeginnerDuration: 45 minLanguage: HTML/CSS
Responsive Layout Challenge
Build a three-column marketing page that collapses gracefully from desktop to mobile using modern grid and flexbox.
Abhishek Sharma 2026-08-15 Web Development / Frontend / CSS
Brief
Recreate the supplied layout using CSS grid for the page shell and flexbox for the card internals.
Requirements
- Full-width header with a centered content rail.
- Three feature cards side by side above 1024px, two above 768px and one on phones.
- No horizontal scrolling at 320px.
- All interactive elements reachable by keyboard.
Stretch goal
Add a dark theme driven entirely by custom properties.
Want more like this?
Browse every exercises in the library, organised by topic.
Related learning
Tutorial
Introduction to CSS
Learn what CSS is and why it matters
Web Development / Frontend / CSS
CSSWeb Development
Tutorial
History of CSS
Understand how CSS evolved
Web Development / Frontend / CSS
CSSWeb Development
Tutorial
Adding CSS
Three ways to add CSS to a page
Web Development / Frontend / CSS
CSSWeb Development