I was recently invited to take part in a Careers Carousel session designed to allow school children to meet and learn from professionals who work in STEM subjects. The session was part of a wider programme run by London based charity Inspire. The aim was for me to spend 10 minutes with each group of children telling them about what I do and run a short learning activity that would help bring my job to life.

Disclaimer: I'm not experienced with teaching or dealing with 10 year olds, so I'm just going to discuss my approach and share the code in the hope that it might be of use to somebody.

Coming up with an activty

It took me a while to come up with an idea because technology moves so fast that I really wasn't sure what your average 10 year old knows about programming, or even how they use computers and the internet. My first memory of computer coding was watching my older brother type in pages of code from the back of a magazine into our Amstrad CPC 464, needless to say, things are quite different now!

Fortunately the team at Inspire were on hand to give me some guidance, letting me know that the class I would be working with have recently been taught about coding using Scratch. I've only heard about scratch in passing and I've never played around with it, but it was good to know that the idea of programming wouldn't be completely alien.

The activity idea I came up with was based on the classic interview question "What happens when you type a url into your browser", except, instead of using as much detail as possible, I tried to simplify the process around the key concepts to offer a glimpse of the internals of a web request and how several code and asset files come together to display a simple web page.

Introducing Top Cats

The complete Top Cats page

Top Cats is a very basic web page that comprises of three simple code files, each of which is printable on an A4 page:

  • home.html
  • styles.css
  • scripts.js

I've attempted to keep the code readable and easy to follow so excerpts can be used to show how code translates into visuals. The JavaScript file adds some basic interaction, allowing you to click on an image and mark it as a favourite with a yellow star.

All the code and printable assets for the activity are available on github, so feel free to make use of it or adapt it for a different learning activity.

Basic activity outline

The basic idea is to build up the webpage by first resolving the domain name and then issuing a series of requests for resources that are returned to the browser.

Shows the activity flow, starting with an empty browser windows and building up the page up with an html, css and javascript file.

Each resource is represented by an image printed and mounted on card, with the source code or file name written on the back. This makes it easier to explain how code files are used to change what you see as the page loads.

An example code file with rendered view on the front and the css code on the back

To get the activity started I handed out three roles to the group:

  • Web Browser
  • DNS Server
  • Web Server

I enlisted the remainder of the children to run requests between the browser and the servers, starting off with a domain name that needed translating into a server IP address. Once they located the IP address of the web server they could then fetch each of the resources, gradually building up the page in layers. I used self adhesive velcro strips on each of the resources to make it easy to assemble the web page and to quickly deconstruct it again after use.

For javascript interaction I attached an envelope filled with sticky stars to the back of the javascript file. This went down really well, and the kids loved voting for their favourite cat by peppering them with gold stars.

At the end of the session I had an additional set of code files printed out so I could re-cap what each of them were for and how they were used to change the layout and functionality of the final page.

Learning about databases

When I ran this activity I added an extra step to the html request. I wanted to show how a database is used to store information and how it can be rendered out to a webpage. To do this I included an extra database role, the web server would then request cat data from the database and attach it to the html page before it was returned.

The sql example has the data query on the front and the transformed html template code on the back

This did work, but I think it proved to be one step too many and made it a little more confusing to explain everything within the allocated time. If I ran this activity again I'd leave it out unless I had more time to do a slower paced explanation.

Conclusion

The kids seemed to enjoy the activity, largely thanks to the cute cat pictures and an abundance of sticky stars, but I only spent 10 minutes with each group so it's hard to say how much they took on board.

How would you do it? I'd be interested in hearing from anyone who's done something similar in introducing programming or explaining their work role to kids.

Overall it was a great experience and I'd recommend giving it a go. If you're London based and interested in volunteering with Inspire you can get in touch via their website.

All the code for the activity is available on GitHub.

Image credits

Some images are licenced under creative commons Attribution 2.0