code activities Archives - CodeWizardsHQ The leading online coding academy for kids and teens ages 8-18 Tue, 26 Aug 2025 10:52:14 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://www.codewizardshq.com/wp-content/uploads/2019/10/cropped-cropped-blueHorizontal-32x32.png code activities Archives - CodeWizardsHQ 32 32 How to Make a Jumping Game on Scratch https://www.codewizardshq.com/how-to-make-a-jumping-game-on-scratch/ Wed, 28 Feb 2024 07:45:23 +0000 https://www.codewizardshq.com/?p=60835 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!

Hey there, young explorers! Ready to learn how to make a jumping game on Scratch? We’re building a Rocket Jump game where you’ll zoom through space going from platform to platform. Before we start building our game, let’s talk about Scratch. Scratch is a super cool place where you can make your own stories, games, […]

The post How to Make a Jumping Game on Scratch appeared first on CodeWizardsHQ.

]]>
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!

Hey there, young explorers! Ready to learn how to make a jumping game on Scratch? We’re building a Rocket Jump game where you’ll zoom through space going from platform to platform. Before we start building our game, let’s talk about Scratch. Scratch is a super cool place where you can make your own stories, games, and animations — like a digital LEGO set that’s all about your ideas!

📌 [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 like learning to speak the language of computers! And the best part? You don’t have to type any words or numbers. Instead, you snap together colorful blocks that look a bit like puzzle pieces. Each block is a command that tells your characters and objects what to do.

In our elementary school curriculum, students start their coding journey with Scratch. As kids build games and animations with Scratch, they’re laying the groundwork for computational thinking—a vital skill set for coding with actual code. 

Let’s start our coding journey together!

Complete this tutorial to create a jumping game on Scratch.

Play and remix the Rocket Jump game now.

What you need:

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

Steps to make a jumping game in Scratch:

  • Step 1: Setup the scratch project
  • Step 2: Make the rocket move with keyboard keys
  • Step 3: Add “gravity” to make the rocket fall.
  • Step 4: Add the platform
  • Step 5: Make the rocket jump when touching the platform.
  • Step 6: Change platform position everytime rocket touches it.
  • Step 7: Add scores in the game.
  • Bonus 1: Change costumes of the Rocketship sprite
  • Bonus 2: Increase difficulty as the game progresses

In this game, players guide a rocketship through the starry cosmos using the arrow keys to navigate left and right. The rocket automatically falls due to gravity, but upon touching the platform, it jumps upwards to earn points. Each successful landing on the platform boosts the rocket higher and changes the platform’s position, making each jump a new challenge. The aim is to keep the rocket aloft as long as possible while racking up jumps for a high score.

Step 1: Setup the Scratch project

Create a New Scratch Project

  • Open Scratch, and you’ll see a button that says “Create”. Click it, and you’re on your way!
  • At the top, you’ll find the name “Untitled”. Click on it and type in “Rocket Jump” to name your game.


Set the Stage

  • Every game needs a background. Look at the bottom-right corner for a little picture that looks like mountains. That’s the backdrop. Click it!
  • Choose a backdrop with stars to make it look like outer space. You can pick one or even draw your own.
choose a game background
  • Next, click on the picture of the cat to select a sprite. You can pick a rocket from the ones they have. 
choose a scratch sprite
  • Set its size as per your need. For rocket sprite, a size of 40 works the best.
resize the rocket in the jumping game

After we have both backdrop and sprite setup, you should have something like below in the game preview area:

Step 1 results, rocketship sprite with background

Step 2: Make the rocket move with keyboard keys

Moving Right

  • Let’s get our rocket moving. Click on the Events category, and you’ll find a block that says “when space key pressed”. Drag it out.
  • We want to move right when we press the right arrow, so click on the little dropdown arrow on that block and choose the “right arrow”.
  • Now, click on the Motion category (it’s the blue one), and find “change x by 10”. Drag that and snap it right under the “when the right arrow key pressed”.
move the rock et right and left

Moving Left

  • Our rocket should move left too! Let’s duplicate the blocks you just made. Right-click on them and choose “duplicate”.
Duplicate blocks to move
  • Change “right arrow” to “left arrow” and “10” to “-10”. Now, when you press the left arrow, your rocket will move left!
Add arrow key to move

Step 3: Add “gravity” to make the rocket fall.

Setting the Fall

  • In space, things float down slowly. We’ll make our rocket do that. Find the Events category again and use the “when green flag clicked” block.
  • We need to tell the rocket where to start. Go to Motion, find “go to x: y:” and fill in “x: -144” and “y: 123”.
  • To make it keep falling, go to Control (the orange category), find “forever,” and drag it under your “go to” block.
  • Inside “forever,” go back to Motion and find “change y by”. Put “-4” in it to make our rocket fall.
Add gravity to make the rocket fall

Step 4: Add the Platform

Creating the Platform

  • Our rocket needs a platform to jump from. Click the paintbrush to make a new sprite.
  • The click the square icon and draw a rectangle at the center of the screen. This is your platform. It can be any color you like!
Create a platform for your jumping game

Positioning the Platform

  • Let’s put the platform in place. Under Events, use “when green flag clicked” again.
  • In Motion, find “go to x: y:” and fill in “x: -154” and “y: -55”. That’s where the platform will wait for our rocket.
position the platform for the rocket to jump on

Step 5: Make the rocket jump when touching the platform.

The rocket jumps!

  • We want our rocket to bounce when it touches the platform. Inside the rocket’s “forever” loop, add the “if then else” block from the Control category. 
  • From the Sensing category (it’s the light blue one), grab “touching” and select the “Sprite1” (your platform sprite) from the dropdown.
  • In the “else” part, move the “change y by -4” block you made before.
  • For the “if” part, first, we make the rocket jump. Grab “repeat” from Control and type “15” in it.
  • Inside “repeat,” add “change y by 4” from “Motion” and “wait 0.05 seconds” from Control after it. This makes the rocket go up for a bit, like it’s bouncing!
make the rocket jump when touching platform
make the rocket jump when touching platform

Step 6: Change the platform position every time the rocket touches it.

Moving the Platform

In the rocketship sprite

  • We’ll make the platform move every time the rocket jumps. In the rocket’s code, in the “if” part, find Events and use “broadcast message1”.
change the platform position in scratch

In the platform sprite

  • Wait for that broadcast message. Use “when I receive message1” from Events
  • To change the spot, use “glide 1 secs to x: y:” from Motion.
    • Set the value of y with y position block from the Motion category. This will make sure the platform remains at the same height.
    • For x, add a random block from Operators category, and set the lower limit to -200 and upper limit to 200
broadcast message to glide

This completes our game logic, we can now move our rocket to go left and right, and use the platform to stay afloat.

rocketship jumping, game logic complete

Step 7: Add scores in the game.

Keeping track of scores

A game is no fun without the scores. To set up scores, create a new variable named Scores.

  • Click on the Variables category and choose “Make a Variable”
  • Name it Scores, press ok, and you should see it appear in your variables list. Make sure it’s checked off so it shows in your game.
make a scores variable

In your rocketship sprite, 

  • Drag the set the value of Scores variable and position it below the “When flag clicked”. Set its value to 0.
  • Inside the if condition, in the “forever” block, add the change value by 1 block. And select the Scores variable from the dropdown.
set the score in the jumping game

Your game is complete!

Bonus 1: Change costumes of the Rocketship sprite 

Change costume when jumping

To add the rotate effect in the rocket, we can change its costume when it goes up.

In the Rocketship sprite

  • Drag the “next costume” block from the looks category, and place it inside the repeat 15 block, in the if condition.
  • To reset the costume, drag the “switch costume to” block from the Looks category, and place it below the “when green flag clicked” block.
  • Select the default costume value. For the rocketship sprite, the costume rocketship-e makes perfect sense, as it doesn’t have any ignition.
change costumes
completed jumping game in scratch

Bonus 2: Increase difficulty as the game progresses

Draw more costumes in platform sprite

To increase the difficulty of the game, add costumes to the platform sprite with a smaller size of platform.

  • Select the platform sprite, and go to the Costumes tab.
  • Right click on the Costume, and select duplicate.
  • Decrease the size of the platform in the duplicated sprite.

In the Code tab of the platform sprite,

  • Add the “if then” block from the Control category and place it below “when I receive message1” block.
  • For the condition of the “if” block, use the > block from the Operators category.
  • Inside > block, add scores variable on left side, and any value of scores when you want to change platform on right side. For example, we can use 15.
  • Inside the “if” block, add the “Switch Costume” block from the Looks category, and select the costume with decreased size.
  • Add another switch costume block and place it below the “when green flag clicked” block. 

Let’s play!

It’s time to test your game by pressing the green flag above your game’s screen. 

Compete with your friends and see who can score the most scores.

Download Free Printable Scratch Coding Tutorials PDF

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

Make More Games in Scratch

CodeWizardsHQ firmly believes that initiating the exploration of technology and programming during childhood can pave the way for future success. We have designed a structured program for elementary school coding, that leverages the power of Scratch to teach coding principles.

In the first course, Animation and Games with Scratch, students delve into essential programming concepts, including variables, loops, and conditionals. By the end of this course, they will possess the ability to create their own games and animations using Scratch. This prepares them for their journey toward a future in the ever-evolving world of technology.

Our coding classes for kids allow children to nurture their skills, unleash their imaginations, and experience the joy of learning!

The post How to Make a Jumping Game on Scratch appeared first on CodeWizardsHQ.

]]>
Fun & Free Coding Activities for Kids https://www.codewizardshq.com/coding-activities-for-kids/ Fri, 13 Oct 2023 22:49:31 +0000 https://www.codewizardshq.com/?p=57850 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!

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.  Kids in my coding […]

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

]]>
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!

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

