HTML/CSS Archives - CodeWizardsHQ

JavaScript Tutorial for Kids: Disappearing Snowman

Daniel Schroeder — Mon, 05 Dec 2022 14:00:00 +0000

Online coding academy for kids and teens ages 8-18. Enroll to learn real-world programming languages like Python, Java, HTML/CSS, JavaScript, and more!

Guess the right word before your snowman melts!

We’ve created this tutorial just in time for the holidays. Code a fun word game that you can share with family and friends.

[Download] JavaScript Projects Source Code Get the full source code for seven JavaScript project examples. Download Now

This Christmas-themed guessing game uses simple JavaScript code to power the game functions. Try coding this game following the tutorial and then customize it to make it your own.

Complete this JavaScript tutorial to make your own Disappearing Snowman Game.

Play the completed Disappearing Snowman Game.

Recommended: JavaScript for Kids

Tutorial Steps

Step 1: Fade keyboard keys on click
Step 2: Check for a match when clicking a keyboard key
Step 3: Remove a snowman part when there’s no match for a clicked keyboard key
Step 4: Check if the player loses
Step 5: Check if the player wins
Finished project!

What you need:

1. Text editor

We’ll be using the CodeWizardsHQ editor to write and run our JavaScript code.

You can also use an online text editor like replit that allows you to author and run JavaScript programs in a web browser. Make sure you have all of the project base files in order for your program to work correctly.

2. Base Files

Download the base files and open the app.js file. This folder contains all the images and files you will need to complete your game.

The HTML file holds the page title, emojis, and Player/Computer choice text.
The CSS file adds some styling to our page and helps lay out the HTML elements.
The error-handler.js file will display a big red error box on the page if you make an error while typing out your JavaScript code.
The app.js file is where we’ll write our application code.

If you’re a CodeWizardsHQ student, download the x_hour_of_code_2022 project for the completed code. The starter files are in the javascript-projects/disappearing-snowman/starter-files directory.

Note: The index.html file (which executes the JavaScript) expects the filename app.js so you must use the same file name if you’re using your own text editor! You’ll edit the app.js file but you’ll always run the index.html file.

This tutorial is for beginner JavaScript programmers ages 8+. It assumes you understand basic HTML/CSS and JavaScript. Let’s get started!

Step 1: Fade keyboard keys on click

When someone uses our app, they’ll try to guess the hidden word one letter at a time by clicking the keyboard on the page with their mouse. In this step, we’ll fade out each letter they click and ensure that no more logic runs on a faded-out letter.

In the styles.css file there’s a CSS class to make a keyboard key look faded out called selected. We’ll attach this class to whatever keyboard key the user clicks using JavaScript. You don’t have to type anything in the CSS file, this is just provided as a reference so you know why attaching this class to an HTML element makes it look faded out.

/* Added by JavaScript */

.hidden {
    display: none;
}

.selected {
    opacity: 0.3;
}

Navigate back to your app.js file to add the selected class to any key the user clicks.

First, create a variable called keyboardContainer
Use the document.querySelector() function to reference the element with the ID of keyboard-container and store it in the keyboardContainer variable
Then, we need to run code whenever an element in the keyboardContainer is clicked. We can use the addEventListener() function to ensure a function called handleKeyboardClick() (which we’ll define in just a minute) will run whenever a user clicks inside the keyboardContainer. The click event is triggered by clicking your mouse anywhere inside the keyboardContainer HTML element.

var words = ["APPLE", "PANCAKES", "COMPUTER", "PARIS", "MICROPHONE", "PASTRY"];
var randomWord = getRandomWord(words);

var keyboardContainer = document.querySelector("#keyboard-container");
keyboardContainer.addEventListener("click", handleKeyboardClick);

Create the function handleKeyboardClick() and define a single parameter called event that will be passed to this function whenever the keyboardContainer is clicked.
Whenever our keyboardContainer is clicked, we’ll run the handleKeyboardClick() function.

keyboardContainer.addEventListener("click", handleKeyboardClick);

generateHiddenWord(randomWord);

function handleKeyboardClick(event) {

}

Create a variable called clickedElement. We can get information about the element that was clicked by using the target property. We’ll store the element that was clicked in the variable.
Anytime a user clicks inside the keyboardContainer element our click event listener will fire. But, we only want to continue if they click on a letter. Check if the clickedElement does not (!) contain the letter class or if (||) contains the selected class (which we’ll add next). If either of those conditions is true, we’ll use the return keyword to immediately exit the function.
Finally, we’ll add the selected class to our clickedElement to ensure the CSS styles are applied to make it fade out a bit.

function handleKeyboardClick(event) {

    var clickedElement = event.target;

    if (!clickedElement.classList.contains("letter") || clickedElement.classList.contains("selected")) return;

    clickedElement.classList.add("selected");

}

Hint: Test this out by clicking a few of the keys on the HTML page. They should fade out as you click them!

Step 1 Output:

Step 2: Check for a match when clicking a keyboard key

In this step, we’ll check to see if the keyboard key a user clicks matches any of the letters in the hidden word. If so, we’ll show all of the matching letters in the hidden word.

First, let’s define a function called checkForMatch(). This function will take the clickedLetter as a parameter and will check to see if it matches any of the hidden letters.
Create a variable called hiddenLetterElements where we’ll store references to the hidden letters. We’ll need to know all of the hidden letters on the page in order to compare them with the clickedLetter parameter. To get them, use document.querySelectorAll() and select all elements with the class hidden. The querySelectorAll() method returns an array-like object that represents any HTML elements with the selector passed into the parentheses.

