← All Neural Networks & Deep Learning modules

Capstone — Build a Concept Manipulative

Capstone · build & submit · about 2–4 hours.

You have spent this course using interactive tools that make a deep learning idea click. Now you build one. Pick a single concept from Deep Learning and make an interactive web page that teaches it to someone else — the same kind of slider-and-readout tool you have been dragging all along.

The brief

Build a single-page interactive manipulative that teaches one Deep Learning concept. It must:

let the learner change something (a slider, a draggable point, a toggle),
update live as they change it — a number, a bar, a curve, or a shape,
show its output correctly, and
run as a single HTML file that opens in any browser with no install.

Your concept: pick one

Choose a concept you understand well enough to teach. A few that lend themselves to a manipulative:

A single neuron: weights, bias, output An activation function's shape The forward pass through a layer A gradient-descent training step What depth buys you Overfitting and regularization

One concept, done clearly, beats five done shallowly.

Follow the lifecycle

This is the same build loop from Intro to AI, applied to a deep learning idea: plan it → build it → test & submit. The checklist near the bottom tracks these three stages.

How the starter file works

The editor below opens with a working example: a single neuron with sliders for weight w and input x (bias fixed at b = 0). Read it as three moves — the pattern behind every manipulative in this course:

Controls the learner changes: two <input type="range"> sliders for w and x.
A recompute in the script: read the sliders, compute z = w * x + b and σ(z) = 1 / (1 + e⁻ᶻ).
Update the readout: write the values into a text element and size a bar to show the 0–1 output.

Build it here

This is your workbench. Edit the code on the left and it runs live on the right — every change shows instantly, no download needed. It autosaves in this browser as you go.

The code editor needs JavaScript enabled. You can still build your manipulative in any text editor with an AI assistant.

Upload your project files

Your capstone is one HTML file — but if it pulls in extras (an image, a data file, a screenshot for your teacher), upload them all here so your whole project is in one place. Sign in first; only you and your teacher can see these files. This is separate from the one-click Submit for grading above, and a good way to hand in a project you built outside the editor.

File upload needs JavaScript enabled. You can still Download .html above and submit from your student portal.

Track your progress

This checklist needs JavaScript enabled. The seven stages above are the checklist.

Definition of done

Your capstone is complete when it satisfies all of the following criteria:

it conveys a single concept through a functioning, interactive demonstration;
its output is rendered correctly and updates as the input changes;
it is delivered as a self-contained HTML file that runs in any browser without installation;
an independent user has engaged with it and can articulate the intended concept; and
it has been submitted for assessment.

Submitting: when your manipulative is ready, sign in and click Submit for grading in the toolbar above — it sends your code straight to your teacher. (You can also Download .html to keep a copy, or submit later from your student portal.) A passing score unlocks your certificate.

← Back to the course map