← Back to list
report2026-04-136 min read

AI Builder Camp — Detailed Report

educationaicurriculumcertificationweb-development

Project Origin

AI Builder Camp is a 3-day AI hands-on course designed for Hong Kong secondary school students (Form 1 to Form 6), co-conceived by Brendan and Ian.

Target Audience Needs:

  • Hong Kong secondary students are already using ChatGPT and other AI tools, but remain at the "can use it" level without deeper understanding
  • Existing STEM courses focus on Scratch, robotics, etc., missing the technologies actually used in the AI industry
  • Parents want verifiable learning outcomes, not just a "completion certificate"
  • Course designed for zero prerequisites — students just need their own laptop

Core Philosophy: "Don't just chat with AI — learn to build your own AI Agent and run AI on your own computer."

Course Design

3-Day Curriculum

Day 1: AI Literacy and Model Awareness

  • "Real or Fake Image" identification game as opener
  • Comparing mainstream AI models
  • Testing AI hallucinations
  • WHO-WHAT-WHY source evaluation framework
  • Local AI model installation (Ollama)

Day 2: AI Agent Hands-On

  • Understanding the difference between Agents and chat tools
  • Pair work: build an AI assistant that can search for information and fact-check
  • Cross-testing each other's Agents
  • Prompt structure and workflow design

Day 3: Projects and Presentations

  • Self-selected topic personal AI project (fake news detection, AI image classifier, etc.)
  • Peer evaluation
  • Portfolio page creation
  • Mentor feedback and reflection sharing

Why These Topics

  • AI Model Awareness: Understand different AI models' capabilities and limitations, rather than blindly using one
  • Local Deployment: Emphasize "running AI on your own computer" experience, differentiating from cloud-only tools
  • AI Agents: The frontier of current AI applications, exposing students to technology with real practical utility
  • AI Literacy and Critical Thinking: Inspired by Finland's AI education model, integrating real/fake identification, source verification, and critical thinking — upgrading from "teaching students to use AI" to "teaching students to understand AI before using it"

Teaching Method Highlights

  • Questions First: Every segment begins with a question ("Is this image AI-generated?" "Is what AI says always correct?")
  • Pair Work: Two-person teams for mutual testing, challenging, and error-finding
  • Peer Evaluation: Students score each other using structured rubrics
  • Reflection Sharing: End-of-day reflection sessions

Website Development

Technical Architecture

The website is a pure frontend static page (single HTML file), no backend required, simple deployment.

Technology: Pure HTML + CSS, no JavaScript framework dependencies. Google Fonts (Noto Sans TC, JetBrains Mono, DM Sans). CSS animations and interactive effects. Responsive design (desktop, tablet, mobile).

Website Versions

Two versions were developed:

  1. ai-builder-camp-landing.html (initial version)

    • Cleaner design, Chinese interface
    • Basic course introduction, curriculum, learning outcomes sections
    • Mobile fixed-bottom CTA button

  2. ChatGPT-AI-Builder-Camp-Preview.html (advanced version, deployed to Cloudflare)

    • More refined visual design, dark tech aesthetic
    • Terminal simulator animation (showcasing 3-day course command-line interactions)
    • Floating light orb background animation + grid overlay
    • Complete section structure: Hero -> Why Different -> Curriculum -> Outcomes -> Extended Path -> For Parents -> CTA

Special Interactive Effects

  • Terminal Simulator: Hero section right side displays a simulated terminal interface with typewriter effect showing 3-day course command-line operations
  • Floating Light Orbs: Background CSS @keyframes animated gradient orbs
  • Card Hover Effects: All feature cards disable hover on touch devices for better mobile experience
  • Digital Badge SVGs: 4 badges designed with gradient SVG graphics

Deployment

  • Cloudflare Pages using Wrangler CLI
  • Public URL: https://ai-builder-camp.pages.dev/
  • Local Preview: Python HTTP server for local network mobile preview

Certification System Design

4-Tier Certification

Tier 01: Course Certificate — With skill checklist and assessment items, clearly listing mastered capabilities.

Tier 02: Skill Transcript — Bullet-point record of completed skill modules, project outcomes, and mentor feedback.

Tier 03: Digital Badge (Open Badge) — Verifiable digital badge compliant with international Open Badge standards, suitable for LinkedIn and university applications.

Tier 04: Portfolio — Portfolio page containing project descriptions, demo videos, and mentor comments.

4 Digital Badges

  1. AI Foundations — Model awareness and AI fundamentals
  2. Agent Builder — Agent logic and tool invocation
  3. Local Deploy — Local deployment and model operation
  4. Project Showcase — Project presentation and mentor evaluation

Design Rationale

  • Market Differentiation: Typical courses only provide a "completion certificate" — 4 tiers make outcomes more concrete and persuasive
  • University Application Ready: Can be organized into portfolio supplementary materials for STEAM, innovation, or overseas applications
  • Verifiability: Open Badge is an international standard — verifiable, displayable, professionally credible
  • Extended Value: Transforms "I learned AI" into "I built this AI project" with concrete proof

Extension Certification Paths

Post-course extension paths (additional cost):

  • Google AI Essentials — Entry-level extension
  • IBM SkillsBuild — External skills learning path for self-study
  • USAII CAIP — Advanced challenge for higher-level students

Current Status

Completed

  • Full 3-day curriculum design
  • 4-tier certification system planning
  • Two website versions designed and developed
  • Deployed to Cloudflare Pages (https://ai-builder-camp.pages.dev/)
  • Content iteration integrating AI literacy, critical thinking, and real/fake identification
  • AI-generated image assets (Gemini Flash and Imagen 4)
  • Mobile responsive optimization

Enrollment Status

  • Website indicates "2026 Summer Session - Now Accepting Registration"
  • Registration via email: hello@aibuildercamp.hk
  • Early bird and group enrollment discounts available

Challenges and Learnings

Challenges Encountered

  1. AI Image Chinese Text Rendering — Gemini 2.5 Flash renders Traditional Chinese characters as garbled text. Solution: generate text-free images, overlay correct Chinese using HTML/CSS. Later used Imagen 4 for higher quality.

  2. Mobile Adaptation — Digital badge icons too small on mobile, required repeated size adjustments. Changed to 2x2 grid layout with significantly increased sizes.

  3. Course Content Positioning — Initial focus was purely technical (model comparison, local deployment, agent building). After feedback, added more "why learn AI" narrative. Referenced Finland's AI literacy education model, integrating critical thinking, real/fake identification, pair work, and peer evaluation without explicitly mentioning Finland.

  4. Website Deployment — Cloudflare account required email verification for Pages API access. Large images (8.5MB PNG) caused slow page loads, compressed to JPEG (~650KB).

Key Learnings

  1. Teaching design is not just about content: Finland's approach — "ask questions first, then give tools" — is more effective than "directly teach tools." Students need to understand AI's boundaries and risks before truly leveraging it.

  2. Course website is the first impression: For parents, website quality directly affects their perception of course professionalism. Dark tech aesthetic + terminal simulator effectively communicates "this is not an ordinary children's tech course."

  3. AI tool limitations: AI image generation still has clear limitations with Chinese text rendering. Hybrid approach (AI images + frontend text overlay) is currently the most practical solution.

  4. Iteration beats one-shot: Multiple iterations — adding Finnish pedagogy elements, adjusting mobile layout, optimizing images — each cycle improved the product.

Report Date: April 13, 2026