From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Table of Contents
Chapter 1: Introduction
Chapter 2: HTML Basics
- HTML Basics Cheat Sheet
- What is HTML
- Structure of a HTML Document
- Tags and Elements
- Special Symbols
- Links
- Images
- Lists
- Tables
- HTML Only Game Project
- HTML Only Game Solution
- Bonus article
Chapter 3: CSS Basics
- CSS Basics Cheat Sheet
- What is CSS
- Setting up Style Sheets
- Blocks, Spans, and Selectors
- Classes
- Colours
- Hexadecimal color codes
- Fonts
- Box Model
- Link styles
- Styling Lists
- Styling Tables
- Webbus project
- Webbus solution
- Christmas Total Conversion
Chapter 4: JavaScript Basics
- 4.1 Cheat Sheets
- 4.2 History of JavaScript
- 4.3 Comment Controversy
- 4.4 Variables
- 4.5 (extra) How Computers Represent Data
- 4.6 Math
- 4.7 Math functions
- 4.8 Strings
- 4.9 Calculating true and false
- 4.10 If (Conditional statements)
- 4.11 Nested condition
- 4.12 Switch statement
- 4.13 Functions
- 4.14 Looping
- 4.15 Nested loops
- 4.16 Accessing the Web page
- 4.17 Events
- 4.18 Project: Where’s Wendy
- 4.19 Project implementation
Chapter 5: HTML Forms
- 5.1 Cheat Sheets
- 5.2 The client-server model
- 5.3 The Form tag
- 5.4 Inputting text
- 5.5 Specialized text formats
- 5.6 Form Cosmetics
- 5.7 checkboxes & radio buttons
- 5.8 Numbers and Dates
- 5.9 special purpose input types
- 5.10 Option Select
- 5.11 Data Lists
- 5.12 Output
- 5.13 dialog box concepts
- 5.14 using dialog boxes
- 5.15 Validating forms
- 5.16 JavaScript Validation
- 5.17 Project: Trivia
- 5.18 Trivia Project Solution
Chapter 6: CSS Layout
- 6.1 Cheat Sheets
- 6.2 The Layout problem
- 6.3 Display blocks
- 6.4 Flexible Boxes
- 6.5 Grid
- 6.6 Grid Templates
- 6.7 Multiple columns
- 6.8 Floating
- 6.9 Position
- 6.10 Media Queries
- 6.11 Project: Tic-Tac-Toe
- 6.12 Project Solution
Chapter 7: Arrays and Objects
- 7.1 Arrays and Objects Cheat Sheet
- 7.2 Arrays and Objects Overview
- 7.3 Arrays
- 7.4 Tic-Tac-Toe with Arrays Target release date July 6th, 2025
- 7.5 Multidimensional arrays Target release date July 13th, 2025
- 7.6 Associative arrays Target release date July 20th, 2025
- 7.7 Creating Objects Target release date July 27th, 2025
- 7.8 Constructing Classes Target release date August 10th, 2025
- 7.9 Inheritance Target release date August 17th, 2025
- 7.10 Polymorphism and Duck Typing Target release date August 24th, 2025
- 7.11 Binding Target release date September 7th, 2025
- 7.12 closures Target release date September 14th, 2025
- 7.13 JSON Target release date September 21st, 2025
- 7.14 Project Threes Target release date October 5th, 2025
- 7.15 Project Threes Solution Target release date October 19th, 2025
About this book
This web edition of From Scratch Web Games is the first draft version of the book with sections being released on a weekly basis (with some interruptions). The goal is to teach the reader how to create games using HTML, CSS, and JavaScript from scratch. By from scratch, I mean being able to take a text editor or IDE and create a game using no third-party libraries. While this may not necessarily be the approach you would use for a commercial product, having the knowledge to do this makes working on any web-based project easier as you will understand the underlying work even if you are using third-party materials.
Most of the chapters will have a game-related project that builds on your current knowledge. My version of the game will be posted on Spelchan.com with the repository being TBD. It is urged you attempt the projects on your own before looking at my code or solution sections as the best way of learning is by doing.