I was recently asked by a friend who teaches 5th graders to do something similar for their school's "career month." I tried a few different things, and found the most successful was showing them how to use a web browser's built-in developer tools to inspect the source of and make live modifications to web pages.
My reasoning behind this exercise was:
- I checked in with their teacher ahead of time and confirmed that all of these kids had a least some experience using a web browser. Generally it seems like a likely "lowest common denominator" of tech experience for kids.
- Most web browsers have powerful developer tools that can be used to inspect and modify source and will display the results of many types of changes in real time. It is easy to get kids to understand the relationship between HTML/CSS code and the webpage that results from rendering it when you can make live changes to the code and see it immediately reflected in the rendered page.
- Web browsers are freely available. I gave them a handout with instructions on how to access the developer tools in web browsers that are either free (Chrome, Firefox) or readily available to them (Safari, since their school computer lab had a few Macs). I specifically wanted them to be inspired and continue experimenting after I left.
I concluded by spending 10 minutes taking student's requests for the modifications to nytimes.com. It ended up with a bizarro color scheme, comic sans on all the things, and pictures of dinosaurs and Pixar characters at the top of every article. Everyone had a blast, myself included!
I think the demonstration tickled the kid's innate predisposition towards mischief. An immediate question was "can everyone in the world see this changes? are you hacking right now?," which allowed me to naturally give a high-level explanation of the server-client architecture of the web. A few kids came up to me afterwards and asked me to specifically walk them through finding and opening the developer tools so they could continue experimenting at home, and that was the best outcome I could've hoped for!
To enable experimentation like that, I'd like to see mobile browsers include developer tools as well. More and more people grow up using a smart phone as their main computing device, and I think they should be given the opportunity to tinker with that as well.
I realize that developer tools are information dense and fitting them on a smartphone screen would require a significant effort to redesign the layout (especially when you want to see the website, the code you're editing and the on-screen keyboard at the same time), so browsers might not want to spend effort to include a niche feature like that. Maybe it would be possible to connect to the remote debugger with an on-device client? Then it could be developed as a separate project.
https://developers.google.com/web/tools/chrome-devtools/remo...
You can also load Eruda with Javascript. https://github.com/liriliri/eruda