Cool Beans Tech Curriculum guide
Build Your Block
Build your own digital neighborhood.
- Who it's for
- Ages 10–15 (grades 5–9)
- Subject
- Computer science
- Length
- 10 weeks of 60 minutes, about 10 hours in all
- Devices
- Any device with a web browser
- Cost
- Free
Overview
Students build a website of their own, a whole neighborhood block of houses, shops and hangouts, in real HTML, CSS and JavaScript. Each week adds a layer: a first page, a shop, a look of their own, a layout, then working buttons and games. They fix a broken site, build a page for a client, and finish with a challenge they plan and build themselves.
- What students make
- A website that's actually yours: a whole block of houses, shops and hangouts.
- Topics
- HTML · CSS · JavaScript
Learning objectives
By the end of Build Your Block, students will be able to:
- Structure a web page with HTML, choosing elements for what content is: headings, lists, navigation and forms.
- Style and lay out pages with CSS: colors, fonts, spacing, flexbox and grid.
- Make a page respond to people with JavaScript: events, variables, functions, conditionals and arrays.
- Find and fix bugs step by step: read the error, make a guess, change one thing and test again.
- Plan and build a page for someone else's needs, and improve their own work toward a goal they set.
Beyond the subject: Persistence when something breaks · Designing for an audience · Planning and setting goals · Pride in their own work
Scope and sequence
| Week | What students do | Words they learn | Time |
|---|---|---|---|
| 1 | Build Your HouseStudents make their first web page: a house on their block with a name, a description, pictures, a link and a door. They learn what HTML tags are and how the browser turns them into a page. | tag, element, <h1>, <p>, <img> and src, <a> and href, attribute | 60 min |
| 2 | Build a BusinessStudents build a corner shop beside their house: a header, a product list, a menu, opening hours and a signup form. They learn that tags say what something is (a list, a menu, a form), not only how it looks. | <header>, <nav>, <ul> and <li>, <section>, <footer>, <form>, <label> and <input> | 60 min |
| 3 | Make It YoursStudents give their block its own look with CSS: colors, backgrounds, fonts, borders and spacing. No new HTML this week; lots of experimenting. | CSS, <style>, selector, property and value, color and background, font-family, border-radius, padding and margin | 60 min |
| 4 | Design the NeighborhoodStudents arrange their houses into a neighborhood: containers with <div>, rows and columns with flexbox, room between them with gap, and a garden with CSS Grid. | <div>, container, display: flex, justify-content, align-items, gap, display: grid, grid-template-columns | 60 min |
| 5 | Bring It to LifeStudents make their page respond: a door that opens, a light that toggles, a sign that cycles, a visitor counter, night mode and a live greeting. Their first JavaScript: events, variables and changing the page. | <script>, event, addEventListener, function, variable (let), getElementById, textContent, console.log | 60 min |
| 6 | Build Something FunStudents build an arcade corner: dice, a coin flip, a scoreboard, a guessing game and a mystery prize box. They learn random numbers, if/else, functions that take a value, and arrays. | Math.random(), Math.floor(), if / else, === and =, parameter, array, index | 60 min |
| 7 | Become a Bug HunterStudents fix an animal shelter's website that ships broken: find, understand, fix and check, six times over, then a boss bug. They learn that finding bugs is a skill, not a sign they did something wrong. | bug, loud bug, quiet bug, console, typo, condition | 60 min |
| 8 | Build for SomeoneStudents build a page for a youth soccer club on their block: a schedule, a roster, a menu, an RSVP button and a way to reach the coach. They learn to build for someone else's needs. | audience, semantic HTML, RSVP, counter | 60 min |
| 9 | Expand Your BlockStudents go back to their own block and decide what it needs next: a new place, restyled older pieces, somewhere people can hang out, and a button that does two things. Open goals: the checks look at structure, never wording. | remix, selector target, for everyone, event and handler | 60 min |
| 10 | Build Your BlockThe Block Builder Challenge: each student picks a goal and builds it from start to finish, then shows it's built, connected and interactive. It ends on "I built this." | checkpoint, connected, interactive, responsive | 60 min |
Standards alignment
2026 CSTA PK–12 Computer Science Standardsmiddle school, grades 6–8
| Standard | Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6 | Week 7 | Week 8 | Week 9 | Week 10 |
|---|---|---|---|---|---|---|---|---|---|---|
| MS-ALG-PS-01Algorithms & Design · Algorithmic Problem SolvingDesign an algorithm that includes variables of multiple data types to solve a problem or express an idea. | Yes | Yes | ||||||||
| MS-ALG-PS-03Algorithms & Design · Algorithmic Problem SolvingVerify the accuracy of an algorithm for given inputs. | Yes | |||||||||
| MS-ALG-IM-09Algorithms & Design · Impacts of Algorithms & DesignEvaluate which human-centered design principles are present or missing in an existing computing technology. | Yes | |||||||||
| MS-PRO-PD-12Programming · Program DevelopmentUse a procedure to structure code for clarity and reusability. | Yes | |||||||||
| MS-PRO-PD-13Programming · Program DevelopmentUse reference documentation in program development. | Yes | Yes | Yes | Yes | ||||||
| MS-PRO-VD-16Programming · Variables & Data StorageUse variables of multiple data types to store, access, and manipulate data within a program. | Yes | Yes | Yes | |||||||
| MS-PRO-RD-17Programming · Reading & DocumentingAnalyze the roles of iteration, selection, variables, and procedures in a segment of code. | Yes | Yes | 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 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | |
| MS-PRO-TR-20Programming · Testing & RefiningRefine a computing technology based on user feedback to improve its usability and accessibility. | Yes | 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
- A website of their own design, built and expanded over ten weeks
- Interactive features: an opening door, night mode, dice, a scoreboard and a guessing game
- A repaired animal shelter site and a page built for a youth soccer club
- A final challenge build, shown to be built, connected and interactive
How progress is checked
- At every step
- Each build step checks their code as they write it and says what's missing in plain words. Bigger builds go to the teacher, who sends back what worked and what to try next.
- 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