Chapter practice task
Task: Build a responsive features section with a reusable card component
- Build a features section with a stack and a grid of four cards.
- Turn the card into a component with title, text and icon properties.
- Add a hover variant to the card.
- Add tablet and phone breakpoints and adjust the grid columns and text sizes.
By the end of this chapter
- You can build layouts that adapt instead of breaking
- Your site looks right on desktop, tablet and phone
- You can make components with variants and properties
Quick answers for this chapter
Stack or grid?
Use stacks for rows and columns of items in sequence, like a hero or a navbar. Use grids for repeated cards in columns.
Do breakpoint changes affect desktop?
Changes on the primary (desktop) breakpoint flow down to others. Changes on tablet or phone only affect that breakpoint.
Why use components?
Change one component and every instance updates. It keeps the design consistent and saves time.