generateHiddenWord(randomWord);

function checkForMatch(clickedLetter) {
  var hiddenLetterElements = document.querySelectorAll(".hidden");
}

function handleKeyboardClick(event) {
  ...
}

Once we have all of the hiddenLetterElements, we can use a for...of loop to loop through the hidden letters one at a time. We’ll compare them with the clickedLetter that was passed in as a parameter to the function.
In the for...of loop, create a variable called hiddenLetter and get the textContent of the hiddenLetterElement.
Then, use a conditional statement to compare the hiddenLetter with our clickedLetter parameter and see if they are the same. The === operator ensures that both items it compares are equal.
The last thing we need to do in our checkForMatch() function is to remove the hidden class from any hiddenLetterElement whose letter matches the clickedLetter. The remove() method of the classList object allows us to remove a class from an HTML element.

function checkForMatch(clickedLetter) {
    var hiddenLetterElements = document.querySelectorAll(".hidden");

    for (var hiddenLetterElement of hiddenLetterElements) {
        var hiddenLetter = hiddenLetterElement.textContent;
        if (hiddenLetter === clickedLetter) {
            hiddenLetterElement.classList.remove("hidden");
        }
    }
}

Finally, back in our handleKeyboardClick() function, create a clickedLetter variable to store the textContent of the clickedElement.
Then we’ll pass this variable to our new checkForMatch() function. This ensures that whenever a user clicks a keyboard letter, handleKeyboardClick() will check for a match with that letter and all of the hidden letters.
Run your program and try clicking a few of the keyboard letters. You should see the ones that match the hidden letters show up on the page!

function handleKeyboardClick(event) {
    var clickedElement = event.target;
   
    if (!clickedElement.classList.contains("letter") || clickedElement.classList.contains("selected")) return;

    clickedElement.classList.add("selected");

    var clickedLetter = clickedElement.textContent;
    checkForMatch(clickedLetter);

}

Step 2 Output:

Step 3: Remove a snowman part when there’s no match for a clicked keyboard key

Now that we can tell if a user found a match or not, we need to remove a snowman part whenever there isn’t a match. This makes it seem like the snowman is melting if you guess a letter incorrectly!

Our snowman is made up of a few parts that are distinguished by CSS classes. The main parts have the classes hat, face, scarf, hands, body-top, body-middle, and body-bottom. You can see these parts if you view the HTML in index.html.

index.html (no changes here, just shown for context)

In app.js, create an array called snowmanParts and store each of the classnames. Order them from top (hat) to bottom (body-bottom). Note that each snowman part starts with a dot (.). This is a CSS notation that indicates each string represents a CSS class, and we’ll use the strings in the snowmanParts array to query the correct HTML element by its class name.

app.js

var words = ["APPLE", "PANCAKES", "COMPUTER", "PARIS", "MICROPHONE", "PASTRY"];
var randomWord = getRandomWord(words);
var keyboardContainer = document.querySelector("#keyboard-container");
var snowmanParts = [".hat", ".face", ".scarf", ".hands", ".body-top", ".body-middle", ".body-bottom"];

keyboardContainer.addEventListener("click", handleKeyboardClick);

Create a function called removeSnowmanPart(). This function will remove a single snowman part associated with those main classes each time the user guesses a letter that isn’t one of the hidden letters.
To remove the snowman parts from top-to-bottom, we need to remove the first item from the array each time removeSnowmanPart() is called. To remove the first item from an array, you use the Array.shift() method. We’ll store the removed item (which represents a CSS class) in a variable called snowmanPart.
Next, create a variable called partsToRemove to store these parts. Get the HTML element that represents the snowmanPart using document.querySelectorAll(). Remember, snowmanPart is a CSS selector (it starts with a dot) and querySelectorAll() will give us an array-like object of all HTML elements matching the selector we give it.

function removeSnowmanPart() {
    var snowmanPart = snowmanParts.shift();
    var partsToRemove = document.querySelectorAll(snowmanPart);
}

The final step of our function definition will be to loop through all of the partsToRemove and remove each part from the HTML document. To do this, we can create a for...of loop and then call the element.remove() function on each partToRemove. The element.remove() function removes an HTML element from the page.

function removeSnowmanPart() {
    var snowmanPart = snowmanParts.shift();
    var partsToRemove = document.querySelectorAll(snowmanPart);

    for (var partToRemove of partsToRemove) {
        partToRemove.remove();
    }
}

Before we can determine if the user guessed incorrectly, we’ll need to edit the checkForMatch() function to return a boolean value: true or false. We start hasMatch as false, and only change it to true if there is a match when we are comparing the clickedLetter to the hiddenLetter in the for...of loop.
The removeSnowmanPart() function should be called only when the user doesn’t guess the correct hidden letter in our handleKeyboardClick() function. The checkForMatch() function will return true if we found a match, and false otherwise.

function checkForMatch(clickedLetter) {
    var hiddenLetterElements = document.querySelectorAll(".hidden");
    var hasMatch = false;
    for (var hiddenLetterElement of hiddenLetterElements) {
        var hiddenLetter = hiddenLetterElement.textContent;
        if (hiddenLetter === clickedLetter) {
            hiddenLetterElement.classList.remove("hidden");
            hasMatch = true;
        }
    }

    return hasMatch;
}