Ages: 8+

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

Flappy bird coding activity

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

Space cat coding activity

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

Rocket landing coding activity

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

Valentine's coding activity

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

Holiday coding activity

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

Halloween coding activity

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

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

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. 

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

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

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:

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.

]]>
How to Make Flappy Bird on Scratch https://www.codewizardshq.com/how-to-make-flappy-bird-on-scratch/ Fri, 28 Apr 2023 19:04:44 +0000 https://www.codewizardshq.com/?p=55986 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!

Scratch is a great tool for kids to learn how to code and it’s completely free! Anyone can use Scratch to make fun games, stories, and animations by dragging and dropping different blocks of code. It’s really easy to use and perfect for beginners who want to be creative and solve problems with coding. In […]

The post How to Make Flappy Bird on Scratch appeared first on CodeWizardsHQ.

]]>
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!

Scratch is a great tool for kids to learn how to code and it’s completely free! Anyone can use Scratch to make fun games, stories, and animations by dragging and dropping different blocks of code. It’s really easy to use and perfect for beginners who want to be creative and solve problems with coding. In this article, I’ll show how to make a flappy bird game on Scratch without any text-based 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

In the Flappy Bird game, the player guides a bird through the sky avoiding a series of obstacles. When the bird collides with an obstacle, the game is over. This type of project has proven to be highly interactive and fun in the Scratch classes I’ve taught here at CodeWizardsHQ. In the Elementary School Core Track, students learn how to build their own interactive games while mastering important programming concepts such as variables, loops, and more.

