I had a great time over the weekend teaching an introductory HTML & CSS For Kids class to a group of middle school girls. The class was organized by a local non-profit called TechGirlz, and I heard about the opportunity via GirlDevelopIt, another local group I’ve volunteered time with recently. This was the title slide:

The class was a lot of fun – it was great getting back into teacher mode after a few years out of the classroom – and it seemed like the girls (and a couple of parents who hung out with us) had fun and also learned a solid amount.

Another GirlDevelopIt member, Sarah, created and lead segments on how the internet works and Sublime Text 2 (the text editor we used for the class), and was a fantastic support in terms of troubleshooting computer questions and helping the girls find and correct syntax errors, etc.

Of course, the first time through any presentation is a learning experience, so I spent some time on Sunday revising the flow, many of the graphics, most of the materials, and the level of specificity of the class to what I think is a more appropriate and reasonable amount of content for a three hour workshop with 5th-8th graders. You can view the revised presentation online, or access the slides as a Google presentation or a .PPTX download (the formatting may be a bit funky in the download file as it was created as a Google presentation and exported).

If you just click through the presentation view, you will miss a ton of content because I’m a firm believer in not duplicating verbal information on the slides (boring), and because a lot of the work of the session happened in tools like Dabblet (we actually used CSS Desk for the class but I’ll be using Dabblet if I do it again because of the quick full-page code views) or within the file set I put together.

The revised presentation better reflects what we actually covered than the original presentation did – we didn’t get through everything in the original, instead opting to shift the focus and balance of time in the moment to better fit the girls in the room. It also is much more detailed in the presentation notes, and goes into about the level of specificity that I generally feel is right for this age group and a short workshop.

Since I actually used to be a teacher and also have experience leading groups and sessions with adult learners (thanks to Teach For America, where I worked for a number of years after participating in the program), I’m pretty comfortable leading a workshop or class with a fair amount of improvisation. However, I tried to flesh out the things we discussed in a bit of detail when I went back through the presentation to make it more useful for other presenters. Please feel free to make use of and share these materials, and also let me know if you make any changes or modifications that I should consider incorporating into the original.

Along with the presentation, I created the simple website you see referenced in that title slide (GirlsLoveCode.org), which is a bare-bones HTML & CSS site itself. You can download all the in-class files (demos, templates, cheat sheets, etc.) we used with the participants from the site, and there is also a decent little resources page with some fun and useful links.

Interested in doing something similar in your community but not sure where to start? Yasmine and Corinne, the leaders of the Philly chapter of GirlDevelopit (which has chapters all over the country) shared some great tips on getting involved in your local tech community.