Home HTML Kodu Python Robotics Sonicpi Scratch Resources Logo About Me

HTML, as a markup language doesn't really "do" anything in the sense that a programming language does. HTML contains no programming logic. However it is easy for kids to grasp & the instant gratification provided from publishing their work is a great motivation. The learning curve isn't nearly as steep as with other languages and it is great way to teach debugging syntax errors. Kids encounter HTML when using video sites such as Youtube etc and when embedding gadgets in drag and drop web builders so it's a language they have seen before and although it does look quite complicated at first glance it can be broken down into simple chunks and is an ideal place to start syntax coding.


I started out on my own HTML journey in 2014 here at the New Boston- a Youtube Channel within a few weeks I felt confident enough to run a class the response from the children was amazing. The most popular HTML project to date being the Music Machine project.

Since the a whole range of HTML resouces have become avaiable the most notable being Dash. Dash lets users learn how to use HTML, Javascript, and CSS by working through four projects of increasing difficulty. As you progress through the projects - starting by creating a small personal website for imaginary friend Anna, before eventually coding your own CSS-powered robot you'll unlock skills.

There are loads of great tools out there now a great place to dip your toes is the excellent Mozilla tool "X-Ray Goggles" which encourages students to "hack" websites. Although the word "hack" may have some negative connotations, the Open Web community uses it in a positive context. To "hack" something is simply to take something that already exists and change it to make something new. You can hack physical things- like board games or you can hack the web. Hacking has always been a key element in the creative process. It is a constructive collaborative activity, not a destructive one.

The Mozilla website explains this stance, "We have an unique definition for hacking. When we say hack we are talking about remixing content to make new things for the web. We mean hacking as tinkering. We are not implying anything malicious or illegal.

The above site was created in a few short hours by a Y6 girl. Using div tags and responsive design it is well laid out and fits all screen sizes- something that I'm still working on perfecting myself. She discovered a way to upload and host it for free on Google Drive.

The single page site above was hand coded from scratch by a 10 year old girl in just a few sessions. We focused on choosing suitable colour schemes, deciding colors for website is not an easy task.

She extracted her colour scheme from the main images on the page. Other reasons for choosing colour schemes come from the answers to 2 important questions What is the content about? And, who will most likely read the content? For example, let's say you are designing a website that will cover everything about horror novels. Who is going to read it? It is most likely to be people who like spooky books. We can extract some keywords that will guide us to choose the colors, which in this case are: Vampires, monsters, goblins, moon, midnight etc . At this point, we then looked for the sources and samples for these keywords to extract the colors, whether by looking around your surrounding or Googling sample images.

The concept of remixing (hacking)) has long been prevalent in modern music artists remixing and sampling each others work to create something new. This project helped develop ""hacker habits" the combination of technical and social skills youth need to become active co-creators, shape their environments, and take charge of their own learning. In this fast-paced world, it's important that students understand how to tinker with technology rather than just consume it.

The above project was a big hit in school as I've mentioned before creative music coding projects are a passion of mine, for me music, art and design have an important place in the Computing classroom. This project was inspired by an old favourite of mine the Tony B Machine a very cool, very simple free online synthesizer where you can create your own music live without special musical knowledge the results can very pleasing indeed.

The idea came to record some Tony b background beats using the excellent free music editing tool audacity or use royalty free tracks available online as the main background sound (younger students) or ideally coding some background beats using Sonic Pi. (see the Sonic Pi page for more on that). When it came to the sound samples for the younger students we downloaded some royalty free samples from loop master eg the space invader samples worked really well. The older children recorded and mixed their own samples using Audacity adding cool effects.

Traditionally soundboards were created in Adobe Flash that catalogs and plays many short soundbites and audio clips and used by prank callers but the soundboard has also been used as a promotional tool for films, television shows, radio, products and more. Making a HTML with a few audio tags and a nice background image was a nice easy entry level HTML coding task and the results were very rewarding. A simple template for a sound board here

The above project which is the inspiration for this site was adapted from a Google Coder project intended for the RaspberryPi. It was simple enough to adapt the lessons to a normal editor such as Notepad++. Coder

Coder turns your Raspberry Pi into a mini web server that allows you to create web content using HTML, CSS and JavaScript via a browser-based IDE. Or rather, it allows you to easily make Cool Web Stuff. The site contains some interesting ideas for HTML/CSS and Javascript projects including a comic page and making a penguin game. The projects can be adapted for PC use with a little bit of fiddling.

A colour palette for a forbidden planet website

A nice fun sound board Gangnam Style! (It's made in flash so won't be visible on most mobile devices). We develped our own sound boards using HTML. It was a fun, learning focused project that developed a range of skills Music Machine Project.