Finally, in our handleKeyboardClick() function, we can create a variable called hasMatch and store the returned value from the checkForMatch() function. Remember, this variable is either the boolean value true or false.
We can then use that value in a conditional statement and call the removeSnowmanPart() function if there was no match. The ! operator means “not”, so we’re saying “If there’s no match, remove a snowman part” in this code sample.

function handleKeyboardClick(event) {
    var clickedElement = event.target;

    if (!clickedElement.classList.contains("letter") || clickedElement.classList.contains("selected")) return;

    clickedElement.classList.add("selected");

    var clickedLetter = clickedElement.textContent;
    var hasMatch = checkForMatch(clickedLetter);

    if (!hasMatch) {
        removeSnowmanPart();
    }
}

Step 3 Output

Step 4: Check if the player loses

A game is no fun without winners and losers! In this step, we’ll show a message if the user guesses incorrectly too many times and the snowman melts before they guess the hidden word.

We’ll create a function called checkForLoser() to check if the snowman has melted and the user loses. You lose when the snowman has melted, and in our program we’re removing a part from the snowmanParts array every time a user guesses a letter that isn’t in the hidden word. The snowman will be “melted” when there are no parts left in the snowmanParts array. We can check if there are no parts left in the snowmanParts array using a conditional statement and by comparing the length property of the snowmanParts array to 0.

function checkForLoser() {
    if (snowmanParts.length === 0) {

    }
}

In our conditional statement, we’ll add two messages to the page. The first will replace all the HTML in the snowman-container element with the text “You lost, game over!”. The second will replace all of the HTML in the keyboardContainer with the text “The word was: [RANDOM WORD]”. The RANDOM WORD will be whatever value is stored in the randomWord variable. Note that we can query and adjust the snowman-container on a single line since we don’t already have a reference to that HTML element stored in a variable.

function checkForLoser() {
    if (snowmanParts.length === 0) {
        document.querySelector("#snowman-container").innerHTML = "You lost, game over!";
        keyboardContainer.innerHTML = `The word was: ${randomWord}
`; 

    }
}

Now that our checkForLoser() function is working, we need to call it whenever the user clicks a key on the keyboard and the letter doesn’t match a letter in the hidden word. We’ve already got a conditional statement in the handleKeyboardClick() function to check if the user didn’t guess a matching letter, so we can call our checkForLoser() function after the removeSnowmanPart() function. This will ensure that we only check if the snowman is melted after removing a snowman part.

function handleKeyboardClick(event) {
    var clickedElement = event.target;

    if (!clickedElement.classList.contains("letter") || clickedElement.classList.contains("selected")) return;

    clickedElement.classList.add("selected");

    var clickedLetter = clickedElement.textContent;
    var hasMatch = checkForMatch(clickedLetter);

    if (!hasMatch) {
        removeSnowmanPart();
        checkForLoser();
    }
}

Step 4 Output

Step 5: Check if the player wins

For our final step, we’ll show a message if the player guesses the hidden word without melting the snowman!

First, we’ll create a function called checkForWinner(). A user wins when there are no more hidden letters, so this function’s job will be to show a winning message when there are no more hidden letters on the page.
Create a variable called hiddenLetterElements. To check for hidden letters, we first need a reference to all of the elements on the page with the class hidden. We can use document.querySelectorAll() to get an array of all the HTML elements with the class hidden and store them in hiddenLetterElements.

function checkForWinner() {
    var hiddenLetterElements = document.querySelectorAll(".hidden");
}

We can check the length property of the hiddenLetterElements array to see if there are any more HTML elements with the hidden class on the page. If the length property is 0, there are no more hidden letters on the page.
When there are no more hidden elements, the user wins! We can use the innerHTML property of the keyboardContainer to put a winning message on the page in place of the keyboard.

function checkForWinner() {
    var hiddenLetterElements = document.querySelectorAll(".hidden");
    if (hiddenLetterElements.length === 0) {
        keyboardContainer.innerHTML = "You win!";
    }
}

Finally, we need to call our checkForWinner() function every time the user guesses a letter correctly. We’re checking if the user guessed correctly in handleKeyboardClick(). We can add an else clause to our conditional statement at the end of that function and call our checkForWinner() function in the body of the else clause. This guarantees that every time the user has a match, we check if they won.

function handleKeyboardClick(event) {
    var clickedElement = event.target;

    if (!clickedElement.classList.contains("letter") || clickedElement.classList.contains("selected")) return;

    clickedElement.classList.add("selected");

    var clickedLetter = clickedElement.textContent;
    var hasMatch = checkForMatch(clickedLetter);

    if (!hasMatch) {
        removeSnowmanPart();
        checkForLoser();
    } else {
        checkForWinner();
    }
}

Step 5 Output

Your program is complete!

Check out the finished Disappearing Snowman Game.

Download the project files and open app.js to view the completed project.

This is just an example of what you can build when you learn JavaScript. There are plenty of exciting projects you can try and continue to build your skills.

Download JavaScript Projects Source Code

If you want to get the code behind 7 different JavaScript projects, download the full source code for free. You can use this code as an example to add to or inspire new projects. Enter your email below:

If you want to code more websites and games in JavaScript, join CodeWizardsHQ’s live coding classes for kids. It’s the most fun and effective way for kids to learn JavaScript and other real-world languages..

Students in all of our core tracks study JavaScript because of its importance in web development and beyond. They work with a live, expert instructor who supports them every step of the way. Classes are engaging and you’ll build a portfolio of websites, games, and apps as you learn.

Have fun and happy holidays!