It’s amazing to see how much kids enjoy this type of project and how much they learn along the way.

Complete this Scratch tutorial for kids to build a Flappy Bird game.

completed flappy bird scratch game

Play and remix the Flappy Bird game now. Avoid the obstacles to increase your score.

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!

Video Tutorial: How to Make Flappy Bird in Scratch

How to Make Flappy Bird on Scratch

  1. Login to Scratch
  2. Create a New Project
  3. Name Your New Project
  4. Choose a Backdrop
  5. Choose a Sprite
  6. Resize and position the sprite
  7. Add the first code block
  8. Set the sprite’s starting position
  9. Add gravity to the game
  10. Make gravity slower
  11. Make the bird fly up
  12. Design the Game’s Obstacle
  13. Animate the Obstacle
  14. Randomly Position the Obstacle
  15. End the Game Upon Collision
  16. Test your game!

1. Login to Scratch

Login to scratch to build flappy bird

2. Create a New Project

  • Once you are logged in, click the blue Create button at the top of the page.
create a new scratch project

3. Name Your New Project

  • Give your project a name, for example, “Flappy Bird Game”. 
  • Then delete the Scratch cat by clicking the trash can icon next to the sprite.
How to Make Flappy Bird on Scratch Name your project

4. Choose a Backdrop

  • Select the Choose a Backdrop option at the bottom right-hand side of your screen.
choose a backdrop
  • When the Choose a Backdrop screen opens up, select a background for your Flappy Bird game. In this tutorial, I chose “Jungle”, but you can choose whatever you’d like!
Choose a backdrop

5. Choose a Sprite

  • Then, go to the Choose a Sprite option, which is next to the “Choose a Backdrop” section.
Choose a sprite
  • Select a bird sprite of your choosing. We selected the Parrot sprite, which is suggested if you want to create a flapping motion for the character.
select parrot sprite

6. Resize and Position the Sprite

  • Resize your sprite by changing the Size textbox, we changed it to 50 in this tutorial. 
  • Then, click and drag the sprite shown to the left of the game, since the pipes will be moving from the right to the left.
How to Make Flappy Bird on Scratch resize and position scratch sprite

7. Add the first code block

  • Go to the Events category, then click and drag a when green flag clicked events block into your code area.
Add when green flag clicked

8. Set the sprite’s starting position

  • Go to the Motion category and drag a go to x and y block under your when green flag clicked block. This will make sure the player begins at the same place every time the game is loaded.
How to Make Flappy Bird on Scratch Set sprite position

9. Add gravity to the game

  • Then, in the Control block category, drag a forever block and attach it under the go to x and y block.
Add gravity to game
  • Go back up to the Motion category and get a change by y motion block, then drag it directly into the forever block. 
  • Change the value in the textbox of the change by y block to -15. Now when you press the green flag icon above your game, the bird will drop really fast!
Add change position block

10. Make gravity slower

  • To fix the bird from falling so quickly, put a wait block from the Control category before the change y by block. 
  • Change the value in the textbox to about 0.1.
Slow down gravity

11. Make the bird fly up

  • Now let’s make it so the player can interact with the game! Grab a when space key pressed block from the Events category and drag it into the code area.
How to Make Flappy Bird on Scratch When space key pressed block
  • Go to the Motion category and get a change y by block and put it below the when space key pressed block. Now the player can make the bird fly up! NOTE: Check out the bonus after this tutorial which will show you how to make the bird’s wings flap as they fly.
Motion block

12. Design the Game’s Obstacle

  • Click on the paint option from the New Sprite button to create a pipe sprite.
scratch game obstacle
  • Select a color of your choice from the Fill option, then select the square from the list of tools.
Draw obstacles
  • Click and drag the square to create two pillars or tubes that will be obstacles for the game. Reposition and resize the pipes as needed.
draw obstacles

13. Animate the Obstacle

  • Click on the Code tab and drag a when green flag clicked block from the Events category into the code area. Attach a forever block from the Control category.
How to Make Flappy Bird on Scratch animate scratch obstacle
  • Next, go the the Motion category and drag a set y to block, set x to block, and a glide to x and y block inside the forever block. 
  • In the set x to block, change the textbox to say 275. This makes it so the pipes will start on the right side of the screen!
animate scratch motion block
  • Update the glide block to glide for 2 seconds and change the x value to -275, so that it moves to the left of the screen. 
  • Then, in the Motion category, drag a y position block inside of the y value in the glide block.
glide block

14. Randomly Position the Obstacle

  • Test your project, you’ll notice that the pipes stay at the same position every time they move toward the player. 
  • To fix this, go to the Operators category and grab a pick random block and drag it into the set y to block. 
  • Change its values to something like -65 and 65.
position obstacles in scratch

15. End the Game Upon Collision

  • Nothing happens when the parrot collides with the pipe! Let’s get a when green flag clicked block from the Events category and a forever block from the Control category to set this up.
How to Make Flappy Bird on Scratch game collision in scratch
  • From the Control category, get an if then block and put it inside the forever block.
