In coding, it’s all about learning by doing. Coding activities for kids are a hands-on way to learn the basics of programming. 

Studying code and examples can only take kids so far. They need to put their knowledge into action and the best way to do that is just to code. 

[Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

Kids in my coding classes get so excited when they see their code in action. They’re not just watching me write code, they’re doing it themselves and that’s why they’re learning. In every class, we complete a project or activity so they’re constantly adding knowledge.

Here are some fun and free coding activities your kids are sure to love!

Scratch Coding Activities for Kids

Scratch is a great platform for kids who are just learning to code. It’s free and allows kids to use drag-and-drop code blocks to write programs. Kids can build their own games and apps that can be shared and remixed. Try these fun activities to learn about Scratch and then get more Scratch project ideas.

• Make a Flappy Bird Game
• Flying Space Cat Game
• Rocket Landing Game
• Valentine’s Day Card Scratcher
• Holiday Advent Calendar
• Halloween Candy Collector Game

Make a Flappy Bird Game

Ages: 8+

Skills Learned: Scratch basics, loops, time functions, animations

Kids fly through the air as a flappy bird, but they have to avoid a collision to reach their destination. They’ll learn to animate a moving object and create obstacles by using code blocks. Kids will have as much fun coding this game as playing it. It’s an easy game to build and requires no setup in Scratch.

View Activity

Flying Space Cat Game

Ages: 8+

Skills Learned: Scratch basics, loops, functions, game score logic

In this game, kids travel across space collecting crystals and use game logic to keep score. Collecting is a popular mechanic in games and is easily coded in Scratch with the same basic logic. They’ll learn how to animate a moving background and in just a few steps have a completed game. Easy activity for first-time coders.

View Activity

Rocket Landing Game

Ages: 8+

Skills Learned: Scratch basics, loops, random functions, variables

A simple coding activity where kids have to land a rocket on a moving platform. They’ll learn how to alert the winners and losers which is a common game element. There are only a few elements to code, so the concepts and code are easy to follow. This activity also includes a full tutorial video and printable PDF for extra support to complete it.

View Activity 

Valentine’s Day Card Scratcher

Ages: 8+

Skills Learned: Scratch basics, loops, positioning, functions, if-then statements

A scratcher card coding activity where kis can share a messages with the ones they love. They’ll learn how to animate a scratching effect and get familiar with positioning in Scratch. This activity is perfect for Valentine’s day and is also easy for kids to personalize and add their own flare to. 

View Activity 

Holiday Advent Calendar

Ages: 8+

Skills Learned: Scratch basics, events, if-then statements

Kids slowly reveal gifts, goodies, or games to family and friends in this fun holiday coding activity. It’s a good way to practice basic coding concepts and date-related functions in Scratch. Kids can get pretty creative with their designs and gifts. A lot of the logic is included in the base game that kids will remix.

View Activity

Halloween Candy Collector Game

Ages: 8+

Skills Learned: Scratch basics, loops, functions, mouse events

Kids collect a load of candy in this Halloween-themed Scratch game. They’ll code a ghost character and setup different scenes for their game. There’s a video tutorial included so you can follow along. It’s an easy and fun game for beginners and can be played with family and friends. 

View Activity 

HTML/ CSS /JavaScript Coding Activities for Kids

HTML, CSS, and JavaScript are the foundation of modern web development and important languages for all developers. Many programmers use these languages regularly, but even those who don’t need to have a basic understanding to develop for the web. Try these coding activities to practice HTML, CSS, and JavaScript.

• Holiday Card
• Thanksgiving Matching Game
• Disappearing Snowman
• Rock, Paper, Scissors
• Easter Egg Hunt

Holiday Card

Ages: 10+

Skills Learned: HTML/CSS basics, Google fonts, styling

Kids can save paper and the environment by coding a digital holiday card. They start with a blank card to add their image and message to using code. This requires only basic HTML/CSS for beginners and a few simple steps. It’s a fun and creative way to incorporate coding into your holiday activities.

View Activity 

Thanksgiving Matching Game

Ages: 10+

Skills Learned: HTML/CSS basics, classes, click events, buttons

Try coding a memory challenge in this Thanksgiving matching game. Kids will use 3D transformations to flip the cards and code a simple button. The starter code provides the basic functionality and kids can build and personalize their game on top of that. Full video tutorial and printable coloring activity included too.

View Activity

Disappearing Snowman

Ages: 10+

Skills Learned: JavaScript basics, keyword events, arrays, functions, animation

This is a classic word game turned into JavaScript code. Kids will use code to check for matches between their secret word and the player’s, otherwise their snowman starts to melt. A nice starter activity for kids learning vanilla JavaScript.

View Activity

Rock, Paper, Scissors

Ages: 10+

Skills Learned: JavaScript basics, game logic, variables, time functions, events

This coding activity features a classic game with simple game logic, “Rock, Paper, Scissors”. Kids code emojis that show the player and computer’s choice along with the winner. This has a simple design and starts kids off with the HTML and CSS code, so they can focus on learning JavaScript.

View Activity

Easter Egg Hunt

Ages: 10+

Skills Learned: JavaScript basics, jQuery, functions, events, animation, conditionals 

Kids have to use code to hide eggs and then find them in this Easter coding activity. They will practice coding in both JavaScript and jQuery. There’s not a lot of code to write and the logic is easy to follow. It’s a quick introduction to several JavaScript concepts and can get kids interested in learning more.

View Activity

Python Coding Activities for Kids

Python is both an easy-to-learn and widely-used coding language. That’s why it’s the first language we teach in our middle school and high school coding programs. Python coding activities will help kids solidify the concepts and syntax in an engaging way. Check out these Python activities and more Python projects for kids.

• Random Dad Joke App
• “Pig” Dice Game

Random Dad Joke App

Ages: 11+

Skills Learned: Python basics, functions, loops, imports,  APIs

Nothing’s funnier to kids than a dad joke, right? Now, kids can code their own app that generates dad jokes anytime. It’s a simple activity that utilizes basic Python functions and logic. For kids, this activity explains the concepts and shows the results for each line of code. 

View Activity

“Pig” Dice Game

Ages: 11+

Skills Learned: Python basics, functions, loops, imports, APIs

Kids can challenge the computer to a game of Pig. This coding activity assumes kids know basic Python programming. Kids will code the game logic and use a CodeWizardsHQ API to access a database of jokes. This is a fun activity for beginner Python students and covers important Python topics like functions and imports.

View Activity

Google Coding

CS First is a program created by Google to make learning effective and fun while leveling the computer science playing field. They have computer science curriculum for teachers and activities for students. These feature fun hands-on activities with instructional videos. 

• My Google Logo
• Art
• Game Design

My Google Logo

Level: Introductory 

This activity uses Scratch for CS First. Kids will learn about computer science and then use loops, events, and sequencing to design and animate a Google logo. They walk kids through the activity step-by-step and they can press continue as they are ready to progress. It’s easy even for young kids and has fun with Google Doodles.

View Activity

Art

Level: Intermediate 

A video-based curriculum with multiple activities to choose from. The videos explain the art concepts and also instructions on how to code the project. Students create animations, interactive artwork, photograph filters, and other exciting, artistic projects using code. It’s a great way to encourage kids who enjoy art to consider coding.

View Activity

Game Design

Level: Advanced

A video-based curriculum with multiple games to code. Students learn basic video game coding concepts by making different types of games, including racing, platform, and launching. They also learn about storytelling and the intangibles that make a game awesome. 

View Activity

Hour of Code

Try coding for one hour and see where it takes you! Hour of Code is a worldwide effort to celebrate computer science, starting with 1-hour coding activities. Check out these free Hour of Code activities to get started.

• CodeWizardsHQ Hour of Code Activities
• Code.org Hour of Code
• Tynker Hour of Code
• CS First Hour of Code Activities

CodeWizardsHQ Hour of Code Activities

A list of free Hour of Code activities for beginners in Scratch, HTML/CSS, JavaScript, and Python. CodeWizardsHQ teaches the most fun and effective live, online coding classes for kids ages 8-18.

View Activities

Code.org Hour of Code

The official Code.org database of one-hour tutorials designed for all ages in over 45 languages. Code.org is an education innovation nonprofit dedicated to the vision that every student in every school has the opportunity to learn computer science as part of their core K-12 education. 

View Activities

Tynker Hour of Code

A list of Hour of Code games in block and text coding that also features activities from NASA Experts. Tynker is a leading K-12 creative coding platform that enables students of all ages to learn to code at home, school, and on the go.

View Activities

CS First Hour of Code Activities

Simple, self-guided lessons that are designed to make coding fun for everyone. It’s easy to get started, with no CS knowledge needed. CS First was created by Google as a resource for teachers to makes learning effective and fun while leveling the computer science playing field.

View Activities

Unplugged Coding Activities Without a Computer

It’s also possible to learn about coding without ever touching a computer. Try one of these unplugged coding activities to learn code concepts and syntax completely analog.

• CodeWizardsHQ Free printable coding worksheets
• Code.org “Unplugged” activities: CS without the computer
• CS Unplugged Activities
• Teach Your Kids Code Unplugged

CodeWizardsHQ Free printable coding worksheets

Ages: 8-13

These printable coding activities give a basic introduction to ASCII, binary code, sequencing, and bubble sort. While these don’t cover specific coding languages, they are concepts that are important across computer science. Great for beginners.

View Activities

Code.org “Unplugged” activities: CS without the computer

Ages: 14-18

Kids and teens can learn about coding with this unplugged lesson plan for teachers and parents. They’ll learn about binary numbers, events, and algorithms with easy activities. No coding knowledge is required.

View Activities

CS Unplugged Activities

Ages: 5-14

This is a whole collection of free teaching materials that teach Computer Science through engaging games and puzzles that use cards, string, crayons, and lots of running around. Lessons come with printables, slides, and speaker notes.

View Activities

Teach Your Kids Code Unplugged

Ages: 4+

These activities get your kids learning to code screen-free. Most of the activities require little prep and use simple household items you already have. These are a good way for kids to get started with coding at home or at school.

View Activities

What Is Coding?

In kid-friendly terms, coding is using a set of instructions to communicate with computers. Coding for kids is how we teach kids about coding and programming. There are different coding languages and they all have different rules and uses, but they all give computers instructions on how to do specific tasks. 

Developers write code to communicate with computers. The computers then translate that code into a series of actions and tasks to perform. Code can be used to build games, websites, and apps. There are also many systems, like AI, that require code to perform functions. 

Why should kids learn to code?

Technology is a part of everyday life for most kids and teens. So, understanding code allows children to go past simply using technology. It lets them create and invent technology. Many of today’s most important companies, Tesla and Google, were created by founders who could code.

Coding also teaches skills like problem-solving, critical thinking, perseverance, communication, and creativity. These are valuable skills for any future career and also builds skills for school and life. If you’re not convinced, check out these 26 reasons learning to code benefits your child.

If your child wants to learn how to code in a fun and engaging way, try coding classes for kids. 

Helpful Coding Resources

Here are some helpful resources if you are getting started with coding for your child:

• Coding For Kids: 46 Free Classes, Websites, and Apps
• What is Coding for Kids? 
• 26 Reasons Learning to Code Benefits Your Child
• Why Your Kids Should Learn Coding (Even If They Aren’t Interested in STEM)
• How to Teach Coding to Kids
• Is Coding Right For My Child?
• How Coding Helps Kids in School
• 10 Best Kids Coding Languages

Download Free Printable Scratch Coding Tutorials PDF

Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.

Coding Activities in Every Class

At CodeWizardsHQ, we complete a coding activity or project in every class. We have a hands-on approach to teaching coding through problem-solving and that’s why our students are so successful. In our structured curriculum, kids build on their coding skills in every class and demonstrate their skills with capstone projects. By the end of the program, kids are ready for a real-world coding internship. Learn more about our coding programs and enroll to get started.

The post Fun & Free Coding Activities for Kids appeared first on CodeWizardsHQ.

Scratch is one of the easiest and most fun ways to get started with learning to code. Kids can easily experiment in Scratch’s drag-and-drop platform or take a Scratch coding class to build their skills. Try this simple Scratch tutorial for kids for an introduction to coding in Scratch.

[Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

Complete this Scratch tutorial for kids to build a Rocket Landing game.

Play and remix the Rocket Landing game now. Safely land your rocketship on the platform to win.

What you need:

1. Scratch account: Create a free Scratch account

No coding experience is necessary for this Scratch tutorial. Beginner-friendly for kids ages 8 and up. Give it a try!

Scratch Tutorial: Rocket Landing Video Tutorial

Step 1: Create a new Scratch project

Let’s start by creating a new project. 

• Visit https://scratch.mit.edu/, login to your account, and click on the “Create” button.

Now, we can code your Rocket Landing game! 

Hint: You can also remix this project and others to see the code.

X, Y positioning in Scratch

Before we move on, let’s talk about x and y coordinates. In Scratch, your images are called sprites.

Scratch uses x, y coordinates to position sprites on the screen. You might have seen these in math class. 

• x coordinate – a number of pixels along the horizontal axis of a display starting from the pixel (pixel 0) in the center of the screen.  
• y coordinate – a number of pixels along the vertical axis of a display starting from the pixel (pixel 0) in the center of the screen. 

We’ll use these (x, y) coordinates to position our sprites and change these coordinates to move them.

Step 2: Add a space backdrop

A new project will open up, and you will see the Scratch interface. 

• Start by deleting the Scratch cat sprite that appears in every new project. Click on the cat sprite and the trash can icon.
• Click the “Choose a Backdrop” icon and add the “Space” backdrop.

Hint: Get creative! Choose any backdrop you want from the library or upload your own.

Step 3: Add a Rocketship sprite

Let’s create our player sprite by choosing the rocketship.

• Select “Choose a Sprite”, find the Rocketship sprite, and click to add it
• In the “Costumes” tab select costume 5
• Decrease the size of your Rocketship to 50

In order to run our code in Scratch, use the “When Green Flag Clicked” block to get started.

• Click on the “Code” tab
• Add the “When Green Flag Clicked” block from the “Events” category
• Position your rocketship at the top of the screen using a “Go to” block
• Now, click on the green flag to position your sprite

Hint: You can also upload your own Spaceship or use the “Paint” option to draw one.

Step 4: Move the Rocketship sprite 

To move our rocketship right and left using arrows, we will use “Events” blocks.

• Add the “When space key pressed” block and change the dropdown to “left arrow”
• Underneath that, add a “Change x by” block and use -5 to move left
• Next, add the “When space key pressed” lock and change the dropdown to “right arrow”
• Underneath that, add a “Change x by” block and use 5 to move right

We also want our rocketship to move down towards the platform. 

• Add another “When Green Flag Clicked” block
• Use a “repeat” block to repeat the downward motion of the rocketship 200 times
• Move the rocketship down the y-axis (top to bottom) with a “Change by” block

Hint: Change the 5 and -5 values to move your rocketship more or less with each click

Step 5: Add the platform sprite and move it

Let’s create a moving platform to land our spaceship. 

• Select “Choose a Sprite”, find the Paddle sprite, and click to add it
• Right-click on the sprite and rename it to Platform
• Position the Platform so y = -175, at the bottom of the screen

We want our platform to move randomly, so we need a variable to hold a random x value. To add code, go to the “Code” tab.

• Go to Variable blocks and right click on the orange variable circle and rename it “New-X”
• Add the “When Green Flag Clicked” block
• Use a forever loop to keep the platform moving
• Inside the forever loop, set the “New-X” variable to a random number between -240 and 240
• Use a “Glide” block and use the “New-X” value for x and -175 for y

Step 6: Add “Game Over” sprite

We need some text to tell us when the game is over.

• Click on the cat icon, select “Paint” 
• Select the rectangle option to draw a black rectangle
• Then, select the text option and type “Game Over” in yellow on top of the rectangle
• Right-click on the sprite to rename it “Game Over”

We only want this sprite to show if our rocketship reaches the bottom. Go back to the code tab to add code to this block.

• Add the “When Green Flag Clicked” block
• Use “Hide” block to hide the block until we need to show it

Hint: Use the text option to write any message you want when the game is over.

Step 7: Add “You Win!” sprite

We also need some text to tell us when we’ve successfully landed.

• Right-click on the “Game Over” sprite and duplicate
• Click on the “Costumes” tab to edit the text
• Double-click the text and type “You Win!”
• Right click to rename this sprite “You Win”

We only want this sprite to show if our rocketship touches the platform. Since we duplicated this sprite, it should already have the code to hide the block when the green flag is clicked.

Hint: Change the color of the box and the text to personalize your message.

Step 8: Add game logic to rocketship

Depending on where the rocketship lands, we will display a different message. We need to broadcast the information to the other sprites get the right message. 

• Click on the Rocketship sprite
• Underneath the “Go to” block add a forever loop
• Inside the forever loop, add two “If-then” controls
• If the rocketship touches the edge, use the broadcast block and create a new message called “Lose”
• If the rocketship touches the platform block, use the broadcast block and create a new message called “Win”

Step 9: Add game logic to “You Win!” and “Game Over”

Depending on where the rocketship lands, we will display a different message. We need to broadcast the information to the other sprites get the right message. 

• Click on the “Game Over” sprite
• Use a “When I receive” block and select the “Lose” message
• When this message is received, show the message and stop all scripts

Do the same thing for the “You Win!” sprite

• Click on the “You Win!” sprite
• Use a “When I receive” block and select the “Win” message
• When this message is received, show the message and stop all scripts

Your Rocket Landing game is complete! Play Rocketship Landing game.

Click the green flag and give it a try. If you want to let other people see your project and remix it, click the “Share” button at the top. 

You can “see inside” our completed Rocketship Landing game to get a peek at the full Scratch code.

Download Free Printable Scratch Coding Tutorials PDF

Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.

More Scratch Tutorials for Kids

Get inspired and practice coding with a fun Scratch tutorial for kids.

• Valentine’s Day Card Scratch Tutorial
• Holidays Advent Calendar Scratch Tutorial
• Halloween Candy Collector Game Scratch Tutorial
• Flying Space Cat Scratch Tutorial
• How to Make Flappy Bird on Scratch
• How To Make a Game on Scratch

Is Scratch programming easy?

Scratch coding is a block programming language that is really easy to learn. What makes Scratch so easy is its drag-and-drop platform. It allows kids to start learning without advanced typing skills. Even though it’s easy to use, it can teach kids important programming concepts like variables, loops, if-else statements, conditions, and more. Not only that, there is no setup that needs to be done. Kids can login and start coding Scratch games and apps right away!

How do you learn Scratch programming for kids?

There are many online resources for kids to learn how to code in Scratch. The Scratch site has a directory of Scratch tutorials or you can check out our list of fun Scratch tutorials to help you get started. There are also plenty of YouTube videos from teachers and other kids learning to code in Scratch.

If your child wants to dive deeper into Scratch, consider taking a Scratch class for kids. Students in our elementary school coding program, for ages 8-11, start learning to code with Scratch and advance to other languages like HTML/CSS, JavaScript, and Python. They’ll learn fundamental coding concepts in the Scratch platform by building fun projects and applications that they can personalize and share. From there, the possibilities are endless!

The post Simple Scratch Tutorial for Kids: Code a Rocket Landing Game appeared first on CodeWizardsHQ.

It’s the time of year for candy and eggs, it’s almost Easter! One of our favorite Easter traditions is the egg hunt. Whether you color the eggs, cook them, or go for the plastic variety, it’s so much fun searching for the hidden Easter eggs. Let’s use this real life game to practice coding a game in JavaScript and jQuery.

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

If you’re a beginner or kid who’s learning to code, this JavaScript tutorial will show you how to create your own Easter Egg Hunt game using JavaScript and jQuery. You can personalize and hide Easter eggs for your friends and family to find.

Complete this easy JavaScript tutorial to code your own Easter egg hunt.

Play Easter Egg Hunt

What you need:

1. Text editor

In the project examples, we’ll be using the CodeWizardsHQ 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, and image files.

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

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

Recommended: HTML and CSS Coding Classes

Step 1: Setup a JavaScript Function

The starter files setup the basic HTML and connects your CSS and jQuery. The eggs have been hidden and your goal is to add the JavaScript and jQuery code to collect the eggs and win the game.

Open the easter.html file and find the <script> tag. Inside the <script> tag, set up a function called foundEgg().

function foundEgg(event) {

}

Step 2: Add the function call

We want to call our foundEgg() function for all elements with class .egg.

Use a “click” function to call the foundEgg() function. When an egg is clicked, the foundEgg() function will run.

$('.egg').click(foundEgg);

Tip: Make sure your function call happens after your function definition and not inside.

Step 3: Fade the Egg on Click

Create a variable called “egg” that is equal to the current target for the event. The “click” is the mouse event and the current target is the egg.

Then apply the jQuery fadeOut() function to the targeted element. In the fadeOut() function, add a parameter for the duration, or how long it takes to fade out, in milliseconds. When the egg is clicked it will now fade from view over 250 milliseconds. 

var egg = $(event.currentTarget);

egg.fadeOut(250);

Tip: You can select the current mouse or keyboard event with the event variable. Using the event variable is the same as accessing window.event.

Step 4: Add a Score Variable

To keep track of how many eggs have been discovered, let’s add a score. 

There is already a score element in your HTML where we can display the score. In the JavaScript, we need a variable to represent our score as it changes. Define the variable “score” before your foundEgg() function.

var score = 0;

Step 5: Increase the Score By 1

Every time we click an egg, we want the score to increase by one. Increase the score variable by one inside of the foundEgg() function.

score = score + 1;

Tip: You can also increment by one using the ++ notation. In that case, you would write score = score++;

Step 6: Update Score with New Score

Now, we need to update the score on the screen. The variable has increased, but we need to display the new score. 

Select the div with id “score” and update the text with the score variable using the text() function.

$(“#score”).text(score);

Recommended: JavaScript Coding for Kids

Step 7: Add a Condition For Eggs Found

Using an if statement, we can set an alert when all of the eggs have been found. Since we have four eggs, we will use the condition if score >=4.

   if(score >= 4){

   }

Step 8: Alert When All Eggs Are Found

Inside of the if statement, we will execute an alert that says “You found all of the eggs!”. When the player finds four or more eggs, they will see this alert.

alert('You found all of the eggs!');

Tip: Make sure your alert is inside of the if statement {}.

Step 9: Your game is complete!

Nice work! You’ve completed this simple JavaScript tutorial. Open the i_easter.html file to see the completed game code. 

Next, get creative and design your own theme or add additional hidden eggs with the bonus images. 

https://margaret.codewizardshq.com/x_easter_egg_hunt/i_easter.html

Recommended: Kids Coding Websites

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:

Learn JavaScript with Live Coding Classes 

If you want to build more games in JavaScript, check out our coding programs for kids ages 8-18. We teach coding classes in JavaScript where students can learn to build interactive applications and websites. You will go from a JavaScript beginner to learning advanced JavaScript code with the most fun and effective coding classes for kids. 

Ready to level up your child’s learning experience? Take a coding class with CodeWizardsHQ:

• Elementary School Coding Classes
• Middle School Coding Classes
• High School Coding Classes

Happy Easter!

The post JavaScript Tutorial: Easter Egg Hunt appeared first on CodeWizardsHQ.

Get excited because this is a big one. Our free global Code Challenge for kids starts April 5!

Coding can seem a little scary at first, which makes sense if you’re a kid and you’ve never talked to a computer. There are a lot of weird characters in code that you don’t use and you may not even know what they’re called.

Never used this  {  symbol before? 

But, code is all around us! The technology we use on a daily basis is built on a foundation of code. For kids, learning to code is an opportunity to understand the digital world around them. Like painting on a blank canvas, kids can create websites, apps, and games from a blank computer screen.

While most kids enjoy technology, many don’t understand how it works. 

“Only 20% of students meet STEM benchmarks, and this is even though careers in STEM topics are the most in-demand and also the highest-paying.” From Skipy: (The Benefits of STEM toys in the Growing Years)

These kids haven’t had the opportunity to learn about the meaning of STEM or try coding. At least, not in a way that sparks their interest and makes them see what’s possible. 

The Code Challenge is a fun and educational event that introduces kids to coding in an engaging way. We created this event as an activity to guide our students’ learning and were blown away by the response from kids around the world. Our winners spanned 3 countries and we got positive feedback from kids and their parents about how they were challenged and engaged every step of the way.

Last year, over 2,000 students and parents participated in the first Code Challenge and over 6,500 voted for the grand prize winners. This year, because of the amazing response, we asked our students to be more involved and to help us come up with a theme and character for an experience even more kids will love. 

The Code Challenge starts on April 5, register to join! 

Beginner-friendly for kids ages 8-18. No coding experience is needed to play. 

How the Code Challenge Works

As kids follow the story of our hero Nym and his quest through the galaxy to save the Xocron crystal, they’ll be presented with 21 Python-based coding questions. These questions first explain the coding principles, relevant across most coding languages, and then ask for that principle to be applied to help Nym race from planet to planet. 

Each correct answer earns the ability to move on to the next question. After those 21 questions, players earn a $25 CodeWizardsHQ gift card and access to the boss level. To defeat the boss, they will need to write a short program in Python or JavaScript. Anyone who writes a successful program will be placed in the Hall of Champions for a public vote. The top 3 winners will receive a t-shirt and cash prize of $100, $50, and $25 for 1st, 2nd, and 3rd place, respectively.

Play the Code Challenge

To play the Code Challenge, register and create an account. 

After that, login to your account from April 5 – 25 to play. 

Students will receive a new question every day on the Code Challenge platform to complete their mission. 

Code Challenge for Educators & Teachers

We’re also inviting educators and teachers to join in on the fun. Teachers can sign up their entire class to play together. Teachers who register 50 or more students will receive a free t-shirt and, if 80% of the class completes the first 21 questions, teachers will also have a chance to win a $500 technology grant. Get the details and register. 

So, why wait? The Code Challenge is free and open to kids 8-18.

Register today and let’s play!

The post Our 2nd Annual Code Challenge Launches April 5 appeared first on CodeWizardsHQ.

Valentine’s Day is a time to bring smiles to that special loved one. This year, you can set hearts aflutter with a handmade, hand-coded card. You will save the trees and spread the love.

[Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

Follow this easy Scratch coding tutorial to build a Valentine’s Day scratcher that reveals a personalized card.

What is Scratch? Scratch is a 100% free block-based programming language and it’s one of our favorites. Developed by the minds at MIT, the Scratch platform lets you drag and drop code blocks to build fun games and apps. Scratch is a great way to introduce younger students to coding and how to think like a programmer. 

Try our Valentine’s Day Card Scratcher. Scratch off a heart to reveal a very special Valentine’s message.

What you need:

1. Scratch account: Create a free Scratch account 

2. Starter files: Download the images we are using in our game. You can also use your own images to customize your application. Download starter files

No coding experience is necessary for this tutorial. Beginner-friendly for ages 8 and up. Give it a try!

Step 1: Create a new project

Let’s start by creating a new project. 

Visit https://scratch.mit.edu/, login to your account, and click on the “Create” button.

Now, we can code your Valentine’s scratcher! 

Hint: You can also remix this project and others to see the code.

Step 2: Upload game board and card images

A new project will open up and you can see the Scratch interface.

In the starter files, we’ve included images for your game board, Valentine’s cards, and candy hearts.

• Start by deleting the Scratch cat sprite that appears in every new project
• Add all of the background images by clicking “Upload Backdrop”
• In the Backdrops tab, select the “valentines_bg” image

These are the 6 different Valentine’s cards that can show after our user scratches a heart.

Hint: Instead of uploading backdrops, you can draw your own backdrops and add special messages here. 

Recommended: Scratch Coding for Kids

X, Y positioning in Scratch

Before we move on, let’s talk about x and y coordinates. 

Scratch uses x, y coordinates to position sprites on the screen. You might have seen these in math class. 

• x coordinate – a number of pixels along the horizontal axis of a display starting from the pixel (pixel 0) in the center of the screen.  
• y coordinate – a number of pixels along the vertical axis of a display starting from the pixel (pixel 0) in the center of the screen. 

We’ll use these (x, y) coordinates to position our hearts and scratchers. 

Step 3: Position hearts and scratcher sprite

In Scratch, your images are called sprites. 

• Click on each candy heart sprite
• Add the “When Green Flag Clicked” block
• Change the x and y properties of each sprite using the “Go To” block
• Repeat these steps for each candy heart, in the different positions listed

• Click on the scratcher heart and place it on top of the first candy heart using “Go Forward 1 Layers” block. 

Hint: You can put any heart in any position. Change the x, y positions of each heart to match your theme and background.

Step 4: Add a wand to scratch with

Our first scratcher is in position! We just need a way to scratch it. You can use or create any sprite as your scratcher, I’m using a magical wand.

• Click “Choose a Sprite”
• Search for and select the wand
• Visit the “Costumes” tab to rotate the wand 45 degrees
• Position the center of the wand in the center of the artboard
• Go back to the code tab

Hint: Draw your own sprite to use as a scratcher. A claw, an arrow, a coin, you choose!

Step 5: Wave your wand

Next, we want the wand to follow our mouse cursor.

We can use a “Forever” block, which acts like a loop to repeat code. Pairing it with the “Go to mouse pointer” and “go to front layer” block means the wand will show up on the top and follow our mouse forever.

• Click on your “Wand” sprite
• Add a “Forever” block
• Inside the “Forever” block use “Go to Front Layer” and “Go to Mouse-Pointer”

When you click the green flag, you should see your wand following your mouse.

Hint: You can also move your wand with your keyboard using an if-then the “Key Pressed” block.

Step 6: Create the scratched heart effect

Ready for scratching! Let’s create the scratcher effect every time our wand touches the silver scratcher. 

Instead of erasing the actual sprite, we will create a series of costumes that look like our heart is being scratched off.

• Click on your “scratcher1” sprite and go to the “Costumes” tab
• Right click to “Duplicate” the costume 
• On the duplicate costume, select the eraser and partially erase the heart
• Again, duplicate this new costume and repeat erasing until the heart is gone
• Rename the final costume “last”
• Reselect the first costume and return to the code tab

Hint: The more costumes you have, the longer it will take to reveal your card.

Step 7: Add scratcher logic

We’re going to reveal our candy hearts by changing costumes. When the candy heart is fully revealed, we will get to see our final Valentine’s card.

• Click on your “scratcher1” sprite 
• Add a “Forever” loop and inside of it an “If-Then” block
• If the scratcher is touching the wand, wait and change to the next costume

Now, when your wand hovers over the scratcher heart it should begin to disappear. But, it’s not coming back? 

• Add “Switch Costume To” block to show the full heart costume when green flag is clicked.

Hint: Instead of changing the costume when the sprites touch, you could also do it when you click on the heart.

Recommended: How to Make a Game on Scratch

Step 8: Reveal your Valentine’s card

What should happen when we’ve scratched off a heart? We finally get to reveal our sweet Valentine’s message! 

Each scratcher heart should reveal a different card. We will use the “broadcast” block to hide all the blocks and show our card. 

• On our scratcher heart sprite, add another “If-Then” block (inside the first if-then block)
• If the costume name is “last”, wait for 1 second then broadcast a message to hide all sprites
• Then switch the backdrop to the card you want to show (card1)

Your card will show up, but all of your other sprites are still showing up. The other sprites need to receive the “Hide” message and do something with it.  

For each of the other sprites, use the “Hide” block when they receive the message and then stop the script.

Hint: You can easily copy blocks of code from one sprite to another. Just grab the code block and hover over the sprite you want to copy it to.

Step 9: Show the game board when we restart

When we click the green flag, our game restarts. We’ll want to show our game board and hearts again.

• Click on the backdrops and add “When Green Flag clicked” block
• Use the “Switch Backdrop To” block to switch back to your game board image

Hint: You don’t have to stick to just one game board. Add several and switch them when the green flag is clicked.

Step 10: Add more scratcher hearts

You have one scratcher working! 

You can easily duplicate and update scratcher1 to cover the remaining hearts. Each new scratcher heart should reveal a different card. 

• Right-click to “Duplicate” scratcher1
• Change the go to x and y position (0, -15)
• Change the backdrop revealed to card2
• Repeat to cover all candy hearts

Your Valentine’s scratcher is complete!

Put it all together and give it a try. The most important step is to send it to a person you love this Valentine’s Day. 

https://scratch.mit.edu/projects/480067907/

You can “see inside” my project to get a peek inside the full Scratch code.

Free Scratch Tutorials

Recommended: Scratch Games

Download Free Printable Scratch Coding Tutorials PDF

Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.

Learn more about Scratch in our Elementary School Coding Program. It’s so much fun and the possibilities to be creative are endless! 

Did you remix this project? Share a picture or link with us on Facebook or Twitter with #NowYouCode to be featured. 

Hoping you have a sweet Valentine’s Day!

The post Scratch Coding for Kids: Halloween Candy Collector Game appeared first on CodeWizardsHQ.

Happy holidays! Tis’ the season to be merry and bright and also the perfect weather for a cup of hot chocolate.

Who doesn’t love all of the twinkling lights and decorations this time of year and, of course, the presents under the tree (especially the surprises!). 

[Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

It’s been a little harder to shop for gifts this year, but that gives us the chance to get creative. If you want to learn how to code, there happens to be plenty you can gift without leaving the house. For you, we’ve created a codable Scratch gift that you can personalize and share with someone you care about. 

Code your own Holiday Advent Calendar in Scratch and slowly reveal gifts, goodies, or games to your family and friends.

Our advent calendar counts down until Christmas, but you can make yours for any holiday or special event. It’s a fun way to keep in touch and give a gift that comes from the heart.

Put on your matching pajamas, and let’s get coding!

See Complete Holiday Advent Calendar

What you need:

1. Scratch account: Create a free Scratch account 
2. Starter template: Use this Scratch starter template as the basis of your project. View starter template

No coding experience necessary for this tutorial. Beginner-friendly for ages 8 and up. Give it a try!

Step 1: Remix the starter project

We’ve set up the base files for you. Instead of creating a new project, start by remixing a project.

• Sign in to https://scratch.mit.edu
• Go to the starter scratch project https://scratch.mit.edu/projects/461157556/
• Click “Remix” to create a new version you can edit

Hint: You can personalize your calendar with your own background and sprite images.

Step 2: Add a gift for December 15

Our advent calendar starts on December 15. Let’s first add code to the date that tells our gift sprite what gift to open.

• Select the sprite called “dec-15”.
• From the Events category, drag the “when this sprite clicked” block and place it in the playground area.
• Again from the Events category, drag the “broadcast message” block.
• Click on the drop-down arrow, select New Message, and write open-gift-15.

Hint: Instead of a card, you could show an image, animations, or even start a game when you click on the date.

Step 3: Show the December 15 gift on click

When we click our calendar date, we want to reveal the gift. You’ll see some code added to the gift that hides it when we start our game. Let’s show the gift when we click. 

• Select the gifts sprite, from the Event category, drag the “when i receive” block, and place it in the playground area.
• Change the value in “when i receive” to open-gift-15.
• From the Looks category, drag the “switch costume” block and place it below “when i receive” block.
• Change value in “switch costume” block to gift-15.
• From the same category, drag the “show” block and place it below the “switch costume” block.
• From the Looks category, drag the “go to layer” block and place it below the “when i receive” block.
• Make sure the value in the “go to layer” block is front.

Step 4: Hide the gift after you view it

The gift shows now! To close it, click on the sprite. The gift covers the whole page so anywhere you click will hide the gift.

• In the gifts sprite, drag the “when this sprite clicked” block to the playground area.
• From the Looks category, drag the “hide” block and place it below when this sprite clicked.

Hint: You could also show the gift for a specific amount of time by using the wait block. 

Step 5: Add logic to lock the future gifts 

Currently, we are revealing the gift when we click our calendar. Let’s add an if-else statement to help our code decide if it’s time to reveal the gift yet. If it is too early, we’ll show a message instead of our gift. 

• Select the dec-15 sprite. Move the broadcast sprite away from the “when sprite clicked” block and place it anywhere in the playground area.
• From the Controls category, drag the “if-else” block and place it below the “when sprite clicked” block.
• From the Events category, drag the “broadcast message” block and place it inside the if code block.
• Change the message in the “broadcast block” to a new message “not yet!”
• Drag the previous broadcast open-gift-15 block from the playground area and place it inside the else code block.

Reveal the gift only if the current date is after the reveal date:

• From the Operators category, drag the > block and place it as a condition in the “if-else” block.
• From the Sensing category, drag the “current year” block and place it on the right side of the > block.
• Change the value in “current year” block to date.
• On the left side of the > block, enter the sprite date i.e., 15.

Hint: For each calendar date sprite, you would change the value in the > block.

Step 6: Show an error when you try to open future gifts

• Select the error sprite from the list of sprites.
• From the Events category, drag the “when I receive” block and place it in the playground area.
• Change the value in “when I receive” block to not yet!
• From the Looks category, drag the “show” block and place it below the “when I receive” block.

Hint: Our error message is an image sprite, you can also upload or draw your own message.

Step 7: Hide the error message after 1 second

• Make sure the error sprite is selected.
• From the Controls category, drag the wait 1 second block and place it below the show block.
• From the Looks category, drag the hide block and place it below the wait block.

Hint: Add a sound to your error message, using play sound block, as a warning!

Step 8: Add another gift on December 16

• Copy the blocks from the dec-15 sprite to dec-16 sprite by dragging them on top of the dec-16 sprite.
• Select the dec-15 sprite, and you will see the copied blocks in it.
• In the “broadcast open-gift-15” block, change the message to open-gift-16.
• Change the value on the left side of > block to 16.

Step 9: Show the December 16 gift on click

• Open the gifts sprite, right-click on the When I receive block, and click on duplicate.
• We get a copy of the blocks, place it anywhere in the playground area.
• Change the message in When I receive block to open-gift-16.
• Set the value of Change costume block to gift-16.

Step 10: Repeat until complete 

For each date in your advent calendar, repeat steps 2 through 9. 

Your advent calendar is complete!

See Complete Christmas Advent Calendar

You can “see inside” my completed project to get the full Scratch code for this activity. 

Take the time to personalize a calendar for your friends and family and give them a gift created by you. 

We want to see your Christmas advent calendar too! Share your project in our Facebook group or use #NowYouCode to show us your calendar and prizes. 

Download Free Printable Scratch Coding Tutorials PDF

Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.

If you want to build more games in Scratch, check out our Elementary School Coding Program. It’s the most fun and effective way to learn Scratch coding and progress to real-world languages like JavaScript and Python.

We wish you all Happy Holidays and a Happy New Year.

The post Scratch Coding for Kids: Holidays Advent Calendar appeared first on CodeWizardsHQ.

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!

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 <body> 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 <h1> header for your game inside it.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
</div>

Output

Tip: Change the text inside the <h1> 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 <head>, but here’s where you can get creative. 

In your CSS, style the <h1> 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 <h1> add a div called match-grid.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
  <div id="match-grid">
  </div>
</div>

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 <script> tag at the bottom with the images variable and add your image files inside the quotes. 

Add this code:

var images = ["pumpkin.png", 
"boat.png", 
"corn.png"];

Output

Tip: You can add more image files using quotations and separating them with commas. The last image file does not have a comma at the end. (Ex: var images = [“pumpkin.png”, “boat.png”, “corn.png”, “pie.png”, “turkey.png”];)

Step 7: Style Images on the back of the cards

The images are too big and the back is showing! 

In your CSS, style the card to flip and the image on the back of the card to fit. 

Add this code:

.card_back {
  background: #ffffff;
  transform: rotateY( 180deg );
}

.card_back img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

Output

Tip: You can change the color on the back of the card and the size of the image here.

Step 8: Flip the card

Nothing happens when we click. We need to add the “is-flipped” class and a transformation when a div has this class. 

In your CSS, add this code then click a card to turn it over. The logic to match the cards should also work now. 

Add this code:

.is-flipped {
  transform: rotateY(180deg);
}

Output

Tip: We’re using CSS 3D transformations to make our card flip on click.

Step 9: Add a restart button

When the game is over, we need to reset the board and randomize our cards. Inside the game wrapper, let’s create an anchor element and connect it to our JavaScript using an onclick attribute.

Add this code:

<div id="game-wrapper">
  <h1>Thanksgiving Match Game</h1>
  <div id="match-grid">
  </div>
  <a onclick="start()">RESTART</a>
</div>

Output

Tip: Your button can say anything you want, replace the text inside your <a> tag. 

Step 10: Style the restart button

You should see your link and it should be working to restart your game. It just looks like text, so let’s change the color, font, and size to create a button.

In your CSS, style your anchor tag to look like a button.

Add this code:

a {
  font-family: 'Sniglet', cursive;
  background-color: orange;
  display: block;
  padding: 10px;
  margin: 10px;
}

Output

Tip: You can change the button and text colors to match your theme here. 

Your game is complete! 

Check out the finished product.

We want to see how you’ve styled your Thanksgiving games! 

Use #codewizardshq and #NowYouCode to share your project link and show us what you’ve created or post it in our Facebook Group. All complete projects will be added to this article. Our instructors will also be answering questions and fixing bugs in the Facebook Group. 

Ready to level up your coding experience? Take a fun html coding class with our live, expert instructors.

This year, we’re grateful for your family reading the CodeWizardsHQ blog and we wish you a very happy Thanksgiving.

Thanksgiving Game Gallery

Play the completed match games and get inspired for designing your game too.

The post HTML and CSS Tutorial for Kids: Thanksgiving Matching Game appeared first on CodeWizardsHQ.

Coding isn’t just for the techy kids anymore. The impact of technology on our kids’ daily lives highlights the importance of learning to code. Coding for kids is less about writing code and more about gaining the problem-solving, critical thinking, and analytical skills to build the future as entrepreneurs, artists, and innovators. 

If you’re a parent who wants their child to learn code, this is the best place to start. These free kid’s coding resources will kickstart your child’s interest in technology and programming through engaging games and interactive lessons.

When your child is ready to dive deeper, join our top-rated coding classes for kids. They’re the most fun and effective way for kids to learn to code in Scratch, Python, and Java.

Read on to learn more about how to teach your kids how to code and free resources that can help you along the way.

Free Coding for Kids Resources

46 of the best free classes, websites, and apps to help kids learn coding.

Free Coding For Kids Apps

CodeKarts

Ages: 4+
Format: iOS/Android

A pre-coding game for preschoolers to play. Kids learn to develop observational skills, concentration, and logic by guiding a car through various tracks.

CodeSpark Academy

Ages: 4+
Format: iOS/Android/ Kindle Fire/Windows

With over 1,000 fun, free activities and a simple-to-use interface, CodeSpark Academy is the perfect app to introduce kids 5-9 years old to programming.

Hopscotch

Ages: 4-11
Format: iOS

Create games, art, stories, and more with kid-friendly programming. Kids, ages 4-11, can program and publish unique games and apps to Hopscotch’s fully moderated community, where others can play and learn from their creations.

Scratch Jr.

Ages: 5-7
Format: iOS/Android/Kindle Fire/ChromeBook

With the ScratchJr. app, children 5-7 years old can program interactive stories and games to solve problems, design projects, and express themselves creatively on the computer. They can also play games created by kids just like them.

Move the Turtle

Ages: 6-12
Format: iOS

Using visually engaging graphics, kids as young as age 6 can implement various programming concepts to direct a virtual turtle and complete unique tasks. The app comes in both iPhone and iPad format.

Swift Playgrounds

Ages: 8-12
Format: iOS

Swift is a coding language for developing Apple iOS programs and apps. Especially useful for beginner programmers (even those with no Swift experience) Swift Playgrounds lets kids work at their own paces with visually appealing and educational challenges.

Mimo

Ages: 15+
Format: iOS

Mimo puts the power to learn in your child’s hands! With over 23 free courses to choose from and comprehensive lessons, Mimo enables kids of any age to begin coding and advance their skills.

Codea

Ages: 13+
Format: iOS

A fully customizable code editor, Codea allows users to introduce all the colors and visual aids they may desire to assist in their coding efforts. It’s a free app for kids that lets your child turn thoughts into interactive creations.

Coding Safari

Ages: 2+
Format: iOS

A free app with a focus on pre-coding skills like problem-solving, decomposition, and computational thinking. Coding Safari is engaging and educational for children as young as two years old!

Algorithm City

Ages: 8+
Format: Android

Algorithm City is a 3D style game where kids can learn the basic concepts of programming, such as command sequencing, functions and loops, and more. Play and code to make a character progress by collecting gold and solving levels.

LEGO Boost

Ages: 7-12
Format: iOS/Android

Lego Boost is an app that allows kids to build different Lego models and program them with code. Children can program their models to make sounds and move using drag and drop code.

Daisy the Dinosaur

Ages: 5-7
Format: iOS

This app teaches basic code concepts like sequencing and conditionals in the form of fun little challenges. Make Daisy the dinosaur move, jump, and dance with drag and drop commands as kids experiment and learn.

Cargo Bot

Ages: 4+
Format: iOS/Android

Students can learn to sequence with this app by choosing the preset actions of their robotic arm and putting them in the right order. These challenges can help students to think concisely and find the simplest solution to a given problem.

Box Island

Ages: 6+
Format: iOS

Box island introduces kids to fundamental coding and the basics of algorithms, pattern recognition, sequences, loops, and conditionals. The friendly characters, colorful and bright 3D game world and entertaining story parts make the experience fun for any child. Kids progress through the super fun and challenging gameplay as they build their coding skills.

Run Marco

Ages: 6-12
Format: iOS

This game uses simple commands like “move one step forward” and “repeat” to help students learn how to sequence a set of actions. Children will play and learn to modify their code to complete the task at hand, as well as design their own levels.

SoloLearn: Learn to Code

Ages: Varies
Format: iOS/Android

Aimed at older students, SoloLearn offers a list of programming languages like C, C++, JavaScript, HTML, CSS, and Python. The course starts off with the basic foundations of each language and builds as you proceed through levels. Kids and teens can even compare their skills in head-to-head challenges with others.

Grasshopper

Ages: Varies
Format: iOS/Android

This app, created by Google, teaches JavaScript for kids through mini-games they can play. It offers two courses: one for brand new coders and another for more advanced coders. For beginners, the app will take you through a set of slides explaining the basics of how to code followed by a short quiz to review and improve their understanding.

decoder

Ages: Varies
Format: iOS/Android

DCoder is a mobile code compiler. This app is meant for more experienced individuals who are looking for fast and easy ways to compile and run their programs on the go!

Recommended: Coding Apps for Kids

Free Coding For Kids Websites

RoboCode

Ages: 5+
Cost: Free

Ever heard of robot fighting? Well here is a cool alternative! RoboCode lets kids build a robot in Java or .NET in order to play and compete against other robots.

Codemoji (Ages 5-8)

Ages: 5-8
Cost: Free

Targeted at kids 5-8 years old, Codemoji.com is a unique programming website for kids where they can learn the foundations of web development in HTML, CSS, and JavaScript. Using drag-and-drop emojis, kids will be able to work through beginner, intermediate, and advanced level beginner courses to further their understanding of important concepts and how to use them.

Code for Life

Ages: 6+
Cost: Free

Code For Life is a non-profit easy-to-use resource that provides teaching and lesson plans, user guides, and engagement through our two fun coding games: Rapid Router and Kurono. Rapid Router uses Blockly to introduce kids to Python. They then advance to Kurono where they will write Python code. Play over 100 levels while you learn.

Stencyl

Ages: 6+
Cost: Free

Quickly and easily create games that you can publish to iPhone, iPad, Android, Windows, Mac, Linux & HTML5. All of that and you don’t need to write any code. The platform is drag-and-drop  and extends Scratch’s simple block-snapping interface with new functionality and hundreds of ready-to-use blocks. It’s free to use for Flash publishing and you can upgrade for more features.

Gamestar Mechanic

Ages: 7-14
Cost: Free

Learn game design and make your own video games by playing fun, game-based quests. Go on quests to power up or code your own games that you can then share with friends. It’s an easy-to-use design tool and has a library of hundreds of sprites plus a community of game developers.

Create & Learn

Ages: 7-10
Cost: Free

Create & Learn lets kids play and explore multiple interests like Scratch, robotics, and digital design. They offer a free Scratch class for getting started and host online events with top experts.

Roblox Studio

Ages: 8+
Cost: Free

Create your own games on the popular Roblox platform with Roblox Studio. Use this immersive creation engine to make any game you can imagine then share it with millions of players. There are game templates that make getting started very simple. In our Roblox camp, we use these templates to build an obby game that is personalized by the student.

CodeWizardsHQ Activities

Ages: 8+
Cost: Free

Free activities and tutorials, right here at CodeWizardsHQ. Try our Scratch, HTML, and CSS activities that are perfect for beginners and kids 8 years and older. It’s also a fun way to practice your coding skills and personalize your own games and projects. If you have questions, we’re ready to help in our STEM, Coding, and Robotics Facebook group.

Code Monster

Ages: 9-12
Cost: Free

Code Monster is an interactive tutorial where kids are guided through lessons that focus on action and results. Great for beginners as it’s a simple and gentle introduction to programming that advances from simple shapes to animation and fractals. Made for preteens, but may work for younger kids with help. 

StackOverflow

Ages: 13+
Cost: Free

This is a resource for kids and teens who want to learn a programming language by themselves, but still want the support of an experienced community of people! StackOverflow is a question and answer site meant to answer a diverse range of computer science questions.

Code Maven

Ages: 13+
Cost: Free

CodeMaven is an interactive tutorial where teens and adults can learn important programming concepts like variables, loops, conditionals, expressions, and functions are introduced by example. It’s easy to follow and has over 50+ lessons that students can finish at their own pace. 

BitDegree

Ages: 16+
Cost: Free

As one of the most popular eLearning platforms out there, BitDegree offers a multitude of fun computer science courses!

Game Maven

Ages: 16+
Cost: Free

Game Maven is part of the Crunchzilla family of games and learning tools. It’s an interactive tutorial to learn JavaScript. Follow the simple directions to code animations and games immediately. They do not offer a lot of explanation around the code though, so it’s helpful to supplement with tutorials or textbooks.

CodinGame

Ages: Varies
Cost: Free

Learn new concepts by solving fun challenges in 25+ languages addressing all the hot programming topics. In CodinGame, compete with other developers in games and contests to top the leaderboards. Kids and adults can discover new languages and algorithms or tricks.

Coursera

Ages: Varies
Cost: Free

Offering more than 1,000 courses from 119 institutions, there are a number of free introductory programming courses in various specializations from universities. This platform lends itself as a very versatile and valuable tool in learning code.

Free Code Camp

Ages: Varies
Cost: Free

HTML5, CSS3, JavaScript, Databases, React.js, Node.js, and others can be learned by joining this nonprofit’s community of students and professionals. Work together on advancing skills and work to build apps for free and help this non-profit organization.

edX

Ages: Varies
Cost: Free

Another leading online-learning platform that is open source, edX was founded by Harvard University and MIT, so you can trust you’ll learn cutting-edge skills and theories from the 50+ schools included in their material.

Udemy

Ages: Varies
Cost: Free

Udemy is an online learning platform used to improve or learn new skills. With plenty of free coding courses taught via video lessons, such as Python Frameworks, APIs, HTML, CSS, + Payments, this site is a convenient option for advancing your abilities.

AGupieWare

Ages: Varies
Cost: Free

An independent app developer that created a curriculum based on the free courses offered by Stanford, MIT, Carnegie Mellon, Berkeley and Columbia, this program is broken into 15 courses ranging in complexity and focus. Perfect for anyone looking to expand their qualifications.

GitHub

Ages: Varies
Cost: Free

While this may not be the first site you think of when wanting to learn how to code, it is definitely worth mentioning! GitHub allows students to collaborate on cool projects and look at the projects of other individuals for reference.

MIT Open Courseware

Ages: Varies
Cost: Free

The Massachusetts Institute of Technology has publicly available courses for a multitude of subjects, including programming. Kids and teens get the chance to sit in on classes from a very prestigious university!

Hack.pledge()

Ages: Varies
Cost: Free

Hack Pledge connects mentors and mentees with each other so that young programmers can learn and grow from experienced individuals.

Unplugged Activities

Ages: Varies
Cost: Free

Coding for kids can be screen-free too. If you prefer more hands-on activities, go ahead and try some unplugged activities. This is a compilation of different computerless games to play and paper activities to print. Plenty of free coding for kids resources here.

GoalKicker

Ages: Varies
Cost: Free

Do you like learning through reading? Then check out GoalKicker! GoalKicker collects a ton of free programming books so that anyone can read about different languages and ideologies.

IDE

Ages: Varies
Cost: Free

An integrated development environment is a must-have for people learning how to code. Whether the IDE be BlueJ, Eclipse, or Microsoft Visual Studio, kids will have an easy way to debug, compile, and run their code.

Recommended: Coding Websites for Kids

Free Coding Events for Kids

University Summer Camps

Ages: 4+

This one is highly dependent on your location, but many universities offer free summer camps for people that are curious about computer science! Two great free examples include University of Texas at Austin CS Summer Camps and MIT’s CS summer camps.

CoderDojo

Ages: 7-17

As a volunteer-led community of free code workshops for kids, CoderDojo teaches coding to young, interested, individuals in multiple locations around the United States.

Hackathons

Ages: Varies

There are plenty of hackathons all over the world that are not only free, but give you the chance to learn programming skills from experienced mentors, support you through your journey of bringing your cool ideas into fruition, give you swag, and give you free food!

CodeWizardsHQ, Your Partner in Coding for Kids

When you introduce your child to coding, they’re gaining skills far beyond the computer. They will have the confidence and abilities to be successful in college, career, and life. 

So, pick your favorite free resource to get started! Give your child the opportunity to code and discover the magic of being a creator.

You can also accelerate your child’s coding education by joining our top-rated coding classes for kids, risk-free. 

Explore online coding classes in Scratch, Python, and Java with a live instructor. Classes feature a structured curriculum that takes kids from coding novice to pro. View programs and enroll today.

The post Coding For Kids: 46 Free Classes, Websites, and Apps appeared first on CodeWizardsHQ.

Halloween is just around the corner and the candy hunt is on! Instead of going door to door, let’s use code to get our candy fix.

Complete this easy Scratch coding tutorial to build your own trick-or-treat candy collector game.

What is Scratch? Scratch is a 100% free block-based programming language that lets you drag and drop code blocks to build fun games and apps. Scratch is a preferred introductory programming platform for younger students and it teaches powerful programming concepts like variables, loops, and conditionals.  

[Download] Printable Scratch Coding Tutorials Get 2 printable Scratch tutorials, Rocket Landing and Flying Space Cat, to code your own games step by step. Download Now

Code this easy Scratch game then compete with your friends and family for the most candy this Halloween. 

Play Halloween Candy Collector 

What you need:

1. Scratch account: Create a free Scratch account 

2. Starter files: Download the images we are using in our game. You can also use your own images to customize your application. Download starter files

No coding experience is necessary for this tutorial. Beginner-friendly for ages 8 and up. Give it a try!

Scratch Coding: Halloween Video Tutorial

Step 1: Create a new Scratch project

Let’s start by creating a new project. 

Visit https://scratch.mit.edu/, login to your account, and click on the “Create” button.

Now, we can code your game! 

Hint: You can also remix this project and others to see the code.

Step 2: Upload background and character images

A new project will open up and you can see the Scratch interface.

In the starter files, we’ve included images for your player, the candy, game over screen, and 5 different spooky settings. 

• Start by deleting the Scratch cat sprite that appears in every new project. 
• Add all of the background images by clicking “Upload Background”. 
• Add all of the character images by clicking “Upload sprite”. 

Hint: You can use any of your own images as sprites to customize your game, select images from Scratch, or even draw your own.

Step 3: Change the size of your characters

In Scratch, your character images are called sprites. Click on each sprite, then change the “Size” property.

• Boo: Size 30
• Candy: Size 10
• Gameover: Size 70

You can also click on your “gameover” image in the preview area and drag to move the image around.

Hint: Make the candy bigger for an easier game or make it really small for a harder game. 

Step 4: Hide the “gameover” sprite

We don’t want our game to be over before we start, so let’s hide our “gameover” sprite. 

In the Scratch interface, you can see the code blocks on the left under the “Code” tab. They are arranged in categories by color. Simply click and drag the block you want into the blank code area. 

Hint: The “When Green Flag Clicked” block helps us start our program. Just click the green flag near the preview screen to run your code.

Step 5: Get your ghost moving

Next, we want our ghost follow our mouse cursor to get it moving. 

We can use a “Forever” block, which acts like a loop to repeat code. Paired with the “Go to mouse pointer” block means the ghost will forever go to the location of the mouse.

Click on your “boo” sprite to add code to it. 

Hint: You can also code your ghost to move when you press up, down, left, and right using motion blocks. Check out bonus step #10 in our KidWizardsHQ group to learn how.

Step 6: Make your candy appear in random spots

Our candy shouldn’t stay in one spot, that’s too easy. Let’s make the candy appear in a random spot each time our ghost touches it. 

Click on your “candy” sprite to add this code to it. 

Hint: You can also add a sound effect when your ghost eats a candy. Check out bonus step #11 in our KidWizardsHQ group to learn how.

Step 7: Add a 30 second time constraint

We have 5 total backgrounds. If we show each background for 6 seconds, we get a game time of 30 seconds. 

You can choose which background you want to appear first but adding a “Switch Backdrop” block under the “When Green Flag is Clicked”.

Click on the background block to add code to it. 

Hint: Add as many backgrounds as you like or change the wait time to get different game levels. 

Step 8: Show “gameover” sprite when time is up

Once we have shown each background for 6 seconds, the game is over. No more candy! 

Since our timer only has code on the background, we need to send a message to the other sprites that hey, the game has ended. 

The other sprites will wait for a message and complete some action when it’s received. We’ll call this message “stop”.

Click on the background block and add on to the block you started in Step 7.

We also want to show our “gameover” sprite once the game ends and stop the rest of the game. 

Click on the “gameover” sprite to add this code to it.

Hint: If you want to hide your “boo” and “candy” sprite at the end of the game, send them the “stop” message then hide the sprite.

Step 9: Add a score

No game is complete without a score to brag about. Our score, since it changes, is assigned to a variable. 

Create a “score” variable by clicking “make a variable” and call it “score”. Make sure the box next to your “score” variable is checked in order to show it in your game.

When you eat a piece of candy, you will want to increase the score by one. 

Click on the “candy” sprite and insert “set” and “change” variable blocks into the code.

Hint: Add another sprite with the same code, but add 5 to the score as a bonus. Or play a trick and add 0.

Your game is complete! 

Take a look at the final product, your candy collector is complete. Play Halloween Candy Collector. 

You can “see inside” our completed candy collector game to get a peek at the full Scratch code.

• BONUS Step #10 move your ghost using up, down, left, and right arrow keys
• BONUS Step #11 add sound effects when you collect candy

Recommended: Scratch Games

Download Free Printable Scratch Coding Tutorials PDF

Get the Rocketship Landing game and Flying Space Cat Scratch tutorials in a printable format.

We want to see your Halloween games! Share your game using #triCODEtreat on social media and show us your spin on this game.

If you want to build more games in Scratch, check out our Elementary School Coding Program. It’s the most fun and effective way to learn Scratch coding and eventually real-world languages like JavaScript and Python.

Happy Halloween!

The post Scratch Coding for Kids: Halloween Candy Collector Game appeared first on CodeWizardsHQ.

The evil dragon has been defeated in an epic battle, The Dragon Quest.

After a month of fierce competition, our kids coding challenge has come to an end and we were blown away with the participation and support. 

To sum it up, wow! 

When we set out to create The Dragon Quest, our goal wasn’t simply to create a fun contest for entertainment. We really wanted to create motivation for kids to start coding, to practice their coding skills, and to learn along the way … in addition to having a ton of fun.

What surprised us the most was how many kids, especially with little or no coding experience, participated and even got their families involved. From playing alongside brothers and sisters, to learning new coding concepts with mom and dad, to having their web developer uncles tutor and train them, families around the world were playing The Dragon Quest together.

That was the REAL success and our team is proud to provide this fun, educational opportunity for kids.

Here’s what some of our kids and parents had to say:

“Some of the questions were fun and some were infuriating. I learned new things such as how to read binary. The challenge overall was a nice learning experience that helped to bring the community together.”

Noah

“I think the Code Challenge is awesome! I think it can be tricky sometimes, but it’s not so hard that you can’t figure it out. I think it’s fun figuring out the challenges even when I get it wrong.”

Pali

“It is so awesome”

Ryan

“I felt very happy after I got through the 21 levels and after I defeated the dragon. And it was fun figuring out the coding levels – those were the ones I liked the most.”

Kirthana

“Really positive. My son woke up everyday looking forward to the challenge.”

Jessica

Now for the results!  

Over 1,400 challengers ages 8-18 entered the quest and an astounding 280 completed all 21 levels. They are permanently entered into our Code Challenge Hall of Fame. 

Players were represented globally and played from countries including the US, India, UK, and Spain. After a total of 4,670 votes in the final voting round, we are very excited to announce our winners.

The 2020 Dragon Quest Champions are …

Congratulations to these brave kid coders! We are so impressed with your hard work and coding skills. You are great ambassadors to coding for kids, keep up the great work.

Thank you also for the support from our sponsors, Terminal 2 and CoderBunnyz, and our non-profit partners, ChickTech and ACT+. 

And here is something to look forward to…

We’ve decided that the challenge is on for next year! 

We’ll be hosting a free kids coding challenge in 2021, details such as the theme and date will be announced soon.

Are you ready? Register for our 2021 code challenge.

Whatever you do next, we encourage you to keep coding. Build your experience with books, games, or apps, and never stop learning. 

If you want to train for next year’s challenge, check out our online coding classes for kids. Keep coding from the comfort of home and train to take home the grand prize in 2021.

The post 2020 Winners of The Dragon Quest Kids Coding Challenge appeared first on CodeWizardsHQ.