RoboKids Innovator

Learn coding, build robots, and create amazing things!

Learning Path

Welcome to RoboKids!

Hello future inventors! This is your space to learn how to code, build robots, and create amazing things. Click on the robot cards below to learn about HTML, CSS, and robotics!

Fun Things You'll Learn: Build your own websites, program robots, create games, and design animations!

What is HTML?

HTML stands for HyperText Markup Language. It's the code that makes up all websites on the internet! Think of HTML as the skeleton of a webpage - it gives it structure.

Fun Fact: The first website ever created is still online! You can visit it at http://info.cern.ch

HTML Building Blocks

HTML uses "tags" to create different parts of a webpage. Tags are like containers that hold your content:

  • <h1> to <h6> - Headings (h1 is the biggest)
  • <p> - Paragraphs for text
  • <img> - For showing pictures
  • <a> - Links to other pages
  • <div> - A box to put things in
  • <button> - Clickable buttons

Creating Your First Webpage

Every HTML page starts with this basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Page</title>
</head>
<body>
  <h1>Welcome to My Website!</h1>
  <p>This is my first webpage. I made it myself!</p>
  <img src="robot.jpg" alt="A friendly robot">
</body>
</html>

Pro Tip: Always close your tags! For every <tag> there should be a matching </tag>

HTML for Robotics

HTML is used to create control panels for robots! You can make buttons to move a robot, displays to show sensor readings, and more.

As you learn more HTML, you'll be able to create interfaces to control real robots from your computer or tablet!

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a webpage, CSS is the clothes, makeup, and hairstyle! CSS makes websites look beautiful.

Fun Fact: CSS was first proposed in 1994 by HÃ¥kon Wium Lie while working at CERN (the same place where the web was invented)!

CSS Superpowers

With CSS you can change almost anything about how a webpage looks:

  • Colors: Make text any color you want
  • Fonts: Choose fun and cool fonts
  • Layout: Position things exactly where you want them
  • Animations: Make things move and dance
  • Responsive Design: Make websites work on phones, tablets, and computers

CSS in Action

Here's how you would make all paragraphs have blue text and a fun font:

p {
  color: #00c6ff;
  font-family: 'Comic Sans MS', cursive;
  font-size: 20px;
  text-shadow: 0 0 5px rgba(0, 198, 255, 0.5);
}

Animating Robots with CSS

CSS animations are perfect for making robot characters come to life! You can make robot eyes blink, arms wave, and bodies move around the screen.

Here's how to make a simple animation that moves a robot from left to right:

@keyframes robot-walk {
  0% { transform: translateX(0); }
  100% { transform: translateX(300px); }
}

.robot {
  animation: robot-walk 3s infinite alternate;
}

Try it: You can create animations for robot parts, lights, and sensors to make your robot interfaces more exciting!

What is Robotics?

Robotics is the science of designing, building, and programming robots! Robots are machines that can do tasks automatically or with some guidance.

Fun Fact: The word "robot" comes from the Czech word "robota" which means "forced labor" or "work." It was first used in a 1920 play!

Parts of a Robot

Robots are made up of several important parts:

  • Brain: Usually a small computer like Arduino or Raspberry Pi
  • Sensors: Eyes and ears for the robot (cameras, microphones, touch sensors)
  • Actuators: Muscles that make the robot move (motors, servos)
  • Power Source: Batteries that give the robot energy
  • Body: The frame that holds everything together

Programming Robots

We program robots using special coding languages. Some popular ones for robotics are:

  • Scratch: Easy visual programming with blocks
  • Python: A text-based language that's great for beginners
  • Blockly: Drag-and-drop coding that creates real code

Simple Robot Program

Here's what a simple robot program in Python might look like to make a robot move forward until it sees an obstacle:

from robot_library import *

# Start the robot's sensors
ultrasonic_sensor = UltrasonicSensor()

# Move forward until something is closer than 20cm
while ultrasonic_sensor.distance() > 20:
    move_forward()
    
# Stop when something is too close
stop()

Robots in Our World

Robots are everywhere today! Here are some cool places you'll find robots:

  • Factories: Building cars and assembling electronics
  • Hospitals: Helping doctors with surgery
  • Space: Exploring Mars and other planets
  • Homes: Vacuuming floors and mowing lawns
  • Entertainment: Acting in movies and playing games

Future Inventor: Maybe you'll create the next generation of robots that will help people in amazing ways!

Hacker Playground

Try out your coding skills in this hacker-style terminal! Change the code and see what happens in the preview window.

ROBOTICS TERMINAL