BitWithBite
UI/UX Worksheet
🎨 Components
SCORE___ / 20
NameClassDate
After this worksheet you can
Distinguish main components from instancesExplain variantsExplain component propertiesUpdate linked instances📚 Quick Recap
🎯 What you'll practice: Main components, instances, variants, and component properties.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A main component is marked with a:
2An instance is:
3Variants let one component handle:
4Updating the main component updates:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Configurable text/boolean/instance-swap options on a component are called component .
6A button with default/hover/disabled states is a component with .
7Why do teams build reusable components instead of redrawing buttons every time?
8What happens to an instance if you delete the main component?
9Give an example of a component that would benefit from variants.
🚀 Section C · Challenge ● CHALLENGE 5
10Design a component plan for a "Card" component with 3 variants (default, selected, disabled). List what changes in each variant.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = properties 6 = variants 7 = Reusable components save time and guarantee consistency, and updating the source updates every use everywhere 8 = Instances typically become detached or break their link, losing the ability to auto-update 9 = e.g. a button with default/hover/pressed/disabled states | 10 = Answers vary — e.g. default: normal border and background; selected: accent border/highlighted background; disabled: reduced opacity, no shadow, muted text.