Templates

Small projects you can read in one sitting.

Every template is a handful of plain files with no libraries. Open one, break it, fix it, make it yours. Each card lists what it teaches.

Starters

Starter page

One page, one stylesheet, one script and a button that counts. The smallest useful start.

index.html · style.css · app.js

const button = document.getElementById("tap");
let taps = 0;

button.addEventListener("click", () => {
  taps += 1;
  button.textContent = "Tapped " + taps + (taps === 1 ? " time" : " times");
  console.log("tap", taps);
});

Linking CSS and JS files
Click events
Console output

Open in the studio

Games

Comet Catcher

A small canvas game: move the basket, catch falling comets, five misses and it is over.

index.html · style.css · game.js

const canvas = document.getElementById("sky");
const ctx = canvas.getContext("2d");
const scoreEl = document.getElementById("score");
const missEl = document.getElementById("miss");

const basket = { x: 220, w: 64, h: 12, speed: 6 };
let comets = [];
let score = 0;
let misses = 0;

Canvas drawing
A game loop with requestAnimationFrame
Keyboard and pointer input

Open in the studio

Pages

Landing page

A one-page product site with a hero, a feature grid and a demo waitlist button.

index.html · style.css · main.js

document.getElementById("cta").addEventListener("click", () => {
  document.getElementById("thanks").hidden = false;
  console.info("Waitlist button clicked (demo only).");
});

Responsive grid
CSS custom properties
Showing and hiding elements

Open in the studio

Tools

Checklist

Add, tick and remove tasks, with a live count of what is left.

index.html · style.css · list.js

// Kept in memory: the sandboxed preview has no storage.
const tasks = [];
const list = document.getElementById("list");
const input = document.getElementById("text");

function render() {
  list.innerHTML = "";
  tasks.forEach((task, i) => {
    const li = document.createElement("li");

Forms
Rendering a list from data
Building elements safely with textContent

Open in the studio

Tools

Pixel Pad

A 16 by 16 drawing grid with a colour palette, for mouse and touch.

index.html · style.css · pad.js

const colors = ["#f9b935", "#ff6b6b", "#7cf0c0", "#6ea8ff", "#ffffff", "#26252e"];
let current = colors[0];
let drawing = false;

const palette = document.getElementById("palette");
colors.forEach((c, i) => {
  const b = document.createElement("button");
  b.style.background = c;
  b.title = c;

Pointer events
CSS grid
Generating elements in a loop

Open in the studio

Tools

Focus Timer

A focus and break timer with start, pause and reset.

index.html · style.css · timer.js

const LENGTHS = { Focus: 25 * 60, Break: 5 * 60 };
let mode = "Focus";
let left = LENGTHS[mode];
let timer = null;

const clock = document.getElementById("clock");
const label = document.getElementById("mode");
const start = document.getElementById("start");

setInterval
Formatting time
Simple state

Open in the studio