{ Coding for Kids }

Learn JavaScript

Build the Catch the Culprit Game

The best way to learn to code is to build toward a goal. { Coding for Kids } is designed to get you there. This site hosts all the code for easy reference. To understand and learn about the code, you can purchase a copy of the book here.

The goal of the game

Our goal is to give you practical experience coding a game from start to finish. You will utilize HTML, CSS< and JavaScript to reach this goal.

What's on this site?

The main site contains tutorials for many aspects of JavaScript. It's a detailed reference guide with examples to look at.

The code for Catch the Culprit is also here. If you're stuck getting your code to work, you can check the code here to see what's up.

What you'll learn

We cover a lot of ground in the book that will help you build the basics you need to create your own programs.

Punctuation and Syntax

Learn about camelCase and why we need it.
- It's like using hashtags, but a little different.
Understand the uses of whitespace and formatting your code.
- Setting up an outline so things are easier to read.
Learn how to add helpful comments to your code.
- Leave messages for your future self.
Learn why we use different brackets in different situations.
- From square brackets [] to round brackets ()
  to braces {} to quotation marks '' and "".

Variables

Learn how to declare (create) your own variables.
- We talk a little about local and global variables.
Learn the difference between variable types.
- Strings (words), numbers, and true/false flags behave differently
Use variable values to give dynamic feedback
- Tell a player what move the computer made.
Change variable values with mathematical operators
- Increase the player's score.

Objects

Organize variables into objects
- Have separate sets of questions for a quiz program.
Use object properties to access the information you need.
- Select a question to display, not the answer.
Using array notation for objects to access their properties.
- We can use variables to access properties.

Arrays

Learn how to create an array.
- Make a list of word fragments to mix together.
Learn how to access array elements using index numbers.
- Like needing to know the first thing that's on the list.
Learn how to add to and remove from an existing array.
- Remove questions from a list so they're not asked twice.

Functions

Create functions by wrapping your existing code.
- It's a form of refactoring your code.
Learn to call functions when you need them.
- When you need to start a game over.
Learn to create new functions from scratch.
- Display the score on the screen.
Learn to send values back from a function and use them.
- Find the area of a cube.

Conditionals

Teach your program to make decisions.
- What kind of fortune did you get today?
Learn to develop conditional if checks in your code.
- Figure out whether or not a player won the game.
Learn when to use an else block.
- If the player doesn't win the game that round, what happens next?
Learn how to use nested if/else statements.
- When you need to check for several things.

Loops

Learn why loops are so important to programming.
- What good is a game that stops after a single command?
Learn the difference between while and for loops.
- What situation best fits each one?
Learn how to loop through the elements of an array.
- If you want to display the path you took, you can format each one.

JavaScript's Math Object

Learn to call for random numbers.
- If you want to randomize points values.
Learn to randomly select an element from an array.
- If you want to pull randomly from a list of clues.
Learn to use max and min to control the numbers you need.
- Control how many points of damage you do in battle.

HTML Basics

Learn how to create the files you need to make a webpage.
- Make an app you can click through instead of typing everything.
Learn how to plan and create a user interface and create it with div elements.
- Decide where the buttons should go.
Learn how to add images to the game.
- Add photos of monsters.
Learn a method for making a dynamic set of buttons.
- Have buttons only when you need them and getting rid of the ones you don't.

CSS Basics

Learn some basic formatting for your HTML.
- Choosing the fonts and colors.
Learn how to add borders or add background colors.
- Design your own color scheme.
Learn a little about attribute inheritance.
- Like when settings are passed along and how to override them.