game collision in scratch
  • Then, go to the sensing category and get a touching mouse-pointer block. Drag that into the if then block. 
  • Click the mouse-pointer option to change it to Parrot instead
if then block
  • Go to the Control category and get a stop all block and put that inside the if then block. This will stop the game when the Parrot and pipes collide!
if then block

16. Test your game!

  • The game should stop when the bird collides with the pipes. Check out the completed project here.
completed flappy bird scratch game


Bonus 1 – Adds a points system

1. Create a variable

  • In your Flappy Bird Project, go to the Variables category and right-click on the variable called my variable. It’s right below the Make a Variable button.
  • Then, select the Rename Variable option.
bonus 1 step 1 flappy bird



2. Name the variable

  • In the popup window, type score for the name, then click OK.
bonus 1 step 2 flappy bird

3. Display the Score

  • Then, click the checkbox next to the score variable. This makes the score show up in your game.
bonus 1 step 3 flappy bird

4. Update the score

  • Then, in the Variables category, drag a set score to 0 block right under the when green flag clicked block. 
  • Also get a change score by 1 block and put it under the glide block.
bonus 1 step 4 flappy bird

5. Test the game!

  • Test your game, you should be able to get a score now when you play the game

Bonus 2 – Make the bird’s wings move as you play the game

1. Select the Sprite

  • First, make sure you click the Parrot sprite from the sprites list.
bonus 2 step 1 flappy bird

2. Switch the Sprite’s costume

  • Go to the Looks category and grab a switch costume block for inside the forever block and under the when space key pressed block. 
  • Make sure that you are using parrot-a in the forever block and parrot-b under the when space key pressed block.
bonus 2 step 2 flappy bird

3. Test the Game

  • Do your Parrot’s wings flap? Then, your project is complete, great job!
bonus 2 step3 flappy bird

What is Scratch coding?

Scratch is a block coding language that helps kids learn about computer science. It runs on it’s own web-based platform and is free for anyone to use. It works by taking snippets of code and grouping them into colorful blocks. The blocks can be snapped together to form longer, more complex codes. The more blocks that you use, the more complex the code becomes creating exciting games and apps. It is often used as an educational platform and we highly recommend it for kids ages 8-10 because it doesn’t require strong typing skills. This is a fun and safe coding sandbox for kids to learn fundamental coding concepts and develop their problem-solving and computational thinking. Find out more about Scratch coding for kids.

More Scratch Tutorials & Games

Now that you’ve built your Flappy Bird Game in Scratch, check out these other fun Scratch game tutorials!

  • Flying Space Cat – Assist Space Cat in its space exploration mission by developing an enjoyable crystal-collecting game using Scratch programming platform.
  • Code a Rocket Landing Game – Finish this Scratch programming tutorial designed for children and build a game where you safely land a rocket.
  • Valentines Day Card Scratcher – Create a Valentine’s Day scratch-off card with a personal touch by following this easy-to-follow Scratch programming tutorial.
  • Holidays Advent Calendar – Use Scratch to program a customized Advent Calendar for the holiday season and gradually unveil presents, treats, or activities to share with your friends and family.
  • Halloween Candy Collector Game – Follow this simple Scratch programming tutorial and create a personalized game where you collect candies on Halloween.

Download Free Printable Scratch Coding Tutorials PDF

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

Try a Scratch Coding Class for Kids

At CodeWizardsHQ, we believe that learning about technology and programming at a young age can help you succeed in the future. Our coding program for kids in elementary school uses Scratch to teach them how to code.

In the first course, Animation and Games with Scratch, students learn important programming concepts like variables, loops, and conditionals. By the end of the course, kids will be able to make their own Scratch games and animations. This helps them get ready for more advanced coding and a future in technology. Enroll your child in our top-rated coding classes today.

Coding games in Scratch lets kids learn a useful skill while having fun and discovering something new!

The post How to Make Flappy Bird on Scratch appeared first on CodeWizardsHQ.

]]>
Scratch Tutorial For Kids: Flying Space Cat https://www.codewizardshq.com/scratch-tutorial-for-kids-flying-space-cat/ Mon, 05 Dec 2022 14:00:00 +0000 https://www.codewizardshq.com/?p=53874 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!

Space Cat is on a mission to collect as many crystals as possible to fuel his spaceship! Using the Scratch platform, let’s build a fun collecting game to help Space Cat with its mission. Collecting is a popular mechanic in games and can be easily coded in Scratch with the same basic logic. From weapons […]

The post Scratch Tutorial For Kids: Flying Space Cat appeared first on CodeWizardsHQ.

]]>
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!

Space Cat is on a mission to collect as many crystals as possible to fuel his spaceship! Using the Scratch platform, let’s build a fun collecting game to help Space Cat with its mission.

Collecting is a popular mechanic in games and can be easily coded in Scratch with the same basic logic. From weapons to badges, collecting can keep players striving to achieve more in your game. 

In this game, the goal is to collect as many crystals as possible, but if you miss three crystals the game ends. This tutorial shows you how to code this game from start to finish and you can customize it with your own images and messages. 