The post JavaScript Tutorial for Kids: Disappearing Snowman appeared first on CodeWizardsHQ.

Kids guide to 200+ common programming terms and definitions

Margaret Choi — Wed, 25 Nov 2020 00:04:04 +0000

Online coding academy for kids and teens ages 8-18. Enroll to learn real-world programming languages like Python, Java, HTML/CSS, JavaScript, and more!

Imagine meeting a friend, but when they open their mouth to speak to you, all you hear is gibberish. When you ask them to explain, the explanation sounds like gibberish too.

When you’re hearing new programming terms for the first time, it can easily feel like that! Command-line? An array? Huh?

Kids who learn coding are learning a new language that is complete with its own syntax and vocabulary. While not exactly gibberish, it probably seems like it from the outside. Many of these coding terms, definitions, and concepts can feel as foreign as being on a new planet. So, it’s important to understand and feel comfortable with coding jargon before diving into the written portion.

Code documentation and terminology gives a foundation for how a language works and how specific parts of your code will function. By learning the most common programming terms and concepts, kids can feel confident as they read and learn more about specific languages.

This list of the 200 common programming and coding terms is simplified for kids to be easy to understand. Kids can use it as a reference if they are learning or as a refresher if they’ve already started coding.

Browse Terms: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A

Abstraction

Simplified code or technology that’s easy to use without knowing how it works.

Active Record

Information in a database that’s presented to a user. This term is common in MVC (Model, View, Controller) development.

Agile Software Development

A process of building software in stages. Work is divided into short bursts called sprints. Separate teams may work on different parts of a project.

AJAX

A method for getting data from a web server that uses XML, JavaScript, and HTML.

Algorithm

A sequence of problem-solving steps. For example: Add a series of values together, and then divide by the number of values. These steps produce a mean or average.

Angular.js

A JavaScript front end framework for building websites. A collection of templates and pre-written code.

Apache

Apache, or Apache HTTP Server, is an open-source and free web server software. Apache had a significant role in the initial growth of the internet and is also the “A” in LAMP Stack.

API

An application programming interface (API) allows interactions between multiple software programs so programmers have access to data and info from external software. The Google Maps API lets people use satellite photos and maps in their own programs.

Apprenticeship

An agreement between an employer and an employee. The apprentice (employee) gets training and pay in exchange for work.

Argument

A number, text string, or other value required for a function to run its code. An argument is the x in f(x) = y.

Arithmetic Operators

These operators are used with numbers to perform basic math, for example “+” for addition. Computers have to add and subtract, multiply and divide to do almost anything.

Array

A single variable that contains a list of data. For example, myNumbers = [0,1,2,3]. Here, myNumbers is an array of numbers.

ASCII

American Standard Code for Information Interchange (ASCII) is a system for electronic communication. It has 128 numbers that stand for letters and other symbols. ASCII is the same all over the world.

Assignment Operators

An operator that assigns a value to a variable. For example, “=” in Python assigns a value on the right to the variable on the left.

Asynchronous Learning

Learning that may take place at a different time for each student. The material is usually recorded or pre-made.

Asynchronous Programming Languages

A programming language that doesn’t have to do things in the order they are written. Instead, it can do many things at once. For example, JavaScript.

Augmented Reality

Software that puts digital objects on images or videos of the real world. AR (Augmented Reality) is popular on smartphones.

Autonomous

Self-guiding and able to work independently without input from a person. Many drones and some cars are autonomous.

Recommended: Coding for Teens

B

Back End

The server side of the internet that the user can’t see. The back end stores, retrieves, and modifies data, it’s essentially the brains of a website.

Backbone.js

A JavaScript library used mostly for one-page web apps to give structure and handle user input and interactivity.

Binary

A system of two possible states, zero and one. Computers operate in binary, meaning they store data and perform calculations using only zeros and ones.

Binary Alphabet

The numbers 0 and 1.

Binary Numbers

Combinations of zeroes and ones that make up a computer program.

Bit

A single 0 or 1. It’s the smallest unit of information in computing and digital communications.

Block-based Programming Language

A visual programming language. Block-based programming lets users drag and drop blocks of code to make programs (as opposed to writing text). For example, Scratch is a block programming language.

Blockly

A block programming language created by Code.org. It’s used to teach kids how to code.

Boolean

The “true or false” logic that powers computers. The boolean data type has one of two possible values: it’s either true or false.

Bootstrap (aka Twitter Bootstrap)

An open-source framework. A group of templates for building the front end of a website. A large set of HTML files, CSS stylesheets, and JavaScript.

Bug

Broken code that causes a program to malfunction. Bugs often crash a program or make an error message appear.

Build

To build a program is to make it ready for users. Coders may use special tools to create “builds”, or finished applications. First, coding, testing, and debugging must be completed.

Byte

A byte is eight bits. For example, 0000 0001.

C

C++

A powerful programming language. It’s used to build fast programs. C++ is common in computerized electronic devices.

Call (a function)

A snippet of code that makes a function begin.

Call (a variable)

To call a variable is to use it somewhere in a program.

Camel Case

A form of capitalization used for naming variables. The first letter is always lowercase, and the first letter of every word after that is uppercase. For example, “thisVariable” is in camelcase.

Char

An abbreviation of the word “character.” It refers to a single letter, number, or symbol.

Class (HTML and CSS)

The class attribute specifies one or more class names for an HTML element. It’s mostly used to point to a class in a CSS page.

Class (Object Oriented Programming)

