Development · Intermediate
Responsive components, wherever they live
A reusable story card that adapts to its own space. Build with intrinsic layout and container queries, separate component rules from page rules, and test the result with difficult content in several layouts.
Written by Akis Apostoliadis for Skillfolio · 4 written lessons · Self-paced
Checking purchase availability…
Course price: $59 USD, plus applicable tax. One payment for this course. Compare all-course package prices: $29/month or $299 lifetime.
What you’ll make
A container-aware card system tested in a sidebar, grid and full-width feature.
Before you begin
HTML, CSS Grid and media queries. Use a modern browser with container-query support.
Who it’s for
Developers who already use Grid and media queries.
- Container queries
- Intrinsic sizing
- Component CSS
The complete curriculum
Preview the first lesson free. Purchase unlocks the remaining lessons, project and downloads.
Let content reveal the breakpoint
Find a component breakpoint by observing where its content stops working.
15 min read · 45 min practice · Free preview
Query the space the card actually gets
Implement a container query with an explicit containment boundary.
16 min read · 45 min practice · Included with purchase
Separate page rules from component rules
Separate the host page’s placement decisions from a reusable card’s internal rules.
16 min read · 45 min practice · Included with purchase
Prove the component travels
Demonstrate portability with an explicit content and interaction matrix.
16 min read · 60 min practice · Included with purchase
See the work
One component. Three allocations.. Completed instructor specimen using fictional teaching material; not a learner result.This course works towards: A container-aware card system tested in a sidebar, grid and full-width feature.
Explore completed teaching examples and the decisions behind them. These are instructor-authored examples, not learner testimonials.
What’s included
- Original written lessons, worked examples and guided practice.
- A course project, review criteria and reference responses.
- Downloadable course materials for purchased lessons.
Explore the course before committing. Start with the free lesson, or compare other courses.