📌 [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 game and see how many crystals you can collect!

Play Flying Space Cat game.

Scratch tutorial complete

What you need:

Scratch account: Create a free Scratch account 

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

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

Step 1: Create a new Scratch project

Let’s start by creating a new project. 

Scratch tutorial create project

Now, we can code your Flying Space Cat game! 

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

Step 2: Add a scrolling background

To give the effect of moving through space, we created a simple scrolling background.

  • 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 “Galaxy” backdrop.

The stars will move while the backdrop stays in place.

  • Click upload sprite and upload the stars.png file
  • Change the size of the Stars sprite to 50 and position it on the screen
  • Add the “When Green Flag Clicked” block from the “Events” category
  • Use a “Forever” block with the “Go to Back Layer” block to make sure the stars show behind other sprites.
  • Then, use a “show” block to make the stars visible
  • Position them with the “go to” block and use the “glide” block to move it left for 10 seconds. 
  • “Hide” the sprite when it reaches the edge of the screen and the forever block will start this animation over again.
Flying space cat scratch tutorial step 2

Hint: Add more images or use a different image than stars.png to customize your scrolling background.

Step 3: Add flying cat and move it

Let’s position our flying cat and add the logic to move it up and down with arrows.

  • Select “Choose a Sprite”, find the Cat flying sprite, and click to add it
  • Use the “Go to” block to position the sprite at x= -150 y=0
  • Add music with the “Forever” and “Play Sound Until Done” block. We’re using the Dance Magic sound which you can add in the Sounds tab.
Flying space cat scratch tutorial step 3A

Now, add logic to the arrow keys so our cat moves up and down when we click.

  • Under events choose the “when key pressed” block and select “up arrow”
  • Underneath use a “change y by” block and enter 5 to move up
  • Go back to events,  choose the “When key pressed” block and select “down arrow”
  • Underneath use a “change y by” block and enter -5 to move down
Flying space cat scratch tutorial step 3B

Hint: Change the music by adding more sound options in the “Sounds” tab. Then select them in the “play sound” block.

Step 4: Show random crystals and move them

We want random crystals to appear on the right side of the screen and move toward the left. 

  • Select “Choose a Sprite”, find the Crystal sprite, and click to add it
  • Add the “When Green Flag Clicked” and a “Forever” block underneath it to repeat the movement of the crystals
  • Go to the “variables” blocks and “Make a variable”, name it Y-Position, and uncheck it
Flying space cat scratch tutorial step 4A
Flying space cat scratch tutorial step 4A
  • Inside the “forever” block “show” the crystal and set it to a random position on the right side using “go to x” with x=240 and y=y-position
  • Then, glide 2 seconds to x=-240 and y=y-position
  • Use “set” y-position to a random number between 100 and -100, so it shows up in a different position next time
  • “Hide” the crystal then wait a random amount of time between 1 and 2 seconds to repeat the loop
Flying space cat scratch tutorial step 4B

Hint: Select a different sprite or draw your own sprite to customize your collection item.

Step 5: Add up losing crystals

When a crystal flies by us and we don’t catch it, we want to count it. When we reach 3 crystals, the game is over. Let’s add on to the code you started in Step 4.

  • Go to the “variables” blocks and “Make a variable”, name it Crystal, and uncheck it
  • Under “when green flag clicked” set the Crystal variable to 0
  • Create an “if” block with the condition “touching edge”.
  • Inside this “if” block, change the crystal variable by 1. Add it under the “hide” block. Now each time it touches the edge, we add one. 
Flying space cat scratch tutorial step 5A
  • Add another “if” block inside the first “if” block. Use the condition “crystal = 3”.
  • Then we will broadcast a new message named “Game Over”
  • Add a “stop all” block to stop the game once the number of crystals reaches 3.
Flying space cat scratch tutorial step 5B

Hint: You can give different names to your variables, just make sure you are using the right variable in your code.

Step 6: Increase score for gaining crystals

Every time our flying cat touches a crystal, we want to increase our score. In addition to increasing the score, we will also decrease the count of the crystal variable. We do this because even though we are hiding the crystal, it still touches the edge each time.

  • Go to the “variables” blocks and “Make a variable”, name it Score. Keep it checked so it shows on your game screen.
  • Add the “When Green Flag Clicked” and set the Score to 0
  • Next, add a “Forever” block underneath
Flying space cat scratch tutorial step 6A

Inside the forever block, we will add to the game score every time our cat touches a crystal.

  • Use an “if” block with the condition “touching cat flying” sprite
  • Add the “start sound” block and select “magic spell” for a sound effect
  • Then change the score variable by 1 and the crystal variable by -1
  • Hide the crystal once it’s collected 
Flying space cat scratch tutorial step 6B

Hint: Change the variable “score” to give yourself more points for each crystal. Make sure to also decrease “crystal” by the same amount.

Step 7: Show “Game Over” screen

Your game is almost complete! Let the players know when the game is over by showing a game over screen. This will trigger when you’ve missed three crystals.

  • Select “paint” under sprites and rename this sprite Game Over.
  • In the costumes tab, select the rectangle tool and click and drag to draw a rectangle
  • Then, use the type tool with font “marker” and add the message “Game Over”
  • Adjust the message on your game screen
Flying space cat scratch tutorial step 7A
  • Go back to the “Code” tab 
  • Add the “When Green Flag Clicked” and hide block. That means this message will not show when the game starts
  • Add the “receive broadcast” block and select game over. This is the message we sent from the crystal sprite when the crystal variable reached 3.
  • Then, add the “stop all” block to end the game.
Flying space cat scratch tutorial step 7B

Hint: You can change the font, colors, and text for your Game Over message in the “Costumes” tab. 

Your Flying Space Cat game is complete!

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. 

Flying space cat scratch tutorial complete

See the complete Flying Space Cat game.

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

How To Make a Game on Scratch

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. Classes are live, online with an experienced instructor that is there to support you every step of the way. 

Ready to level up your child’s learning experience? Try the best online coding classes for kids.

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

]]>
Our 2nd Annual Code Challenge Launches April 5 https://www.codewizardshq.com/code-challenge-2021-launches-april-5/ Mon, 08 Mar 2021 23:36:15 +0000 https://www.codewizardshq.com/?p=39210 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!

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 […]

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

]]>
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!

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? 

