Day 1 (Mon): Welcome, topic and plan

See what we build Open the finished project Planning sheet

• Warm-up: icebreaker. Each learner says their name and one thing they love.
• Block 1: demo the finished showcase site: "What do you notice?" Introduce the 3-step loop and the three tools: HTML = skeleton, CSS = style, JS = behaviour. Learners choose a topic and complete the planning sheet: topic, audience, 5 cool facts, 3 quiz questions, a boxes-and-labels sketch of the page.
• Block 2: set up the editor (VS Code or similar). Create the folder my-showcase/ and index.html. Type the basic template together and open it in the browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Showcase</title>
</head>
<body>
  <h1>My Topic</h1>
</body>
</html>

• Test, Debug, Show: save, refresh, show a neighbour. Teach: save, then refresh, every time.
• Checkpoint: planning sheet + a page showing the topic as a heading.

Day 2 (Tue): Text and lists

See what we build Open the finished project Starter files

• Block 1: headings h1–h3, paragraphs p, lists ul/li. Together, write the intro and the 5 cool facts.
• Block 2: learners write their own intro and facts. Add comments (<!-- like this -->) to label parts of the code.
• Test, Debug, Show: typical bug: a missing closing tag. Teach indentation to spot it.
• Checkpoint: heading, intro paragraph, list of facts.

Day 3 (Wed): Containers (<div> and <section>)

See what we build Open the finished project Starter files

• Block 1: big idea: everything lives in a box. Draw the page as boxes, then turn each box into a <div> or <section>.
• Block 2: build header, a "facts" section, a "quiz" section (empty for now), and a footer. Give each a class (class="facts", class="quiz"). Look at the demo site's source as a model.
• Test, Debug, Show: can a partner point to each box on the sketch and find it in the code?
• Checkpoint: page divided into named containers.

Day 4 (Thu): Links, buttons and a second page

See what we build Open the finished project Starter files

• Block 1: links (<a href="about.html">) and file paths, and buttons. Quick side lesson for your own topic page: <img src="..." alt="..."> and why alt matters. (The demo site has no pictures, so the day-by-day snapshots do not either.)
• Block 2: create about.html with the quiz buttons that will come alive in Week 3, and link the two pages from the navbar. Optional: add a picture or two to your own topic page (own drawings or free images; check licences).
• Test, Debug, Show: broken link? Check the path and file name together.
• Checkpoint: a link, buttons, two linked pages.

Day 5 (Fri): Test, debug and showcase

See what we build Open the finished project Starter files

• Block 1: partner page review: can someone who didn't build it read the page and understand it? Checklist: closing tags, working links, images show, alt text.
• Block 2: fix issues, tidy indentation, add the content you ran out of time for.
• Final slot: Friday mini-showcase: each learner shows their page for 1 minute. Tease next week: "now we make it beautiful."
• Deliverable: complete, unstyled home page with two linked pages.

Day 6 (Mon): First styles

See what we build Open the finished project Starter files

• Warm-up: show a page with and without CSS, side by side.
• Block 1: create styles.css and link it: <link rel="stylesheet" href="styles.css" />. Pattern: selector { property: value; }. Style body (background, text colour, font) and headings.
• Block 2: learners pick a colour palette (3 to 4 colours) on paper, then apply it. Style links and buttons.
• Test, Debug, Show: no change appearing? Check the link, the folder and the semicolons.
• Checkpoint: colours and fonts applied.

Day 7 (Tue): The box model and spacing

See what we build Open the finished project Starter files

• Block 1: every container has content, padding, border, margin. Draw it on the board; use Inspect on the demo site to see it live.
• Block 2: style each container: padding, border, border-radius, background. Centre the page with .container { max-width: 1000px; margin: 0 auto; }.
• Test, Debug, Show: play with values live in Inspect, then copy the good ones back to the file.
• Checkpoint: containers look like neat cards.

Day 8 (Wed): Layout with Flexbox

See what we build Open the finished project Starter files

• Block 1: display: flex; gap: 16px; puts boxes in a row. Build the navbar: title on the left, links on the right (justify-content: space-between).
• Block 2: make the footer and the quiz area layout using flex. Align and centre things.
• Test, Debug, Show: break the layout on purpose and fix it: a great way to learn.
• Checkpoint: a working navbar and footer.

Day 9 (Thu): Layout with Grid and cards

See what we build Open the finished project Starter files

• Block 1: display: grid; grid-template-columns: repeat(3, 1fr);. Turn the cool facts into a row of 3 cards, like "How we do it" on the demo site.
• Block 2: polish the cards: gradient heading (background-clip: text), hover effect (.card:hover { transform: translateY(-4px); }).
• Test, Debug, Show: compare each learner's cards with the demo; what's different?
• Checkpoint: a styled 3-card row.

Day 10 (Fri): Test, debug and showcase

See what we build Open the finished project Starter files

• Block 1: design review in pairs: "one thing I love, one thing to improve". Check colours are readable (enough contrast).
• Block 2: apply feedback. Style about.html with the same styles.css.
• Final slot: Friday showcase of styled sites.
• Deliverable: styled two-page site.

Day 11 (Mon): Responsive and final CSS polish

See what we build Open the finished project Starter files

• Block 1: shrink the browser window; where does it break? Add one media query together:

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

• Block 2: polish: spacing, shadows, a hero gradient, a styled quiz box ready for tomorrow.
• Test, Debug, Show: test on a phone-sized window and on the big screen.
• Checkpoint: page looks good at two widths.

Day 12 (Tue): JavaScript, first steps

See what we build Open the finished project Starter files

