A few Saturdays ago at Sparkbox, we launched into our second Girl Scouts of Western Ohio workshop. The goal of the GSWO workshop is to make a reasonably finished “fan page” for a topic interesting to the young developer. Our focus was to help the ladies experience the fun of a career building the Web. Last year, the workshop was a huge success. Being Sparkbox, and always eager to improve, we wanted to make this year even better.
Improvements
We learned that last year, the girls didn’t absorb much of the lecture, or, at least not the topics which had little to do with directly implementing their fan sites. Everyone is eager to code, and anything resembling “school” on a Saturday morning is already starting out behind. This year, we attempted to improve the process with more hands-on examples and a narrowing of focus to topics directly applicable to the girls’ fansites. It worked! They seemed engaged the entire time, and everyone had a great website to show at the end of the day.
Another big change from last year’s workshop was the move from Divshot. Divshot was a static hosting service that allowed the girls to drag and drop their finished html files right onto the Web. Divshot was acquired by a larger company, leaving us in need of a new resource. Luckily, CodePen has been on our mind recently and seemed applicable to our workshop.
CodePen allows developers to write HTML, CSS, and JavaScript directly within the browser window. It shows changes in real time and has a built-in “Fork” function. No need to have the girls install a text editor (which was a huge time saver from last year), no need to show them how to find their files. Just log into CodePen, create an account, and you’re ready to code. It even auto-saves, so if a girl lost power on her machine (and some did), she still had all her work. We’ve used CodePen to teach in the past, and this reconfirmed how powerful it truly is.
Kasey developed a number of teaching resources directly with CodePen. My favorite is a simple page with a number of different fonts listed, removing the need to have the Girl Scouts wander around on Google Fonts—a massive time saver. The girls were also able to fork one of three starter templates, allowing for a polished page in a simple click of a button. By the end of the day, we had many great sites with topics like Softball Recruiting, Lamborghinis, MineCraft, and even Avatar: The Last Airbender. One of my favorites was a Harry Potter-themed site that asked a reader trivia questions and provided the answers via hover text. Clever!
A Big “Thank You” to…
Sparkboxers Divya, Drew, Kasey, and I each took a piece of the workshop to teach. Melissa, Emily, and Nikki all helped with organization, planning, and direction. For the second year, though, Kasey was the real MVP! She took complete ownership of the curriculum and directed the full day, causing everything to run smoothly.
Lunch was pizza, good pizza, provided by event sponsor Datayard. This allowed the girls a chance to talk about themselves and what their personal interests are. A simple question of “What is your site about?” was enough to create instant friendships between participants. I even learned that a few of the older girls already plan to enter STEM majors in college next fall.
CodeSchool graciously donated a month of membership to every girl who attended the workshop and a six-month membership for one lucky girl. A Book Apart sent us five books to raffle off as well—all excellent resources for the girls as they continue their code journeys.
Your Turn!
The Girls Scouts have already expressed interest in a 2016 workshop here in Dayton, but we would love if other organizations used our resources to host their own workshops. The entire curriculum and full resources are available online, so anyone interested can host similar events. This workshop has been the culmination of much effort, many months, and a good bit of “practice makes perfect.”
We’d also love you to check out the work our Girl Scouts did! All their sites are hosted on CodePen:
