GRADES 10–11 · LESSON 3
One-Page Prototype With a Checklist
Write 5 pass-or-fail checks first, then build a one-page web prototype and see how many it really passes.
By the end of this lesson you will have — one one-page web prototype in Replit and a 5-line pass checklist, tried by one person you know
What you'll show at the end: A screenshot of your one-page prototype running in Replit (or as an index.html file in your browser) next to your 5-line checklist, with each line marked pass or fail after one person tried it.
Replit
Check each tool's age rule before you sign up. If you are under 13, ask a parent first — some tools here are 13+ only.
Follow these steps
- Before you build, write 5 checklist lines that someone could mark pass or fail, for example: 'A new person finds the Add button in under 10 seconds.' Base them on your problem statement and survey.
- Open Replit. Its terms say you must be 13 or older, and if you're under 18 you need a parent's or guardian's permission, so ask first. On the free plan, create a project from an HTML, CSS, JS template (or a blank one), open index.html, and paste the starter code from this page. Can't use Replit (age or account)? Skip it: paste the starter code into a plain text editor such as Notepad; when you save, choose All files in Save as type and name it index.html, then open that file in your browser. No login needed.
- Change the page so it fits your problem, and keep it to one page. Press Run (or save the file and refresh the browser tab) and check your 5 lines yourself first. You don't need to publish it; the preview on your own screen is enough.
- Show it to one person you know on your device and don't explain it. Mark each line pass or fail, then take a screenshot. Stuck on a fix? Copy the prompt from the box next to these steps into the AI you're allowed to use (under 13: a parent's account, with your parent).
Free tools for this lesson
Starting fresh?
No page yet? Paste this into index.html and press Run. No Replit? Save it as index.html in a plain text editor and open it in your browser. It is a tiny homework list to change into your own idea.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Homework Catcher</title></head>
<body>
<h1>Homework Catcher</h1>
<p>Type homework the moment you hear it.</p>
<input id="task" placeholder="Math p.42, due Friday">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
document.getElementById("add").onclick = function () {
const box = document.getElementById("task");
if (box.value.trim() === "") return;
const li = document.createElement("li");
li.textContent = box.value;
document.getElementById("list").appendChild(li);
box.value = "";
};
</script>
</body>
</html>
Source (adapted for this grade: wording changed, facts unchanged)
anthropic.com/learn — AI Fluency: Framework and Foundations, Description and Discernment (adapted for Grades 10–11)
Stanford d.school, Design Thinking Bootleg — define, prototype, and test methods (adapted for Grades 10–11)
anthropic.com/learn — AI Fluency: Framework and Foundations, Description and Discernment (adapted for Grades 10–11)
Stanford d.school, Design Thinking Bootleg — define, prototype, and test methods (adapted for Grades 10–11)