Cool Beans Tech Curriculum guide
Curly Brace Critters
Dream up a creature and bring it to life with CSS: pick its colors, round its edges, add eyes, then make it wiggle!
- Who it's for
- Ages 10–15 (grades 5–9)
- Subject
- Computer science
- Length
- 1 mission of 45 minutes, 45 minutes in all
- Devices
- Any device with a web browser
- Cost
- Free
Overview
A one-session introduction to CSS, the language that styles every website. Students draw a creature with nothing but code: a color, rounded edges, two eyes and a wiggle. Then they change the values to make a critter no one else has, and take it home.
- What students make
- A one-of-a-kind critter drawn and animated with nothing but CSS.
- Topics
- CSS · Animation
Learning objectives
By the end of Curly Brace Critters, students will be able to:
- Write CSS rules with selectors, properties and values.
- Shape elements with border-radius and style a group of elements with a class selector.
- Animate an element with @keyframes and the animation property.
- Predict what a change to a value will do, try it and adjust.
Beyond the subject: Trying, checking and adjusting · Creative choices · Reading code closely
Scope and sequence
| Mission | What students do | Words they learn | Time |
|---|---|---|---|
| 1 | Meet Your CritterStudents style a critter with CSS: a color, rounded corners, two eyes and a wiggle, then change it to make it their own. | property and value, border-radius, class selector, @keyframes, animation | 45 min |
Standards alignment
2026 CSTA PK–12 Computer Science Standardsmiddle school, grades 6–8
| Standard | Mission 1 |
|---|---|
| MS-PRO-PD-13Programming · Program DevelopmentUse reference documentation in program development. | Yes |
| MS-PRO-TR-19Programming · Testing & RefiningUse systematic strategies to test, refine, and document changes to a computing technology to meet the intended purpose. | Yes |
Alignments are our own reading of where each session fits, not an official alignment by the standards' authors.
Evidence of learning
What students finish with
- An animated critter of their own design, written entirely in CSS
- A page they can take home that opens in any browser
How progress is checked
- At every step
- Each build step checks their CSS as they write it, and the critter changes on screen the moment they run it. Their finished critter goes to the teacher for notes.
- Teacher review
- Key work goes to the teacher, who approves it or sends it back with what worked and what to try next.
- Exit tickets
- Each session closes on one question, posted by the teacher and answered live.
- Reflections and check-ins
- Students say what they made and how it's going, in their own words.
- Reports
- A progress page for each student, and a program report of how many students worked on each standard, with a spreadsheet.
- No grades or scores
- Feedback is about the work, never a number, so students keep trying.
Support for teachers
- A lesson plan for every session: a warm-up, a timed agenda, words to know, what to watch for and a closing question
- Slides for every session, to present on a projector
- A live class map: who's building, who's done and who needs help
- Hints and notes for one student or the whole class
- Sessions open when the teacher is ready, so a class can stay together
- A printable certificate for every session a student finishes
Safety, privacy and access
- Students sign in with a made-up username and a secret word: no email, real name or age is ever asked
- Only the student and their teacher see their work: no sharing between students, no public profiles
- No ads, no trackers and nothing sold
- Runs in a web browser on Chromebooks, laptops and tablets, with nothing to install, and shared devices are cleared at sign-out
- Designed for access: keyboard navigation, visible focus, readable contrast and calmer motion when a device asks for it
- Free for schools and programs