Author: Margaret Choi

December 2, 2020
banner for kids online learning statistics

Kids Online Learning Statistics for 2020

Education in 2020 has made a significant shift to the online classroom and remote learning. 

Conducted by OnePoll on behalf of CodeWizardsHQ, we surveyed 2,000 American parents of school-aged children and examined both parents and students’ biggest challenges with digital learning during this unique school year. 

Read our top kids online learning statistics and download the infographic.

(more…)
December 1, 2020

25+ Free Hour of Code Games & Activities for Kids

This year, Computer Science Education Week is taking place on Dec 7-13. Now is the time to celebrate! Break out the laptops, mechanical keyboards, iPads, or even pencils – whatever you’re coding with.

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. CodeWizardsHQ also commits to fundraising for PTAs and nonprofit organizations through our 1-hour classes this week. We’re proud to be a part of the #CSEdWeek movement each year and want you to celebrate with us.

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

1. 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 coding 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.

2. 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 do this robotics activity you can complete from the comfort of your own home.

3. 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.

4. 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.

5. Build Alongs with BlocksCAD

Grades 4+

BlocksCAD, is a cloud-based 3D modeling tool that encourages kids to learn math, computational thinking, and coding concepts through visualization and designing models.They’re hosting a full schedule of one-hour live 3D design and coding workshops for students that can be completed at home. Build a bracelet, 3D robot, Mars Rover, and more!

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.

7. Code with Ana and Elsa

Grades K – 5

Use code 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.

8. Digital Escape Room

Grades K – 5

Your class is ready to code when a firewall goes up and no one can get online! 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.

9. Code an Impact Game

Grades K – 12

Create and modify a Scratch game into an impact game, a game that’s designed for the player’s entertainment AND to make a change in the world with a mission beyond entertainment. You’ll research an important issue and design a game where players can learn about your important issues in a unique and fun way.

coding for kids: 46 free classes, websites, and apps

10. JavaScript in Grasshopper

Grades 6+

Learn to code through byte-sized puzzles. Grasshopper teaches beginning adult learners to write real JavaScript, but this project and platform are simple enough for kids to use and understand. This is a code by Google program.

11. Minecraft Hour of Code

Grades 2+

Minecraft has teamed up with Code.org for a new Minecraft Hour of Code activity: A Minecraft Tale of Two Villages. In this new Hour of Code activity, students will be in a world where there are two villages. For centuries, the Villagers and Illagers shared the same space but NEVER interacted with each other. Now you can use the power of code to bring the two villages together. This year’s lesson is offered in both Blocks and Python. The demo lesson is available to all users, even those who don’t currently have a Minecraft: Education Edition license. 

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 project 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 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 life and build a story or game using code that gives their hero superpowers. You can read over the lesson plan and watch videos. Follow along to learn about computer science and Scratch, and turn an everyday hero into a superhero.

15. Capture the Flag Cybersecurity Competition

Grades 6+

Cyber.org is celebrating CSEd Week alongside Nola_Code and CSEd advocates of New Orleans. They’re kicking off the week with a virtual Capture the Flag competition. A CTF is a format for a fun, interactive cybersecurity competition where competitors will test their knowledge in categories such as encryption, network security, reverse engineering, or programming. This event is ideally suited for high school students but may be engaging for some middle school students. The competition is free and open to all who are interested and will run through the entire week.

16. CodeHS

Grades 9+

High school students have a host of hour-long 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. 

17. CodeBytes Daily Live Mini-Lessons

Grades K – 12

High school students have a host of hour-long 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. 

18. Building a Galaxy With Code

Grades 1+

The force is strong with this 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.

19. Monkeying Around

Grades Pre-K – 2nd

Non-readers can start learning coding fundamentals with CodeMonkey Jr. Using CodeMonkey Jr., younger students will program a monkey’s journey in order to catch bananas and unlock a treasure chest. There are over 30+ levels using block programming where you learn sequencing, loops, logic, and more.

20. 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.

21. HS Quiz Bowl University of Nebraska Omaha

Grades 9+

The University of Nebraska at Omaha Department of Computer Science will celebrate Computer Science Education Week with a virtual Quiz Bowl on Dec 10! Compete on a team of three students plus a sponsoring teacher for your school.

22. 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.

23. 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. 

24. Kids Coding Tutorials

Grades 3+

You don’t have to go far for fun coding tutorials, you can find them right on our activities page. There are activities for beginners, starting with Scratch, and for those with experience who want to enhance their HTML and CSS education. Follow along in our step by step blog and video tutorials and share your Hour of Code creations in our Facebook group.

25. 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’s includes popular songs from your favorite artists that you can’t help but dance to. Complete the hour and try the extended project to keep dancing. 

26. 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. 

27. Hour of Code with Your Besties!

Grades 3+

Vidcode teamed up with Girl Scouts of Greater New York for a series of 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.

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

You can also celebrate Hour of Code with other kid coders in our 1-hour CSED week classes. 50% of the proceeds will be donated to the PTA or nonprofit of your choice. Learn to code live with guidance from our experienced instructors.

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. If you have an activity for Hour of Code, share it in our Facebook group.

Thanks for celebrating Computer Science Education Week with us! 

November 24, 2020

Kids guide to 200+ common programming terms and definitions

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

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

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

(more…)
November 12, 2020

HTML and CSS Tutorial for Kids: Thanksgiving Matching Game

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

Printable Thanksgiving Coloring Activity

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

Download Printable Coloring Activity 

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

Banner for fall coding classes

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!

Video Tutorial

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

Tip: Change the text inside the <h1> to give your game a new name.

Step 3: Style your game area and title 

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

In your CSS, style the <h1> font and color as well as the game wrapper.

Add this code:

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

Output

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

Step 4: Show the game cards

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

In your HTML, after your <h1> add a div called match-grid.

Add this code:

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

Output

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

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

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

In your CSS, style the face of the cards.

Add this code:

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

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

Output

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

Step 6: Add images to the back of the cards

Our images are stored in our JavaScript code. Find the <script> tag at the bottom with the images variable and add your image files inside the quotes. 

Add this code:

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

Output

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

Step 7: Style Images on the back of the cards

The images are too big and the back is showing! 

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

Add this code:

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

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

Output

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

Step 8: Flip the card

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

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

Add this code:

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

Output

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

Step 9: Add a restart button

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

Add this code:

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

Output

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

Step 10: Style the restart button

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

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

Add this code:

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

Output

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

Your game is complete! 

Check out the finished product.

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

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.

August 27, 2020
Teacher Spotlight, Ashley H

Teacher Spotlight: Ashley Hart

From her home in Texas to Glacier National Park to Florida and beyond, CodeWizardsHQ teacher, Ashley Hart, has been able to enrich her students’ lives from around the country. She always brings a sense of fun and passion to her classes and opens kids’ minds to the places she visits too. 

(more…)
May 22, 2020
Kid learning to code with mom

7 Secrets to Success for Teaching Kids Online

The ability to learn and work online could shape your child’s future. Online learning has become the norm for families in 2020 and, in a national poll, 40% of families said they are more likely to homeschool after the lockdown ends. Twitter, and we expect other companies to follow, just announced a permanent work from home policy. With work and school moving online, your child needs to be prepared to learn and work online. 

(more…)

Pin It on Pinterest

[[</span><a href="https://www.facebook.com/groups/KidsCodingHQ/" rel="noopener noreferrer" target="_blank"><span style="font-family: Roboto; color: rgb(255
255
255
255);">Click Here 255);">Click Here</span></a><span style="font-family: Roboto; color: rgb(255
255
255
255);">]
255);">]