Back to homepage

Teacher resources

Lesson sequence, projects, and rubric

Customize the wording, prompts, rubric rows, or project ideas in the HTML and JavaScript files to match your class.

Suggested lesson sequence

Introduce vibe coding and responsible AI use.
Review HTML, CSS, and JavaScript foundations.
Practice prompting and debugging with small tasks.
Plan a project for a real audience.
Build, test, revise, and present.

Project ideas

Class resource hub
Interactive science quiz
Club sign-up or event page
Digital reflection journal
Accessibility makeover of a sample page

Assessment checklist

Student can explain what the project does.
Prompts include goal, audience, constraints, and output.
Student tested links, buttons, forms, and layout.
Project avoids private data and respects copyright.
Design is readable, accessible, and polished.

Planning rubric

Vibe coding planning stage rubric

Category	Mastery	Distinguished	Proficient	Apprentice
Audience Need	Defines a specific audience and a real need using evidence from observation, questions, feedback, or classroom context.	Defines a clear audience and need, with some connection to user feedback or context.	Names a general audience and a basic problem or goal the project might address.	Audience is vague, missing, or disconnected from the project idea.
Scope	Sets realistic boundaries, clearly naming what is included, what is left out, time limits, tools, and skill constraints.	Sets clear project boundaries and leaves out most features that would make the first version too large.	Includes a basic scope, but some features may still be too broad or unclear.	Scope is too large, too vague, or not realistic for the time and skills available.
MVP	Describes the smallest useful version that can be built, tested by a real user, and improved through iteration.	Describes a small first version with a clear purpose and user task.	Identifies a first version, but it may include extra features or need a clearer user test.	MVP is missing, too large, or not useful enough to test.
Feature Priority	Separates must-have and stretch features, and explains how each must-have feature supports the audience need.	Separates core features from later ideas and keeps the first version focused.	Lists features, but priority or connection to the user need may be incomplete.	Features are random, mostly decorative, or not prioritized.
Testing Plan	Plans a specific user test with success criteria, expected behavior, feedback questions, and revision steps.	Plans a practical user test and explains what feedback will be collected.	Includes a basic test plan, but success criteria or feedback questions need more detail.	Testing plan is missing or only says the student will see if it works.
Responsible Planning	Identifies privacy, copyright, accessibility, data, bias, safety, and attribution risks before building.	Identifies several important responsibility risks and includes reasonable prevention steps.	Mentions at least one responsibility concern, such as privacy, copyright, or accessibility.	Does not yet consider responsible AI use, privacy, copyright, accessibility, or user safety.

Copyable rubric

Vibe coding project rubric

Category	Mastery	Distinguished	Proficient	Apprentice
Understand	Explains the tool, code, prompt, and design choices clearly with accurate vocabulary.	Explains most choices and connects them to the project goal.	Explains the basic purpose of the project and some code or prompt choices.	Needs support to explain what the code, tool, or prompt does.
Apply	Uses AI and coding concepts to build, revise, test, and troubleshoot independently.	Uses AI and tests fixes with minor teacher support.	Uses prompts and basic testing to make a working project.	Needs help using prompts, testing, or applying fixes.
Create	Designs an original, useful, ethical, and polished project for a specific audience.	Creates a useful project with clear audience awareness and responsible choices.	Creates a complete project that works for a general audience.	Project is incomplete, unclear, or needs stronger safety and design choices.

Final project rubric

Form and function rubric

Category	Mastery	Distinguished	Proficient	Apprentice
Function: Purpose	Project solves the intended audience need clearly, completely, and with features that directly support the goal.	Project supports the audience need with mostly clear purpose and useful features.	Project has a basic purpose, but the connection to the audience need may be general.	Purpose is unclear, incomplete, or disconnected from the audience need.
Function: Reliability	Links, buttons, forms, navigation, media, and interactions work consistently on expected devices.	Most core features work, with only minor issues that do not block use.	Main content works, but some links, layout, or interactions need fixing.	Important parts are broken, missing, or difficult to test.
Function: Code Quality	Files are organized, code is readable, names are clear, and the student can explain important HTML, CSS, and JavaScript choices.	Code is mostly organized and the student can explain most major choices.	Code works in places, but organization, naming, or explanation needs improvement.	Code is hard to follow, copied without understanding, or not organized into working files.
Form: Visual Design	Design uses strong hierarchy, spacing, contrast, typography, color, and consistency to create a polished experience.	Design is clear and mostly consistent, with good readability and visual organization.	Design is understandable, but spacing, color, typography, or hierarchy need refinement.	Design feels unfinished, inconsistent, crowded, or hard to read.
Form: Usability	Users can quickly understand where they are, what to do next, and how to complete the main task.	Navigation and layout are mostly easy to use, with only minor friction.	Users can complete the task, but instructions, labels, or layout may cause confusion.	Users may not know what to click, where to go, or how to complete the task.
Form: Accessibility	Project uses readable text, strong contrast, responsive layout, alt text, keyboard-friendly controls, and responsible media choices.	Project includes several accessibility strengths, with minor details still to improve.	Project includes basic accessibility efforts but needs more consistent testing.	Accessibility is missing or the page is difficult to read, navigate, or use on different screens.