A template that defines the qualities of everything that belongs to it. Each member of a class is an object.

Click

To press the button on a computer mouse.

Cloud

A remote data storage location, such as Dropbox. The cloud is a broad term that refers to general internet storage or services.

Code

The written content of a computer program. Code tells the computer what to do, where to store information, and what to show the user.

Code Review

A process of looking through code for mistakes or bugs. Programmers sometimes do code reviews in teams. This increases their ability to find and fix errors.

Coding

The process of writing a computer program. Coding is often the majority of what software engineers do.

Coding Challenge

A problem given to a programmer during a job interview or at school. The programmer must solve it with code, and in the most efficient or effective way possible.

Coding Languages

A human-readable language used to make computer programs. C, Java, and Python are examples of coding languages.

Command

An order the computer must carry out. Copy, Paste, and Print are examples of commands.

Command-line

A computer program that works with text-only input from a user.

Command-line Interface

A text-based way to interact with a computer. There are no buttons, dropdowns, or clickable elements.

Compilation

The procedure that translates code into a format the computer can use. Some programming languages are called compiled languages. They have to be compiled before they can be used.

Compiler

A program that changes text-based code into the code a computer understands. The result is an application, often a .exe file.

Computational Thinking

Reformatting a problem so it becomes solvable by a computer.

Computer Program

A bundle of code that tells a computer what to do. Computer programs do all sorts of things. Some solve math problems. Some play music. Even video games are computer programs.

Computer Science

The ideas that make it possible to solve problems with computers. A computer scientist knows about bits, bytes, code, and memory.

Recommended: Computer Science Classes for Kids

Conditional Statements

A statement that helps a computer decide what to do next. A condition statement has an If/Then format. For example, If a = 1, then add a to b.

Constants

A number, text string, or symbol that never changes value while a program is running. Variables can increase or decrease in value. But a constant stays the same.

Crowdsourcing

The act of recruiting big groups of people to work on a project. People may work for free or for pay. But everyone contributes to the final goal.

CSS

The code that controls the appearance of a website. This includes things like font styles, colors, and margins. CSS stands for Cascading Style Sheets.

Cybersecurity

A field of computing that deals with the safety of anything stored on a computer. The primary goal is to prevent hackers from stealing data or money.

D

Data

Any information that can be stored or used in a computer program. Names, addresses, and phone numbers are data.

Data Science

The science of finding patterns in data with computers. Facebook, Google, and even the government rely on data science. It helps them make better decisions and more useful products.

Data Structures

The formats used to store and organize data in a computer program. Data structures make information as easy to access as possible.

Data Types

The kind of information that a variable or constant can hold. Examples include strings, integers, and booleans.

Database (dbms)

A digital vault that stores information. Databases look like tables in a spreadsheet. A website stores usernames and passwords in a database.

Debugging

The process of looking for and repairing coding errors. Debugging is an important part of software development.

Declaration

A single word or symbol used to describe a function or variable. It defines the type of variable or function so the compiler or interpreter knows what to do with it.

Decompose

To divide a complex challenge into smaller chunks. The goal is to make it easier to solve.

Define (a function)

To create a function and the code that goes inside it. After defining a function, the programmer can call it when needed.

Deployment

The process of launching an application or releasing it to users.

Digital Footprint

Any piece of information you leave on a website. A blog post, a comment, or a “like” can be a digital footprint.

Django

A Python framework for the web. Django makes Python website development easier. It’s a collection of templates and libraries.

DNS (Domain Name Service)

A computer system that turns a written domain name into numbers. These numbers are called an IP (Internet Protocol) address. Computers need IP addresses to find websites.

Double-click

A quick pair of mouse clicks, usually to open an application.

Drag

To press and hold the button on a computer mouse, then move the mouse before releasing.

Drop

To let up on the mouse button after clicking and dragging.

DRY

DRY stands for Don’t Repeat Yourself. This principle states, “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”

DSL/Cable

A type of broadband (fast) internet service. It uses phone or coaxial cables.

Recommended: Coding Websites for Kids

E

Else Statements

An alternative inside an If statement. It essentially tells the computer, “Do one thing if something is true, or else do another thing if it’s not true.”

Endless Loop

A loop that never ends because the condition it depends on is always true. An endless loop is a bug. Every loop should end, otherwise, the program would be stuck.

Event

An event is something that triggers a response in a program. For example, a mouse click or a button press.

Event Handler

Code that responds to an event such as a mouse click or button press.

Exception

An error that may be caused by a user or missing piece of data.

Express.js

The backend framework for Node.js. Express is useful for modules and web apps. Developers can build APIs with Express.

Expression

An arithmetic statement such as 1+2 or x-y.

F

F.A.I.L.

An acronym for First Attempt In Learning. Failure is a regular part of the learning process.

Flask

Flask is a backend web framework written in Python. It’s an API of Python that lets us build up web applications quickly and easily without special tools or libraries.

For Loop

A block of code that repeats several times. The programmer must specify the number of times the code should repeat.

Framework

A set of “templates” that programmers use to build programs quickly. Frameworks may contain pre-written code, markup, and APIs. Web frameworks exist for the front end and back end.

Front End

The part of a computer program that a user sees and interacts with. The front end is also called the user interface.

Full Stack Developer

A developer who works on the back end and front end of a website.

Function

A chunk of code that takes input, manipulates it, and produces some kind of output. Programmers create a function just once, but they can use it over and over.

Function Call

A short snippet of code that triggers a function to run. After writing a function, you must call it whenever you want to use it.

