A couple of weeks ago I had the pleasure of giving a presentation to two classes of 2nd graders for the Great American Teach-In
, or Career Day as we used to call it before it had corporate sponsorship. I am a web designer. Determining that was my first task in preparing for teaching the web to 7 year olds. I realized UX, UI and front-end were all meaningless terms to them and so, I’m a web designer.
I wasn’t exactly sure what to present and was less sure about how to present whatever it was going to be, so I started searching the web for ideas. I had seen the code.org
video a few weeks earlier and so started there, hoping I could fill a good bit of my time by just showing that. But, on second review, it was really geared toward an older audience and wasn’t going to work for me. I kept searching using terms like, “how to teach kids to code” and “web design for young kids.” After some research I decided the way to go would be to show the kids designing something fun in Photoshop, then coding it up in HTML and finally showing it in the browser.
I knew I could work some magic in Photoshop to get the kids attention, but I was worried about losing them during the coding bit. Who wants to watch someone write code and refresh a browser (and repeat about 10,000 times, as I do every day at work)? Not 7 year olds, that much I knew. And, I really didn’t have any fun ideas yet on what we could make, start to finish, in 30 minutes. ”Hello world” isn’t that exciting after you’ve played 50 hours of Candy Crush.
Cut now to the night before my presentation. I have a lot of loose ideas but nothing concrete and it’s 8:30 pm. I’ve put my son to bed and now time to figure this out. I really didn’t want to lame out for my son’s class and have him be bummed or just non-plussed with what I do. I (humbly) think web designers are rockstars and wanted to portray that.
At some point in my final night I hit on some magic web search that led me to Mozilla Thimble. At first I wasn’t sure what I was looking at because there’s not much in the way of description on https://thimble.webmaker.org/
, but I felt like this online editor/browser I was looking at was going to help me. Then I noticed the Webmaker.org logo in the top right of the page, clicked it and it was game on. I didn’t waste any time heading to the “Make” section and quickly found the “Comic Strip” project. This was the big idea I needed! I spent the rest of the night mocking up the comic panels in Photoshop and coding the complete finished product.
While preparing I didn’t code the project directly in Webmaker. I copied the html from the project and worked in it locally. I did this in case I had any connectivity issues or crashes that might cause me to lose my work. I get twitchy if I can’t hit ctrl+s every for or five seconds. Also, I wanted the local copy in case I couldn’t connect to the web during the actual presentation. In true web designer fashion, I worked on this till 4 am, all the while rehearsing what I might say at certain points. Now I was really frothing because I knew I was on to something good.
9:30 am the next day all the kids were in their seats and my name was projecting on the screen. It was on. I did ten minutes on Jabil Circuit, my employer, and how they make the digital world go ‘round and how the web apps my team and I design and code make it possible for them to keep on being awesome.
I completed that part by giving them a 4 step process to making apps:
- Have a big idea.
- Design it.
- Code it.
- Share it.
I asked them if they had any big ideas for an app that we could make. I got some good answers and led them to the idea of… making a comic strip!
So we jumped in Photoshop where I had six blank panels waiting for some comic design. We went one panel at a time, turning on layers and then manipulating each until it was sufficiently funny.
We then headed over to Webmaker, where I had our Comic Strip waiting but with all the elements hidden except the six panels. I had taken the liberty of uploading our final images to my web server the night before so I didn’t have to go through that whole thing while they waited. I attempted to explain what code was, and how writing it causes things to happen in the browser. I said things like, “This is exactly how people make the apps you all play” and ”This piece of code says ‘background-color.’ What do you think will happen if we change this word ‘white’ to something else? What should we change it to? Pink? Ok, how do we spell pink?”. Changed white to pink and boom, Webmaker updated itself on the fly. I’m telling you, the kids were genuinely into it.
We stepped though each block of code, adding our funny images and each kid giving suggestions for captions and titles. We talked about math and how the exact same math they were going to learn in class that day could be used in our webpage to make it better.
In the end, I walked away with a happy class and happy teachers. My son told me that night all the kids thought my presentation was the best. Better than the doctor, better than the carpenter and better than the fireman (you brought the firetruck, really?). That night I went to bed early, knowing that to forty 2nd graders, web designers are rockstars.