Stage 8 · Capstone

Make It Yours

This is your stage. You have learned everything you need. Design your own original beadwork pattern, give it colors that mean something to you, and make it round like real beads. Everything you learned in Unit 8 is collected below as a reference. (pause on a highlighted word to see what it does)

🎯 Your goal: an original round-bead pattern

Everything you learned in this unit

1. Lay out a grid

A display: grid turns a box into rows and columns. grid-template-columns sets how many columns, and gap sets the space between beads.

.bead-grid {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 8px;
}

2. Turn squares into round beads

Each cell is a square. aspect-ratio: 1 / 1 keeps it a perfect square, and border-radius: 50% rounds it into a circle, a real bead.

.bead-grid div {
  aspect-ratio: 1 / 1;
  border-radius: 50%;   /* 50% = circle */
}

3. Name your colors once

CSS custom properties (variables) start with two dashes. Name a color once in :root, then reuse it anywhere with background: var(...).

:root {
  --morning-star: #FFD866;
  --sky: #4e77bb;
}
.c1 { background: var(--morning-star); }

Finish: Check Your Understanding

Design your pattern in the editor, then answer these to complete the unit. You need 70% to pass, and you can retake it.

YOUR BEADWORK

PREVIEW