• Warm-up: "Our page looks great. Now let's make it react."
• Block 1: what JS is, where it goes (<script> at the bottom of body), the Console (Inspect → Console) and console.log("Hello"). Then variables (let score = 0;) and a first function:

<button onclick="sayHi()">Click me</button>
<script>
  function sayHi() { alert("Hello from my page!"); }
</script>

• Block 2: learners make a button that shows a fun fact about their topic.
• Test, Debug, Show: bug hunt: typical errors are quote marks, brackets and misspelled function names. Read the Console message together.
• Checkpoint: a button that reacts when clicked.

Day 13 (Wed): Build the quiz together

See what we build Open the finished project Starter files

• Block 1: if / else and one quiz question. Build it together:

<button onclick="check('Tsavo')">Tsavo</button>
<script>
  function check(answer) {
    if (answer === "Tsavo") { alert("Correct!"); }
    else { alert("Try again!"); }
  }
</script>

• Block 2: learners write their own question and 3 answer buttons about their topic.
• Test, Debug, Show: partners try each other's quiz; does every answer behave correctly?
• Checkpoint: one working quiz question.

Day 14 (Thu): Show results on the page (no more alert)

See what we build Open the finished project Starter files

• Block 1: change the page from JS: document.getElementById("result").textContent = "Correct!";. Add <p id="result"></p> in the quiz box and show the message there.
• Block 2: stretch (optional): add a score variable that goes up on a correct answer and displays on the page, or a second question. The demo site's quiz shows just the message.
• Test, Debug, Show: does the score ever go wrong (e.g. double-counting)? Fix it together.
• Checkpoint: quiz with on-page feedback.

Day 15 (Fri): Test, debug and showcase

See what we build Open the finished project Starter files

• Block 1: swap laptops and play each other's quiz for 10 minutes. Feedback card: 1 compliment, 1 bug, 1 idea.
• Block 2: fix bugs, polish text and styles.
• Final slot: Friday showcase.
• Deliverable: responsive home page with a working quiz.

Stretch for fast finishers: a light/dark theme button using classList.toggle, a "next question" button, or a fact that appears when a card is clicked. Keep JS small: a quiz that works is a success.

Day 16 (Mon): "Who I am" and finishing touches

See what we build Open the finished project Starter files

• Block 1: open about.html. Learners replace every [ ... ] with their own words. Rules: first name only, no surname, address, phone number or school name; photos only with parent permission. The "Try my quiz" box already contains a quiz; learners change the question, the answers and the correct answer to match their topic.
• Block 2: pick one finishing touch from the stretch list or the demo site (the tabbed tools showcase, a favicon, hover effects, a closing "Thanks for visiting!" message). Then a content check: all facts true, spelling, images with alt text, the About page linked from the navbar on both pages.
• Test, Debug, Show: partners proofread each other's writing (spelling, kindness, privacy), then walk through each other's site as a visitor would.
• Checkpoint: About page written and linked, one extra feature added, a site the learner is proud of.

Day 17 (Tue): Final test, debug and deploy

See what we build Open the finished project Starter files

• Block 1: the bug hunt: learner tests every link, button, image and quiz answer, then a partner tests again with fresh eyes. Fix, test, fix.
• Block 2: deploy: the teacher publishes each folder to a free host (for example GitHub Pages or Netlify Drop) so every project has a real web address. Keep accounts under the teacher or school, not the children. Open each live link on a different device.
• Test, Debug, Show: the live site works exactly like the local one?
• Checkpoint: every learner has a live URL.

Ready-to-show checklist

• [ ] All links work (home, how, who I am)
• [ ] Looks good on a narrow window too
• [ ] Quiz works for every answer and shows a message
• [ ] About page is in the learner's own words
• [ ] No private information on any page

Day 18 (Wed): Rehearsal and final polish (last build day)

See what we build Open the finished project Starter files

• Block 1: write a 2-minute talk using three prompts: What I built · What was hardest (and how I fixed it) · What I'm proudest of. Practise in pairs.
• Block 2: last bug fixes only (no new features). Re-test the live link on another device. Back up each folder on a USB drive.
• Test, Debug, Show: each learner gives their talk to a partner and gets one compliment and one idea.
• Deliverable: a finished project and a rehearsed talk. Building stops today.

Day 19 (Thu): Written quiz and class showcase

See what we build Open the finished project Starter files Written quiz (PDF) Answer key (PDF)

• Warm-up: quiet start; pencils out, laptops closed.
• Block 1: written quiz (about 20 minutes, 20 marks) on HTML, CSS, JavaScript and debugging. Most questions come from the LeetCamp site the class built (its navbar, 3-card grid, CSS variables and quiz function); three are general. Print camp/pdf/day-19-written-quiz.pdf (one copy per learner); the teacher marks with camp/pdf/day-19-answer-key.pdf. The HTML versions sit beside them in camp/.
• Block 2: class showcase (learners among themselves). Sites open on laptops; each learner presents their 2-minute talk, and classmates give one compliment and one idea. Finish with the badges.
• After: save every project folder. These become the exhibits for next year's Tech Showcase.

Parents and teachers: the showcase this week is among the learners. If you still want visitors, the simplest place is the Day 20 party.

Day 20 (Fri): Play day and end-of-camp party

See what we build Party plan

No coding project today. See camp/day-20-party.html for the full plan.

• Warm-up: music, name cards, "my favourite moment of camp".
• Block 1: Quiz Battle. Everyone plays every classmate's quiz; keep a class leaderboard.
• Block 2: games and free play (unplugged coding games, Scratch free play, free-build time).
• Final slot: party. Certificates, fun awards for every learner (Bug Squasher, Best Design, Most Creative Topic, Helpful Hand), snacks, class photo (only with consent).
• Before leaving: back up every project folder to USB and hand out take-home links.