Function Definition

The inner workings of a function. The code inside of a function that makes it work.

G

Git

A version control system that tracks changes to code. Git is open-source, meaning you can access it for free.

Github

An internet storage hub for code that works with Git.

H

HAML

HAML (HTML Abstraction Markup Language) is a templating system that cleans and simplifies your HTML. It’s designed to avoid writing inline code in a web document.

Hardcode

Permanent code. Code that a programmer can’t change easily or at all.

High-level Language

A programming language a person can read and understand. Python is a high level language. Machine code (for example, 00000001) is not.

HTML

HTML (HyperText Markup Language) is a markup language used to build basic websites. HTML determines what shows up on the page.

HTTP Request

The method a web browser uses to ask for information from a server. HTTP stands for HyperText Transfer Protocol.

I

IDE (Integrated Development Environment)

A program that developers use to write code. IDEs usually know a language’s keywords and can provide help. They can also run programs.

If Statement

A conditional statement. It executes a certain block of code if some condition is true.

Inheritance

The practice of basing a new piece of code on existing code. Programmers use inheritance to create an enhanced version of the original code.

Input

The information that goes into a computer. User input is one type, which includes text, clicks, and button presses.

IntelliJ

An integrated development environment (IDE) created for writing and running code. To start writing code in Java, you can use IntelliJ.

Internet

The internet is made of many computers and servers that are connected to each other. The web exists on the internet, but the internet is much larger than the world wide web.

IOS Swift

Swift is an Apple programming language. It combines elements from the C and Objective C languages.

IP Address

A number associated with a website or a device on the internet. Printers and computers have IP addresses.

Iteration

One pass of a loop. Each time a block of code is executed counts as one iteration of the for or while loop it belongs to.

J

Java

A programming language developed by Oracle. Java is popular for web and mobile applications.

JavaScript

A popular coding language for websites and web apps. JavaScript runs on the client side. That means it runs in the browser instead of the computer where the website “lives”.

JavaScript Framework

A web framework in JavaScript used to build apps and websites.

jQuery

A JavaScript library that makes it easy to change elements on a webpage.

JSON (JavaScript Object Notation)

A common data storage format used in many web apps. JSON files keep data organized.

Junior Developer

The first job for many coders. Junior developers work under the guidance of more experienced pros.

K

Keywords

Predefined words in a programming language. These words have a special meaning. In an integrated development environment (IDE), keywords appear in special colors.

L

LAMP Stack

LAMP stack uses Linux operating system, the Apache HTTP Server, MySQL, and the PHP programming language. LAMP stack is a popular open-source web platform used by large web companies like Tesla and Lyft.

Linter

A linter, or lint tool, is a basic static code analyzer that checks your program for potential stylistic and programming errors. You can often find linters in your code editor and they are available for various programming languages today.

Linux

Like Windows, Linux is an operating system. But it’s open-source, so it’s free to use. Linux is popular with developers and runs on most web servers.

Local Environment

A personal computer or a server. This is where coders run programs before launching them. A local environment lets coders see their software in action before showing it to the world.

Loop

A block of code that runs over and over. A loop is an important part of any video game or animation. Loops are present in almost all programs.

Low-level Language

A programming language that isn’t easy for a human to read. Low-level languages make fast computer programs, but they’re difficult to write.

M

Machine Language

Long combinations of zeroes and ones that power a computer. All programs have to get turned into machine language in order to run.

Machine Learning

A form of artificial intelligence where programs have the ability to automatically learn and improve from experience. Image recognition is a common type of machine learning.

Main Function

The first function called after a C or C++ program starts.

Markup Language

A simple language that determines what appears on a computer screen. HTML and XML are markup languages.

MEAN Stack

A complete framework for web development. MongoDB is the M. Express.js is the E. Angular.js is the A. Node.js is the N.

Micro:bit

A tiny computer used in programming courses for kids. The Micro:bit works with lots of sensors and electronic accessories.

MongoDB

A database for web applications. Mongo uses a JSON-like structure instead of rows and columns.

MVC

Used for many kinds of development, MVC is a three-part design pattern. It stands for Model View Controller. Each piece of MVC handles a different part of a program.

MySQL

The most common language used to put info into and take it out of databases. MySQL is often used with another language, like PHP.

N

Neural Networks

A computer program modeled after the human brain. Neural networks learn over time, just like people.

Node.js

Node.js is a programming tool that lets you run JavaScript code outside of a web browser.

Null

Empty or without value. Variables and columns in a database can sometimes be null.

O

Object Oriented Programming (OOP)

Programming with classes and objects. A class is simply a prototype that defines what its objects can do. Every object in the class has the class’s properties.

Object Related Database Management System (ORDBMS)

Two database models in one. It’s part relational database and part object oriented. It has objects and classes as well as tables with rows and columns.

Objects

A member of a class. It might help to think about a real-world analogy. For example, every person is an object that belongs to the class called “humans”.

Online

Connected to the internet. Someone can be online with a computer, a mobile phone, or another electronic device.

Open-Source Software Development

Software that is free for anyone to use. The code for open-source software is available to developers who want to work on it. They can make improvements and add features.

Operand

The variable or value that will be used in an operation. For example, x and y are operands in the x+y.

Operator

An arithmetic symbol such as a plus sign or a minus sign. Or a multiplication sign, division sign, greater than or less than sign.

OS (Operating System)

The software that makes a computer work. It’s responsible for organizing files. An operating system also determines what software can run on the machine.