code challenge banner

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. 

2021 code challenge calendar

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.

]]>
Scratch Coding for Kids: Valentine’s Day Card Scratcher Activity https://www.codewizardshq.com/scratch-coding-for-kids-valentines-card-2021/ Wed, 03 Feb 2021 03:03:09 +0000 https://www.codewizardshq.com/?p=37682 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!

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. Follow this easy Scratch coding tutorial to build a Valentine’s Day scratcher that reveals a personalized card. What is Scratch? Scratch is […]

The post Scratch Coding for Kids: Valentine’s Day Card Scratcher Activity appeared first on CodeWizardsHQ.

]]>
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!

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.

Valentine's Scratcher game

What you need:

  1. Scratch account: Create a free Scratch account 
  1. 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.

Valentine's Scratch tutorial step 1

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.

Valentine's Scratch tutorial step 2

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. 

Valentine's Scratch tutorial xy position

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
Valentine's Scratch tutorial step 3
Valentine's Scratch tutorial step 3.2
  • Click on the scratcher heart and place it on top of the first candy heart using “Go Forward 1 Layers” block. 
Valentine's Scratch tutorial step 3.3
Valentine's Scratch tutorial step 3.4

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
Valentine's Scratch tutorial step 4

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”
Valentine's Scratch tutorial step 5

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

Valentine's Scratch tutorial step 5.2

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
Valentine's Scratch tutorial step 6
Valentine's Scratch tutorial step 6.1

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.
Valentine's Scratch tutorial step 7
Valentine's Scratch tutorial step 7.2

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)
Valentine's Scratch tutorial step 8
Valentine's Scratch tutorial step 8.2

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.

Valentine's Scratch tutorial step 8.3
Valentine's Scratch tutorial step 8.4

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
Valentine's Scratch tutorial step 9
Valentine's Scratch tutorial step 9.2

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
Valentine's Scratch tutorial step 10
Valentine's Scratch tutorial step 10.2

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. 

Complete Valentine's Scratcher

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.

]]>
Scratch Coding for Kids: Holidays Advent Calendar https://www.codewizardshq.com/scratch-coding-for-kids-holiday-2020/ Wed, 16 Dec 2020 04:18:37 +0000 https://www.codewizardshq.com/?p=35850 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!

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!).  It’s been a little harder to shop for gifts […]

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

]]>
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!

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

Complete scratch holiday calendar

What you need:

  1. Scratch accountCreate 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.

Step 1 scratch holiday calendar

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.
Step 2 scratch holiday calendar

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 3 scratch holiday calendar

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.
Step 4 scratch holiday calendar

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.
Step 5 scratch holiday calendar

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.
Step 5 b scratch holiday calendar

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.
Step 6 scratch holiday calendar

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.
Step 7 scratch holiday calendar

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 8 scratch holiday calendar

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 9 scratch holiday calendar

Step 10: Repeat until complete 

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

Step 10 scratch holiday calendar

Your advent calendar is complete!

See Complete Christmas Advent Calendar

Complete scratch holiday 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.

]]>
25+ Free Hour of Code Activities & Games for Kids https://www.codewizardshq.com/25-free-hour-of-code-activites/ Wed, 02 Dec 2020 01:12:40 +0000 https://www.codewizardshq.com/?p=35451 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!

This year, Computer Science Education Week is taking place on December 9-15, 2024. Now is the time to celebrate! Break out the laptops, mechanical keyboards, iPads, or even pencils – whatever you’re coding with for these free Hour of Code activities. What is Computer Science Education Week? Computer Science Education Week (CSEdWeek) is an annual […]

The post 25+ Free Hour of Code Activities & Games for Kids appeared first on CodeWizardsHQ.

]]>
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!

This year, Computer Science Education Week is taking place on December 9-15, 2024. Now is the time to celebrate! Break out the laptops, mechanical keyboards, iPads, or even pencils – whatever you’re coding with for these free Hour of Code activities.

What is Computer Science Education Week?

Computer Science Education Week (CSEdWeek) is an annual call to action to inspire K-12 students to learn computer science, advocate for equity in computer science education, and celebrate the contributions of students, teachers, and partners to the field.

What is Hour of Code?

The Hour of Code started as a one-hour introduction to computer science, designed to demystify “code”, to show that anybody can learn the basics, and to broaden participation in the field of computer science. It has since become a worldwide effort to celebrate computer science, starting with 1-hour coding activities but expanding to all sorts of community efforts. This grassroots campaign is supported by over 400 partners and 200,000 educators worldwide.

For organizations that are dedicated to coding and STEM education, this week is a time for us to introduce more kids to coding in a simple and fun way.

One of the best ways to participate is through Hour of Code. Spend one hour this week coding and see if coding is right for you. If you’re a teacher, organize an Hour of Code for your class. You can start with the activities below or get creative and create your own.

We’ve compiled some of our favorite free games and Hour of Code activities here for you. We have over 25+ Hour of Code activities, games, and tutorials for kids and teens of all ages. It’s never too late or too early to learn computer science and we encourage every child to try. These activities are beginner-friendly and easy to complete.

