Let’s Code & Play Minecraft

On this page, you’ll find instructions to help you get started with various exciting programming activities. You’ll have the chance to explore and play Minecraft, learn how to create animations with Scratch, and even learn how to easily code with HTML.

Ett barn sitter vid datorn och programmerar i Scratch.

What is HTML/CSS? 

HTML stands for HyperText Markup Language, and it is the language used to create web pages. You can think of HTML as the building blocks of a website – it provides the basic structure that tells what should appear on the page, such as headings, text, images, and buttons. CSS stands for Cascading Style Sheets, and it is the language used to style and design web pages. While HTML determines what appears on the page, you use CSS to decide how it should look.

Instructions to start testing code!

  • Click here to open CodePen. The page will open in a new tab – convenient, right?
  • Once you’re on CodePen, click “Start Coding” in the top left corner. No login is required, so we can dive right in!
  • You’ll now see three panels: one for HTML, one for CSS, and one for JavaScript. We won’t be using JavaScript today, so focus on the first two. And keep an eye on the white area below – that’s where your creations will appear.
  • To make more than 15 changes, you need to log in or create an account with any email address. This also allows you to save your work if you want to test it later.

Now, it’s time to get started and have fun with the code! Good luck!

Level 1: Easy (about 5-7 years old)

Here, we focus on something very basic where children can change text colors and sizes. It’s easy to understand, and they can quickly see how the changes affect the page.

Step 1. Paste the HTML code into the HTML box in CodePen.

<!DOCTYPE html> <html lang=“sv”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>My Colorful Webpage. Here you can choose to change the text.</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<h1>Hello, glad you found this page!</h1>

<p>Change the colors (or maybe the text here?) and see what happens!</p>

</body>

</html>

Step 2. Do the same with the CSS code below.

body {

background-color: lightblue; /* Change the background color */

text-align: center; /* Center all text on the page */

}

/* Styles for headings */

h1 {

color: red; /* Change the heading color */

font-size: 40px; /* Change the size of the heading text */

}

/* Styles for paragraphs (p) */

p {

color: green; /* Change the text color */

font-size: 20px; /* Change the text size */

}

What the children can do:

Change the colors of the background and text by replacing the color names (e.g., from “red” to “blue”). Here are some color suggestions you can try:

  • Lightpink – Light Pink
  • Lightgreen – Light Green
  • Yellow – Yellow
  • Lightyellow – Light Yellow
  • Orange – Orange
  • Adjust the text sizes (font-size) to make the text larger or smaller.

Good luck!

Level 2: Intermediate (about 8-10 years old)

Here, children can play more with buttons, colors, and shapes. It’s a bit more advanced but still simple enough for them to see the results quickly.

Step 1. Paste the HTML code into the HTML box in CodePen.

<!DOCTYPE html> <html lang=“sv”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Try Changing Colors and Shapes!</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<h1>My Cool Button</h1>

<button>Click Me! Do you want to change the button text?</button>

</body> </html>

Step 2: Do the Same with the CSS Code Below

body {

background-color: lightyellow; /* Change the background color */

text-align: center;

}

h1 {

color: blue; /* Change the heading color */

font-size: 50px;

}

button {

background-color: orange; /* Change the button color */

color: white;

padding: 15px 30px; /* Size of the button */

border: 2px solid black;

border-radius: 10px; /* Rounded corners */

font-size: 20px;

cursor: pointer;

}

button:hover {

background-color: green; /* Change color when hovering over it */

}

What the children can do:

  • Change the color and size of the button.
  • Change the background color.
  • Adjust how rounded the buttons are (border-radius).
  • Add a link.

Good luck!

Level 3: Advanced Level (about 11-12 years old)

Here, children can try more complex structures and animations. This is suitable for older kids who want to experiment with transitions, more sections, and flexbox to create a more interactive page.

Step 1. Paste the HTML code into the HTML box in CodePen.

<!DOCTYPE html> <html lang=”sv”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>A Cool and Interactive Webpage</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<header>

<h1>Welcome to My Page</h1>

</header>

<main>

<section class=”box”>

<h2>Try hovering over the box!</h2>

</section>

<button>Click Me</button>

</main>

</body>

</html>

Steg 2. Gör detsamma med CSS koden nedan

