Challenge - Expert capstone

Build a design system combining all expert topics.

Design system: all expert topics

This capstone blends every expert topic into one design system. BEM class names label the components; @layer orders priority. Container query reshapes a card to its host; view transition animates card swaps; anchor positioning pins the dropdown.

Nesting (&.is-active) keeps declarations tidy; will-change: transform speeds up the animation. Seven topics merge into a consistent, fast and predictable interface.

Exercise Build the capstone card base

Build the design system's card component. Open an @layer components block and place .card inside with padding: 1rem, container-type: inline-size and view-transition-name: card. In the same block add .card__title with font-size: clamp(1rem, 4cqi, 1.5rem).

Show example solution

/* card component */
@layer components {
  .card {
    padding: 1rem;
    container-type: inline-size;
    view-transition-name: card;
  }

  /* card title */
  .card__title {
    font-size: clamp(1rem, 4cqi, 1.5rem);
  }
}

Exercise Build the capstone dropdown panel

Add the dropdown panel. On .card__button add anchor-name: --card-btn. On .card__menu add position-anchor: --card-btn, position: absolute, top: anchor(bottom), position-try: --flip and will-change: transform.

Show example solution

/* card button */
.card__button {
  anchor-name: --card-btn;
}

/* card menu */
.card__menu {
  position-anchor: --card-btn;
  position: absolute;
  top: anchor(bottom);
  position-try: --flip;
  will-change: transform;
}

Test yourself

Which declaration speeds up a card animation?
```
.card {
  /* ??? */
  animation: cardIn 0.3s ease-out;
}
```
- transform: optimize
- will-change: transform
- speed: fast
- animation-speed: high
Show answer

will-change: transform — Correct. will-change: transform tells the browser the transform property is about to change; this makes the animation smoother.

Complete the nesting & selector

.card {
  padding: 1rem;
  ____.is-active {
    border-color: #6366f1;
  }
}

Show answer

.card {
  padding: 1rem;
  &.is-active {
    border-color: #6366f1;
  }
}

Match design system pieces

@layer

Priority layer
container-type

Container responsiveness
view-transition-name

Transition binding
anchor-name

Anchor name
will-change

Animation hint

Next lesson: Expert section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies