Yes, you can help your children learn coding!

My 6 year old daughter has out grown playing Minecraft on the "household" iPad and now recently seems to be more interested in "how does it work"

So.. I've been researching; and here is quite a useful list I've complied. I wish some of these were around when I was an 8 year old learning to code on my Acorn Electron in the 80's. All I had was the need to know about computer things and some BBC Micro magazines my dad bought, with code examples mainly in machine code.

In the end of my adventures in coding while a nipper (in the late 80's/early 90's) I managed to create a full blown text adventure using BBC Basic, and for IT GCSE, I wrote a sideways scrolling game with accompanying pseudo code. So all that self effort paid off in the end!

Games that teach computational thinking (ages 4+)

For children who’ve spent their entire lives on mobile devices, games like Kodable and Move the Turtle will feel as natural as any of their other games.

But play these versions and they’ll soon be learning programming logic and how to think like a computer.

Play a game and write some code (for ages roughly 8-16)

Scratch is a programming language that allows children to create interactive stories, games and animations in a very visual, drag and drop manner.

What’s wonderful about Scratch is not just the power of how much can be created with it, but also the community your children will join when they begin programming in it.

Rather than having to start from scratch, children can play with and modify games and stories that others have written, remixing them as they see fit. Then they can share the programs they write with others to show off their own creations.

Become a wizard who uses spells written in code to win the princess (ages 8+)

CodeCombat is a delightful free site that teaches you to code in various popular programming languages like JavaScript and Python by playing games.

In their beginner game, you take on the role of a wizard who uses spells that are written in code (JavaScript) to control your heroes, navigate mazes, defeat ogres, trick enemies and rescue allies.

Build your own robots (ages 10+)

Lego Mindstorms combines the LEGOs we know and love with motors, sensors and remote controls that your children can program to do whatever their imaginations dream up.

With Mindstorms, your children can build robots that walk, talk and do as they command.

Create Minecraft Mods (advanced)

If your children play Minecraft, they will eventually grow bored with the available mods and want to start building their own.

Since Mods are built with real-world programming languages like Java, this is a great way to take their programming skills to the next level.

YouthDigital’s Learn Java with Minecraft looks like a super fun way to learn through their video-guided, online course which shows children how to program in Java in order to create their own swords, armors, tools, food, achievements and more. A little pricey mind you, so only if they are going to use it!

Learn both physical computing and coding with a Raspberry Pi

Raspberry Pi is an awesome credit-card sized little computer you can buy for under £35. Simply plug it into a TV or monitor, plug in a keyboard and mouse and hey presto - Instant, affordable, fully functioning computer.

It’s a great way for children to learn about the hardware that computers run on. Plus, there are versions of Scratch and Minecraft for the Raspberry Pi, which make it a great tool for children who are learning to code.

As a bonus, Minecraft for Raspberry Pi is the only edition of the game that lets players program it directly, giving your children even more options for controlling their Minecraft experience (this time, using code written in Python). Find this and other Pi learning resources here.

 

Lets build a custom 404 page 80's style!

I quite like tinkering with CSS, sometimes I manage to make cool things just by chance, heres one of them.

I had the urge to do something old school after watching a wacky movie called Kung Fury.

(The film contains swears, guns and action 80's style, the full movie can be viewed on You Tube!)

You can see a working demo pop up page here. Fun huh? - and download the zip here.

The HTML

<html>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:700' rel='stylesheet' type='text/css'>
<p><span class="bigger wacky404">404</span>
    <br/> ERROR</p>
<p id="info">Move along, there's nothing to see here mon vie.</p>

</html>

The CSS

<style>
    body {
        background-color: #282828;
    }
    p {
        font-family: 'Press Start 2P', cursive;
        margin-left: auto;
        margin-top: 200px;
        margin-right: auto;
        font-size: 80px;
        text-align: center;
        margin-bottom: 0px;
        color: #4ec7ff;
        text-shadow: 0px 0px 1000px #38d1ff;
        filter: dropshadow(color=#38d1ff, offx=0, offy=0);
    }
    .wacky404 {
        animation: wacky404 0.7s;
        -webkit-animation: wacky404 0.88s;
        color: white;
        animation-iteration-count: infinite;
    }
    .bigger {
        font-size: 135px;
    }
    @keyframes wacky404 {
        0% {
            text-shadow: 0px 0px 15px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        10% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        20% {
            text-shadow: 0px 0px 8px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        30% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        40% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        50% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        52% {
            text-shadow: 0px 0px 20px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        55% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        60% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        75% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        85% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        100% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
    }
    @-webkit-keyframes wacky404 {
        0% {
            text-shadow: 0px 0px 15px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        10% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        20% {
            text-shadow: 0px 0px 8px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        30% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        40% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        50% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        52% {
            text-shadow: 0px 0px 20px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        55% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        60% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
        75% {
            text-shadow: 0px 0px 0px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: black;
        }
        85% {
            text-shadow: 0px 0px 5px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: #4ec7ff;
        }
        100% {
            text-shadow: 0px 0px 10px #38d1ff;
            filter: dropshadow(color=#38d1ff, offx=0, offy=0);
            color: white;
        }
    }
    #info {
        margin-top: 20px;
        color: white;
        font-size: 12px;
    }
</style>​

Subcategories