Output

The content that comes out of a computer. Output may be text or numbers. It could even be sound or video.

P

Package

An organization tool for classes in Java. A package keeps large collections of files neatly ordered.

Packets

A block of information that moves from one computer to another.

Pair Programming

Two coders working together on a project. One person codes while the other watches and checks the code for errors.

Parameter

The input of a function. A parameter gets replaced by an argument when the function is called.

Pattern Matching

The process of looking for identical characters or data in a dataset.

Persistence

When a piece of data, information, or web page remains accessible. Persistent data doesn’t get deleted when you close the program.

PHP

A scripting language frequently used for websites. PHP uses tags like HTML, but a PHP website can do much more and the content can change with user input.

Pixel

The basic unit of digital displays. A pixel is a little square that can be one of many colors. Every image on a screen is made up of hundreds or even thousands of pixels.

Pointer

Like variables, pointers store information. But a pointer contains a memory address instead of data. It “points” to the address somewhere in computer memory.

Postgresql

An open-source database. To store or retrieve something, a programmer can write code in SQL.

Program

Written code that runs on a computer. Most programs consist of user interfaces and logic. Adobe Illustrator is a computer program. So is Microsoft Outlook.

Programming

The process of writing code that will become a computer program.

Programming Language

The keywords and special rules people use to write computer programs. Every language has some of its own rules and keywords, but they also have many things in common.

Project-based Learning

Learning by building real projects. It’s possible to learn just by studying concepts, but project-based learning is designed to be fun and to feel like real development.

Python

An open-source programming language. Python is popular because it’s somewhat easy to learn. Many big applications were made in Python including YouTube and DropBox.

R

A programming language used in data science.

React

A JavaScript library built by Facebook. Its main purpose is to help with user interface (UI) development.

React Native

A type of React that lets developers use the same code for different platforms.

Relational Database Management System (RDBMS)

A program for making and updating databases that use tables.

Repeat

To perform an action more than once.

REST / RESTful

A set of rules that makes it possible for computers to communicate with each other. REST (Representational State Transfer) makes the world wide web possible.

Ruby

Ruby is a programming language designed to be readable. It’s object oriented and useful for all kinds of applications. AirBnB and GitHub were built on Ruby.

Ruby on Rails

Ruby’s full-stack web framework. If you want to build web applications with Ruby, Rails makes it easier.

Run Program

To start a computer program.

Runtime

Runtime is the stretch of time when a computer program is running.

S

SASS

SASS (Syntactically Awesome Style Sheets) is a scripting language that is interpreted into Cascading Style Sheets (CSS). It helps you keep your CSS organized and lets you create style sheets faster.

Scratch

The block programming language developed by MIT. Scratch coding is a great first language for young coders. To build a program, all you need to do is click, drag, and drop blocks into place.

Scripting Language

Any language that doesn’t need to be compiled or interpreted. JavaScript is one example.

Scripts

Small programs that do limited steps. Scripts can be part of bigger programs.

Search Engine

Google, Bing, and Yahoo are search engines. They find websites and information based on keywords provided by the user.

Server

A computer that hosts websites and data. Servers store the information that other people can access on the internet.

Server-side

On the computer that hosts a website instead of on the user’s browser. Sites like WordPress use PHP on the server-side and JavaScript on the client (user) side.

Source Code

The code written by programmers that becomes software. First, the source code has to get translated into machine code by a compiler.

Source Data

The main location where data is used in a program. Source data can be from a database, spreadsheet, or hard-coded. The program can retrieve the data from this source then use it.

Sprint

A period of several days during which a software team works on specific tasks. For each sprint, every member of the team has a certain amount of work to get done.

Sprites

A character or a moving object in a computer game. Sprites respond to button presses, clicks, or other user input.

SQL (Structured Query Language)

The most popular programming language for adding and retrieving information from a relational database.

Stack

Several programs used to build apps for the web or mobile devices. Example stacks are LAMP, WAMP, and MEAN.

Statement

An instruction to a computer written in code. Statements can include text, numbers, and symbols.

Synchronous Learning

Learning that occurs when a student and teacher are online at the same time. This is the kind of learning that happens in CodeWizardsHQ coding classes.

Syntax

The structure of a language. The rules that state in what order words must appear. Each programming language has its own syntax.

T

Teaching Language

The language used in a programming course. For young learners, block languages like Scratch are common. In many courses, Python is the chosen teaching language.

Tensor Flow

A library built by Google for creating neural networks. Tensor flow is open-source.

Terminal

Mac’s text-based user interface. In the terminal, users can open files and folders, move things around, and do many other things.

Token

One word, symbol, or operator in a computer program. A plus sign is a token. In most languages, the word “function” is too.

Training

In machine learning, programs need training. To train a program, you give it as much data as possible. Usually, the more data the better.

U

URL (Universal Resource Locator)

The text you type into your browser to get to a website. URL stands for Universal Resource Locator.

Usability Testing

The process of observing users to make sure your software works as they expect. Usable software is easy for people to work with.

User Experience (UX) Design

The design of interactions between a user and a product. The process of making something fun and easy to use. UX isn’t just for software, but that’s where it started.

User Interface (UI) Design

The process of creating the visual parts of a computer program. This includes the buttons, colors, and icons.

Username

A nickname that you type in when you want to enter a certain website or application.

V

Variable

A container that holds a value, such as a piece of text or a number. The value can change, which is why it’s stored in a variable.

Variable Types