body {

background-color: lightgray;

font-family: sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

header {

background-color: darkblue;

color: white;

padding: 20px;

width: 100%;

text-align: center;

}

main {

text-align: center;

}

.box {

background-color: tomato;

width: 200px;

height: 200px;

margin: 20px auto;

transition: transform 0.3s ease; /* Animation */

}

.box:hover {

transform: rotate(15deg) scale(1.2); /* Rotate and enlarge the box when hovered over */

}

button {

background-color: purple;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 18px;

cursor: pointer;

transition: background-color 0.3s ease;

}

button:hover {

background-color: darkviolet;

}

What the children can do:

  • Change the colors of the background, buttons, and boxes.
  • Try changing how fast or slow the animations occur.
  • Experiment with flexbox to adjust the layout.
  • Play with rotate and scale to achieve different effects on the box.

Good luck!

 

Connect to Minecraft  

To connect to a Minecraft server or to play multiplayer, follow these instructions:

Open the Minecraft Launcher and log in to your Minecraft account. Select Java Edition and click Play.

When the game starts, click on Multiplayer from the main menu.

  • If you want to play Bedrock Vanilla Edition, enter the IP: 51.210.235.2:19132.
  • If you want to play Java Edition, enter the IP: 162.222.197.169:25565.

Click on Done to save the server information. When you are back on the multiplayer menu, select the server from the list and click on Join Server.

Create Your Own Animation with Scratch!

Scratch is a program where you can create animations and games by “dragging and dropping” blocks. You use various colorful code blocks to give instructions to characters, called sprites, to do different things (e.g., jump, talk, or move). The blocks fit together like puzzle pieces. Good luck!

Note! Further down this page, there’s also a link to YouTube for additional instructions.

Preparation:
To get started with Scratch, go to the Scratch website.
Create a free account if you don’t already have one.
When you’re on the Scratch page, select “Create” to start a new project.

Step 1: Choose a Sprite

Click on “Choose a sprite” at the bottom of the screen to select a character (figure) to include in your animation. You can choose one from the Scratch gallery or draw your own.
For beginners: Start with a cat sprite (the one that is pre-selected).

Step 2: Create a Simple Animation

To make a simple animation, do the following:

First Block: Get the Sprite to Talk!

  • Go to the Code blocks and select Appearance.
  • Choose the block “say [text] for 2 seconds” and drag it to the workspace.
  • Click on the block and type a simple sentence for the sprite to say, e.g., “Hello! My name is Cat!”.

Get the Sprite to Move

  • Go to the Motion blocks and select the block “move 10 steps.” If you want, you can select multiple copies of a block or extend the steps. You can edit it after selecting the block.
  • Drag this block to the workspace.
  • To make the sprite move back and forth, add the block “turn right 15 degrees” afterward.

Get the Sprite to Jump

  • Go to the Motion blocks and select the block “change y by 10.”
  • This will make the sprite jump up on the screen. You can adjust the number if you want the jump to be higher or lower.

Step 4: Add a Background

  • Click on “Choose a backdrop” and select one of the pre-made backgrounds or draw your own. It can be a park, a city, or a schoolyard. You can choose this in the upper corner (the image icon).

Step 5: Get the Animation to Start

  • To start the animation when the project begins, go to the Events blocks.
  • Drag the block “when green flag clicked” to the top of your code.

Step 6: Experiment and Get Creative

  • Add More Sprites: Go to “Choose a sprite” and select a new character, like a dog or fish, and create an animation where they “talk” or “move.”
  • Change Background: Add a new background and change it mid-animation to make it more interesting.
  • Add Sound: Click on “Sound” and choose “play sound” to make the characters produce sounds (e.g., a “meow” sound).

For Older Kids (9-12 years):

  • Create a Small Game: Make a simple “Catch the Item” game where a sprite (e.g., a cat) has to catch a falling item (e.g., a fish).
  • Use Event, Motion, and Appearance blocks to create the game.

Example of a Simple Animation:

Tips:

  • Customize the sprite’s appearance: Let the kids draw their own characters if they want.
  • Add sound: Use Scratch’s built-in sound clips or let the kids record their own voices.

Summary:

  • For younger children (5-7 years): Create a simple animation where a cat says something and moves a little.
  • For older children (8-12 years): Create an animation or a simple game with various sprites, backgrounds, and sounds.

Click here for basic Scratch instructions on YouTube.