Building a website with my kids

Introducing web development to my two younger kids.

HOTGLUE logo

A while back I added a page with my kids’ LEGO collection. It’s a little tool for family or friends to check, before they buy even more toys for them. My kids started referring to it as “their website”. Fast forward and last week they asked if they could add a page with the (comic) books they have read. The perfect opportunity to teach them a bit about web development, but how?

Their LEGO page is generated from the set numbers with a Jekyll plugin. It works but I’ll quickly lose my 5 and 7 years old (the youngest can’t read yet and the oldest is typing at 4 WPM) explaining the advantages of a static site generator. It needs to be visual, without the baggage of me being a web developer. It needs to have the magic powers MS Frontpage gave me back in the nineties.

In search of the Frontpage of 2020

Glitch maybe? Close, but too powerful: HTML, JavaScript, CSS, Markdown. One to come back too when they are older but not the best starting point for younger kids. Glitch looks great to teach adults about web development though!

GrapeJS? Too polished. I could see this used by the marketing department but fun enough to keep kids interested?

Then I found HotGlue which takes a completely different approach. It’s almost literally digital paper, scissors and glue. It’s quirky, it’s FUN. It’s the GeoCities I used to know. HotGlue is even open-source, although it doesn’t look like it’s actively being maintained.

The result? Elmi’s boekenwebsite!

Learning for fun

I won’t hide I would love them to learn something in the process (and maybe, just maybe, plant a little STEM seed somewhere). Building their website sparked a good discussion about the public nature of the internet: do we really want the whole world to see this? It also taught them the basics of DuckDuckGo’ing and downloading/uploading images. They even fixed their first bug when they discovered you can’t simply have whitespaces in a URL.

This post is open source. Did you spot a mistake? Ideas for improvements? Contribute to this post via Github. Thank you!