Free Hour of Code Activities for Kids

Here are some of the best Hour of Code games, tutorials, and activities for all ages.

Blue CodeWizardsHQ Logo

1. Hour of Code Tutorials

Grades K – 12

Fun and easy tutorials in Scratch, HTML/CSS, JavaScript, and Python that kids can do in just one hour. They’ll get step-by-step instructions on how to build an Hour of Code game or app. These are fun coding activities for beginners and students practicing their coding skills.

Tynker logo, hour of code

2. Tynker Hour of Code

Grades K – 12

For students and teachers, Tynker has over 500 challenges in 14 coding puzzles and 40+ tutorials. You can check out these Hour of Code activities by grade or topic that feature themes like Barbie and Hot Wheels. If you’re looking for inspiration, the gallery is full of fun examples from other kids.

Virutal robotics competition

3. Virtual Robotics Competition

Grades 1 – 12

Tech Point Youth is celebrating in Indiana with a robotics coding challenge. Students will code their way through one of the activities using VEXcode VR for a chance to win a $100 Amazon gift card. Play with a team, even if you can’t meet, and complete this Hour of Code robotics activity from the comfort of your own home.

Kodable unplugged for hour of code

4. Unplugged Coding Activities

Grades K – 5

Go sans screen time with Kodable’s coding unplugged collection of Hour of Code games and lessons. No computer? No problem! Learn basic programming skills and practice using core coding commands without the use of a device.  Students will watch a video about programming (optional), then complete self-guided worksheets about coding basics. All worksheets will include instructions and examples so you can get started right away.

Drawing with code

5. Hour of Drawing with Code

Grades 3+

Learn how to draw and color with code. Draw a snowman, wild animal, and even a self-portrait using JavaScript. You can also choose the hour of webpages or the hour of databases track. You won’t need to download anything because the coding editor is embedded in the website.

AI Lessons

6. AI Lessons Unplugged

Grades K – 5

Free unplugged lessons about Artificial Intelligence and machine learning from Edsquare. It’s available in 2 versions: online (Google Slides) and printables. You get 5 activities for elementary school learning activities that make AI simple and fun for kids.

Frozen coding csed week

7. Code with Ana and Elsa

Grades K – 5

Use these Hour of Code activities to join Anna and Elsa as they explore the magic and beauty of ice. You will create snowflakes and patterns as you ice-skate and make a winter wonderland that you can then share with your friends. Watch the video for hints and a walkthrough of the code in Blockly.

Escape room code

8. Digital Escape Room

Grades K – 5

Your class is ready to code when a firewall goes up and no one can get online! In this Hour of Code activity, your teacher needs you to use logic and reasoning to break through and save the day in this digital escape room. Clues are all around and might even be hidden in the Blockly maze game.

Generation AI minecraft hour of code

9. Generation AI

Grades 2 – 12

Venture through time to create AI-powered inventions in the new Minecraft Hour of Code: Generation AI. Kids use problem-solving, creativity, and computational thinking with the principles of Responsible AI. Code in blocks or Python to learn the basics of coding and how to build a better AI for all.

code combat logo

10. Code Combat Hour of Code

Grades 6+

Embark on an epic quest to learn coding. You will take control of the games using your programming skills. Learn JavaScript and Python by completing these activities complete with video and lesson plans.

Minecraft Hour of Code

11. Minecraft Hour of Code

Grades 2+

Minecraft has teamed up with Code.org for a new Minecraft Hour of Code activity: Minecraft Generation AI. This year’s lesson is offered in both Blocks and Python. The free lesson is available to all users, even those who don’t currently have a Minecraft: Education Edition license. 

Recommended: Summer Minecraft camps

Lego Plants and Pollinators

12. Lego Plants and Pollinators

Grades 6+

Using a LEGO representation, you will model the relationship between a pollinator and flower during the reproduction phase. This Hour of Code activity includes lessons and materials for both teachers and students. 

google cs first unplugged

13. Google CS First

Grades 4 – 8

Explore computer science without a computer. CS First includes a free printable booklet for coding unplugged that contains three computational thinking activities in which students learn about how computer science helps us communicate and stay connected with people around the world. You get a print-friendly booklet and other materials that don’t require any technology.

google code your hero

14. Code Your Hero

Grades 3 – 5

Choose an everyday hero from their own lives and build a story or game using code that gives their hero superpowers. You can read over the free lesson plan and watch videos. Follow along to learn about computer science and Scratch, and turn an everyday hero into a superhero.

CodeHS

15. CodeHS

Grades 9+

High school students have a host of Hour of Code tutorials with CodeHS. Use react native to code a mobile app, do web design and digital art, or learn the basics of Java. They even have something for advanced topics like cryptocurrency and data visualization. 

CodeBytes coding tutorials

16. CodeBytes Daily Live Mini-Lessons

Grades K – 12

Interactive mini-lessons from CodeBytes are fun and simple, only 20 minutes each. Train a computer for AI, simulate a virus outbreak, or take a journey with Minecraft in these fun Hour of Code activities.

Recommended: 7 Free Printable Coding Worksheets

Star wars hour of code

17. Building a Galaxy With Code

Grades 1+

The force is strong with this Hour of Code activity! Code.org challenges you to build a galaxy with code. You can use drag-drop blocks in the Blocky platform or combine that with JavaScript to move your droid and collect the pieces needed to accomplish your mission.

Code Monkey, coding website for kids

