GameCraft: Build Your Own Web Game

Welcome to GameCraft! Over four sessions, you will learn to create your own interactive web games from scratch — no programming experience required!

What You Will Build

By the end of this course, you will have:

  • A working web game that runs in any browser
  • Your own GitHub portfolio with published games
  • Skills in HTML, CSS, JavaScript, GitHub Pages, and React
  • The ability to turn your game ideas into reality!

Course Sessions

Session 1: Your First Interactive Web Page

Build: A colorful button that responds to clicks
Learn: HTML structure, CSS styling, JavaScript basics
No prerequisites — we start from zero!

Session 2: Game Time — Click Speed and Gem Catcher

Build: A click speed challenge and a gem catcher game with canvas animation
Learn: Event listeners, game state, timers, collision detection, VS Code, Git
Prerequisites: Session 1

Session 3: Polish, Portfolio, and Publish

Build: Better versions of your Session 2 games plus a portfolio homepage
Learn: localStorage, CSS animations, portfolio design, GitHub Pages deployment
Prerequisites: Sessions 1–2

Session 4: React Without npm

Build: Tic-Tac-Toe with React in a single HTML file
Learn: React components, JSX, state management, props, CDN-based workflow
Prerequisites: Sessions 1–3

Tools We Use

  1. Computer with internet access
  2. Web browser (Chrome, Firefox, Safari, or Edge)
  3. VS Code — code editor (already installed on your machine)
  4. GitHub account (free) — Sign up here

Course Philosophy

Learn by Building: Every session, you create something that works. Progress Together: Each lesson builds on the previous one. Real Tools: You use the same tools professional developers use. Your Creativity: The examples are starting points — make them your own!

Skills You Will Develop

By the end of GameCraft, you will be able to:

  • Build interactive web pages using HTML, CSS, and JavaScript
  • Publish web projects with GitHub Pages
  • Develop web-based games using React without installing packages
  • Apply design and logic to create fun, playable experiences
  • Strengthen problem-solving, collaboration, and creative thinking
  • Deploy and share your projects online with GitHub Pages

Ready to Start?

Head to Session 1 to build your first interactive web page!