Design and code an interactive app to introduce yourself. Students choose symbols, write their meanings, and code navigation paths, blending personal reflection and coding.
Pacing
1 class · 40 min
Grade
Grade 9
Opens a private practice project in the Studio — no account needed.
Reflect on personal aspects through symbolic representations.
Write detailed descriptions of the significance of their chosen symbols.
Code navigation paths to design and guide their interactive stories.
Key vocabulary
symbolself-portraitdecodeheritage
Assessment
Formative
Use milestone checks, organizer responses, and daily test evidence to guide feedback.
Summative
Each symbol reveals a different, safe aspect of the AUTHOR through a specific connection and explanation. The title opens the hub, each symbol reaches its matching explanation, and every detail page returns to the hub.
The student journey
This is a build — not a worksheet packet
Every lesson runs like the story students are about to make: read it, write it, build it, polish it, publish it. The printables scaffold each stage — the published Elementari project is the destination.
1
📖
Read
Students read a short, high-interest passage — a real-world hook, not a dry textbook definition — to spark ideas for what they'll make.
📖The Painter Who Wore Her Life
A monkey rests its paw on her shoulder. A dead hummingbird hangs from a necklace of thorns. A black cat watches from behind. The woman at the center stares straight out, calm, daring you to ask what any of it means. Frida Kahlo painted hers…
SourcesMuseo Frida Kahlo (Casa Azul), Mexico CityHarry Ransom Center, The University of Texas at Austin — Self-Portrait with Thorn Necklace and Hummingbird (1940)
In the studio, students bring the project to life — adding art and following the exact writing and coding steps shown below. The Studio Compass walks them through it, one step at a time.
🧭Studio CompassStep 1 / 9
Create Your App's Title Screen with a Start Button! 🌟
Start off with the ready-to-go title page. Put your own spin on it and jazz it up with a "Start" button. We'll code the button to work later.
Key words — tap to learnobject block
Each step checks off & advances on its own
All 9 studio steps · dynamic to the project
1Create Your App's Title Screen with a Start Button! 🌟~5 min
2Designing Your Symbols Page 🎨
3Your First Symbol ✏️~2 min
4Your Second Symbol ✏️~2 min
5Your Third (and Final) Symbol ✏️~2 min
6Coding Your App's Title Screen! 🖥️~4 min
7Coding Your App's User Navigation~8 min
8Returning to the Symbols Page~3 min
9Extension: Lock the Navigation~3 min
4
🔁
Polish
ongoing
Teacher and peer feedback pin right onto the project — students revise until it's ready to share.
Feedback on the project2 pins
🍎
Add one more sentence here so readers get the full picture.
👍 2Teacher
A
The interaction is clear — it helps the reader follow the project!
A couple of things to gather, a few quick steps to prep — then you're ready to hand it to students.
What you need
A device per student or pair
Internet connection
Prep · about 10 min
1Print the student kits
2Assign this lesson to your students
3Skim the build steps
Teacher background
What you need to know
Students learn that a symbol carries identity only when it is specific — an object tied to a real memory, relationship, or value, chosen deliberately and explained. They apply this by curating three symbols that could belong to no one else and writing the connection that turns each object into a claim about who they are.
Key terms
symbol
an object or image that stands for a bigger idea
self-portrait
an artwork an artist makes of themselves
decode
to work out the hidden meaning of something
heritage
the culture and traditions passed down to a person
Watch for these misconceptions
✕
The explanation describes the object but not what it represents. →Add the sentence: 'This represents ___ because ___.
✕
A symbol button opens the wrong page or a detail page cannot return to the hub. →Number the hub buttons and destination pages, then trace each out-and-back route.
Standards alignment
Aligned to the standards you teach
Every task maps to a specific standard, so planning and reporting are covered.
Tracking 7 frameworks: Common Core ELA, Common Core Math, NGSS +4
CCSS · ELA4CSTA7ISTE83 frameworks · 19 standards · DOK 3
CCSS · ELA
Common Core State Standards — English Language Arts
4 standards
CCSS.ELA-LITERACY.W.7.5
With guidance and support from peers and adults, develop and strengthen writing as needed by planning, revising, editing, rewriting, or trying a new approach.
CCSS.ELA-LITERACY.W.9-10.5
With guidance and support from peers and adults, develop and strengthen writing as needed by planning, revising, editing, rewriting, or trying a new approach.
Also addressedCCSS.ELA-LITERACY.W.7.6 · CCSS.ELA-LITERACY.W.9-10.6
CSTA
CSTA K–12 Computer Science Standards
7 standards
2-AP-17
Systematically test and refine programs using a range of student-created inputs.
3A-AP-16
Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue.
2-AP-13
Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
3A-AP-19
Systematically design and develop programs for broad audiences by incorporating feedback from users.
Also addressed2-AP-15 · 2-AP-19 · 3A-AP-23
ISTE
ISTE Standards for Students
8 standards
ISTE 1.4.a
Students know and use a deliberate design process for generating ideas, testing theories, creating innovative artifacts, or solving authentic problems.
ISTE 1.4.c
Students develop, test, and refine prototypes as part of a cyclical design process.
ISTE 1.6.d
Students publish or present content that customizes the message and medium for their intended audiences.
ISTE 1.5.d
Students understand how automation works and use algorithmic thinking to develop a sequence of steps to create and test automated solutions.
Also addressedISTE 1.2.d · ISTE 1.1.c · ISTE 1.6.b · ISTE 1.5.c
Full task-by-task mapping — including Depth of Knowledge — is in the answer key.
Differentiation & accessibility
Built to reach every learner
One lesson, three built-in paths — with accessibility baked into the materials, not bolted on afterward.
Extra support
Emerging readers & writers
Read-aloud and multilingual support in the Elementari build
Studio Compass highlights one task at a time — including the coding
Sentence frames and a word bank so it is never a blank page
On grade
The core lesson
The passage and storyboard exactly as written
Model answers and “look-fors” in the answer key
Self-check chips at every milestone
Ready for more
Extension & challenge
Challenge vocabulary and a real-world extension question
Deepen one existing page or interaction — without changing the required mechanics
A longer, evidence-based reflection prompt
Accessibility, built inPredictable step-by-step structureOne task at a time · Studio CompassHighlighted response areasLow-stimulation printMovement-friendly pacingDesigned so every student can design, write, and code — with ADHD, autism, and dyslexia in mind.
Questions
Teacher FAQ
Do I — or my students — need to know how to code?
No. Coding concepts are introduced in plain language exactly when students need them, and Studio Compass confirms each milestone so students keep moving without you troubleshooting. The teacher guide walks you through the whole build, answers included.
How long does this lesson take?
About 35, paced into 45-minute class periods. You can spread it out or compress it — students pick up where they left off, so it doesn't have to finish in one sitting.
What devices does this lesson work on?
Students can read, write, code, and publish on Chromebooks, iPads, tablets, laptops, or desktops. All they need is a modern browser — nothing to download or install.
What is Studio Compass?
Studio Compass is the step-by-step guide inside the Studio. It shows students what to do next, identifies the exact coding blocks they need, and confirms completed milestones so they can keep moving independently.
How does this lesson support different learners?
This lesson includes read-to-me with synchronized highlighting, a built-in glossary, and picture-based storyboarding, with writing and coding scaffolds you can dial up or down. Students can work with guided support or more independently — and still finish the same project.
Ready when you are
Bring this lesson to your class
Import your class, assign in one click, and watch them build — the whole kit comes with it.