18. Monkeying Around

Grades Pre-K – 6

Non-readers can start learning coding fundamentals with CodeMonkey Jr. while older students can start playing with CodeMonkey. Use these mini lessons to learn block programming using sequencing, loops, logic, and more. Teachers can get access to solutions and lesson plans with a free account.

Tinkercad 3D

19. Tinkercad 3D

Grades 3+

Tinkercad is a free online collection of software tools that help students create in 3D. Interactive learning activities help beginners take their first steps in computational design and modeling. They also feature 28 interactive lessons on exploring physical computing and coding with Arduino, which is a great learning tool for kids interested in coding and hardware.

Moana Hour of Code

20. Moana Hour of Code

Grades 3+

Disney princess Moana takes you on a quest wayfinding with code. Join Auli’i Cravalho, the voice of Disney’s Moana, and get involved with Hour of Code! Team up with a virtual village of coders to stop the Kakamora coconut pirates from wrecking the internet. Complete 19 lessons to defeat the Kakamora and earn your badge.

Vex robotics coral cleanup

21. Coral Reef Cleanup

Grades 3+

This aquatic challenge is a great place to learn, whether you’re a beginning block coder or have experience. Vex Robotics gives you different levels based on experience. In the Coral Reef Cleanup activity, you are equipped with a VR Ocean Cleaning Robot to help clean the Mangrove Reef. Collect as much trash as you can before the solar-powered batteries on your robot run down. 

Dance party

22. Hour of Code Dance Party

Grades K – 12

One of my favorite things to do with my students, host a dance party! This was a popular new activity from last year and it includes popular songs from your favorite artists that you can’t help but dance to. Complete the free hour and try the extended project to keep dancing. 

Caesar Cipher

23. Crack a Caesar Cipher!

Grades 9+

Learn about simple encryption in this lesson. You will be introduced to why we need encryption and simple techniques for breaking (or cracking) secret messages. 

Hour of Code with Your Besties

24. Hour of Code with Your Besties!

Grades 3+

Vidcode teamed up with Girl Scouts of Greater New York for a series of free coding activities centered on a shared commitment to give teen girls leadership and STEM opportunities. Vidcode teaches teens computer programming through one of their favorite hobbies: video-making. Try these collaborative, social, and creative coding activities.

Khan Academy Coding App Logo

25. Khan Academy

Grades 6+

Use HTML/CSS and JavaScript SQL to draw with code, build websites, or play with data in these Hour of Code activities. The coding editor is built into the website so there’s no setup and you learn using talk-throughs, challenges, and projects designed to teach all of the basics.

Don’t be intimidated, try coding for just one hour.

Code builds the world around us and digital literacy can help kids find success in college, career, and beyond.

Hopefully, these activities inspire and educate you. You can also take your coding skills to the next level with live, online coding classes at CodeWizardsHQ. They’re the most fun and effective coding classes for kids ages 8-18. Enroll today.

Thanks for celebrating Computer Science Education Week with us! 

The post 25+ Free Hour of Code Activities & Games for Kids appeared first on CodeWizardsHQ.

]]>
HTML and CSS Tutorial for Kids: Thanksgiving Matching Game https://www.codewizardshq.com/html-css-tutorial-thanksgiving-matching-game/ Fri, 13 Nov 2020 01:28:50 +0000 https://www.codewizardshq.com/?p=35000 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 […]

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

]]>
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

Thanksgiving Coding Activity Gif

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.

Thanksgiving Coloring Activity

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

Thanksgiving Coding Activity - Step 1

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

Thanksgiving Coding Activity - Step 2

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

Thanksgiving Coding Activity - Step 3

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

Thanksgiving Coding Activity - Step 4

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

Thanksgiving Coding Activity - Step 5

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

Thanksgiving Coding Activity - Step 6

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

Thanksgiving Coding Activity - Step 7

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

Thanksgiving Coding Activity - Step 8

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

Thanksgiving Coding Activity - Step 9

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

Thanksgiving Coding Activity - Step 10

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

Your game is complete! 

Check out the finished product.

Thanksgiving Coding Activity Gif

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.

Elementary School Coding Banner 2020

Thanksgiving Game Gallery

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

Thanksgiving Match Game Theme
Thanksgiving Match Game Pusheen Theme

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

]]>
Coding For Kids: 46 Free Classes, Websites, and Apps https://www.codewizardshq.com/coding-for-kids-free/ Sun, 01 Nov 2020 14:00:00 +0000 https://www.codewizardshq.com/?p=21692 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!

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 […]

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

]]>
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!

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, free app

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

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 code app

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.

scratchjr, free coding for kids

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

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 coding playgrounds

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

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 editor

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 and up

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

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 iphone android app

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

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.

cargobot

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

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

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 programming

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 logo

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.

dcoder mobile compiler

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, coding for kids free

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 coding game

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

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 free coding app

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

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 and learn, coding for kids free

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

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.

Now you code activities at codewizardshq

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 coding for kids

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. 

stack overflow

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 coding for kids

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. 

bit degree

BitDegree

Ages: 16+
Cost: Free

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

code maven coding for kids

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.

codin game

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.

coding for kids free, coursera

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.

freecodecamp

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

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.

coding for kids free, udemy

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.

agupie

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

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.

MITocw

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

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.

cs unplugged coding activities

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.

coding for kids free, goalkicker

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

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

summer camp

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.

coding for kids free, coderdojo

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.

coding for kids free, hackathon

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.

]]>