The kind of information a variable can hold. Strings, ints, and lists are variable types in Python.

Version Control

Software that lets coders save several versions of their code. This prevents previous work from getting deleted or lost. It also helps programmers keep track of changes.

W

Website

Several web pages that are linked together and stored on the same server.

While Loop

A bit of code that runs over and over as long as some condition is true. For example, a loop might run while a certain number is less than 6 and stop once it reaches 6.

Whiteboarding

The process of brainstorming collaboratively in person or virtually. Ideas on code, pseudocode, or charts are organized on a physical whiteboard or virtual tool representing a whiteboard.

Wi-Fi

A way to send and retrieve data without wires. Wi-Fi uses radio waves to transfer information.

X

Xcode

An IDE from Apple for developers who want to build software for Apple devices.

XML

A markup language that looks similar to HTML and controls the way information shows up on a screen. But XML files also work outside of web browsers.

Free Coding Terms Flashcards

Practice these coding terms for kids with a free set of printable flashcards. Just print, cut, and fold to get started. Over 200 programming terms are explained just for kids.

Download free flashcards now.

Download free coding terms flashcards

Take your coding knowledge to the next level

Don’t understand a term or have one to add? Join our Facebook group for help from our teachers and coding community.

There are many free coding programs for kids to start practicing this new coding vocabulary.

When you’re ready to take your learning to the next level, check out our live coding classes for kids!

The post Kids guide to 200+ common programming terms and definitions appeared first on CodeWizardsHQ.

HTML and CSS Tutorial for Kids: Thanksgiving Matching Game

Margaret Choi — Fri, 13 Nov 2020 01:28:50 +0000

Online coding academy for kids and teens ages 8-18. Enroll to learn real-world programming languages like Python, Java, HTML/CSS, JavaScript, and more!

Thanksgiving is a great time to gather around the table and spend time with our families. In our household, it’s a tradition to play board games before we eat dinner.

Here’s a chance to practice your HTML and CSS coding skills and give your family a fun activity to do when you get together.

Code this Thanksgiving matching game in HTML and CSS and play it with your family and friends this year. It’s a coding and memory challenge! As a bonus, you can also color your own cards using our printable coloring pages.

Play Thanksgiving Match Game

Video Tutorial

Printable Thanksgiving Coloring Activity

Before you start, you can print and color your own version of these Thanksgiving images. Simply color the images you want to use in the match game, take a picture of your artwork, then add it to your application as you would any other image.

Download Printable Coloring Activity

This tutorial assumes you understand basic HTML and CSS. Let’s get started!

Table of Contents

Printable Thanksgiving Coding Activity – Color Match Cards
Step 1: Add a background image to the page
Step 2: Add your game area and title it
Step 3: Style you r game area and title
Step 4: Show the game cards
Step 5: Add a gradient to the face of the cards
Step 6: Add images to the back of the cards
Step 7: Style Images on the back of the cards
Step 8: Flip the card
Step 9: Add a restart button
Step 10: Style the restart button
Your game is complete!

What you need:

1. Text editor

You can use a simple text editor like Notepad, TextEdit, Sublime Text, etc. You may also use an online text editor like Repl.it to write and share your code.

2. Base HTML/CSS file.

Download the base folder and open the game.html file. This folder contains all the images and files you will need to complete your game.

The game functionality is powered by JavaScript in the logic.js file.

CodeWizardsHQ students, you can download the starter files called “x_matching_game” in your editor and easily share your project URL with family and friends. That’s what I’m using for my project!

Recommended: HTML & CSS Classes for Kids

Step 1: Add a background image to the page

We’re starting with what looks like a blank page.

In your CSS, add a background image property to the element and cover the entire page. By default, the background is repeated.

Add this code:

body {
  text-align: center;
  background-image: 
url('autumn.jpg');
  background-size: 50%;
}

Output

Hint: To change the background, use a different JPEG or PNG image file in place of ‘autumn.jpg’.

Step 2: Add your game area and title it

In your HTML, add a div with id game-wrapper and add a

header for your game inside it.

Add this code:


  Thanksgiving Match Game

Output

Tip: Change the text inside the

to give your game a new name.

Step 3: Style your game area and title

We’ve already linked the google font Sniglet in the , but here’s where you can get creative.

In your CSS, style the

font and color as well as the game wrapper.

Add this code:

h1 {
  font-family: 'Sniglet', cursive;
  color: orange;
  margin: 10px;
}
#game-wrapper {
  width: 760px;
  margin: auto;
  margin-top: 40px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid orange;
}

Output

Hint: Change the background color property or add a background-image to your game wrapper to match your theme.

Step 4: Show the game cards

Next, we want to shuffle and then show all of the game cards. We have a JavaScript function that does this, but you need to add the right HTML div for it to work.

In your HTML, after your

add a div called match-grid.

Add this code:


  Thanksgiving Match Game

Output

Hint: We show 18 cards, but you can change this in your JavaScript code. In logic.js, change the number 18 in this loop to show more or less cards: for (var i = 0; i < 18; i++).

Step 5: Add a gradient to the face of the cards

Right now, clicking on a card doesn’t do anything and all cards will match. Let’s style the front and back of our card so our code can match the images.

In your CSS, style the face of the cards.

Add this code:

.card {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.card_front {
  background-image:
 linear-gradient(orange, yellow);
}

Output

Tip: You can change the colors in the background-image or add a link to an image file.

Step 6: Add images to the back of the cards

Our images are stored in our JavaScript code. Find the