In June and July of 2018, the Sparkbox crew partnered with the Dayton Metro Library and the Carnegie Library of Pittsburgh to offer a four-part pilot workshop teaching teens how to build a website. Learning content strategy, HTML, design, and CSS, the students leave at the end of the workshop having designed and built their own web pages.
This may already sound familiar. For the last four years, Sparkbox has worked with the Girl Scouts of Western Ohio to host a one-day workshop where we work with a group of Girl Scouts and teach them how to build websites and inspire interest in STEM subjects. Last year we took our curriculum and shared it with the world through girlscancode.io.
We love doing the Girls Can Code workshop, but because it was a full-day weekend event with meals, we are only able to do it once a year. We wanted to find a way to reach out to a larger audience and use the curriculum we had worked so hard on more than just once a year. It is this curriculum that inspired the Building Websites Workshop.
Reworking the Workshop
Working With Our Local Libraries
In order to put on a Building Websites workshop that could reach more people than just Girl Scouts, the first thing we did was reach out to one of our community’s greatest resources, the library. Many libraries are already set up to offer computer access, and utilizing these spaces eased about half of the stress of planning the workshops. Through the libraries, we were also able to reach out to a larger number of students.
Breaking the Workshops Into Four Parts
Even with the event space and computer access issues taken care of, the idea of running a six-hour workshop was intimidating. Luckily, our curriculum easily broke into four natural sections (content, HTML, design, and CSS) so we decided to offer a four-part workshop via a two-hour session each week. These smaller sessions allowed us to turn the workshop into an after-school activity, removing the need for meals and snacks while also minimizing the time and preparation burden on teachers and teacher aides.
Refining Our Resources
Thanks to the work that we had previously put into the Girls Can Code workshop, we had most of the resources that we needed to run the library workshop, and we just needed to do a bit of editing. Removing the references to the Girls Can Code workshop and the Girl Scouts of Western Ohio made the workshop materials more inclusive so that anyone who wanted to learn to build a website felt welcome to do so.
We also wanted to make sure that anyone could feel empowered to teach the workshops, regardless of their web design and development knowledge. The Girls Can Code workshop already had videos that did most of the teaching, but to further aid the teachers we created a teacher’s guide with helpful teaching tips and suggestions for how to help students when you don’t know the answer yourself. And for teachers who feel confident presenting the curriculum without relying on videos, we provided slides from the Girls Can Code workshop that they could customize to their comfort level.
What We Learned
Preparation Is Key
Training the Trainers
We couldn’t just throw teachers into a classroom and expect them to feel comfortable and be successful teaching students how to build websites. The Pittsburgh Sparkboxers had the opportunity to host a “train the trainers” session with more than 20 interested librarians from Carnegie Library locations across the city. They ran through all four sections of the workshop in a three-hour timeframe—watching the videos, completing the exercises, and giving the librarians the opportunity to ask questions. Most importantly, the librarians were able to leave the training session empowered to teach the curriculum on their own.
What to Bring
After the first day, we found that physical handouts made things run a lot smoother. The supplies we’d recommend having on hand include:
A printed copy of the HTML and CSS cheat sheets for each student.
A printed copy of the Teacher’s Guide with key information highlighted for the teacher.
Pencils and notepads were especially nice to have when the students created their CodePen accounts—make sure they write down their login information!
Any HDMI cables and adapters necessary if you are bringing your own computer.
Water bottles for the teacher and teacher aides.
Working with Kids and Teens
Patience Is Key
For many of the students in the classroom, this was their first introduction to writing code and learning how to build websites. Being patient with them made the experience more enjoyable and inspired the students to learn more. Sometimes it takes a while for students to warm up to a group and show that they are interested. If you are patient, it’s well worth the wait to see how excited the students get when they are finished building their first website.
Have a Familiar Face
Originally we liked the idea of having a different Sparkboxer teach each weekly section. However, we quickly realized that the students needed a consistent familiar face to feel comfortable. Ideally, the teacher should be the same person each week so that the students feel comfortable as soon as they walk into the room.
The Dayton workshop leaders also noticed that some students had a hard time focusing with multiple people walking around the room asking if they need help. If we noticed a student was looking overwhelmed or having a particularly hard time, we assigned one teacher aide to work closely with that student.
Teaching Techniques
Keeping It Simple
The CodePen resources we offered are limited in scope to keep the students on track and not lost in a sea of options. We limited their color palette and font options so they could make quick design decisions and we limited the HTML and CSS cheat sheets to only the basics so they didn’t get overwhelmed.
Simplicity is also important for when a student has a question. The students are just starting to learn these topics and it’s important to be clear with answers, avoid industry jargon, and explain terms that might be new to them.
Live Demos Are Magical
The workshop videos we’d prepared in advance were great, but we found that nothing beats a live, teacher-run demo. The students were the most attentive any time a teacher opened a new browser tab to demonstrate a concept firsthand. Even if it was the same concept they had just seen demo-ed in the video, there is something magical and captivating about seeing someone making real-time decisions, especially when it comes to writing code.
What’s Next?
We’re thrilled to say that two of the students who took our first library series have reached out to join our team as interns this year. Our goal with this program is to inspire as many young people as possible to consider careers in the web industry, and we’re seeing that become a reality. Now that we have two library workshops under our belts with Dayton Metro Library and Carnegie Library of Pittsburgh, we hope to have a continued relationship with our local libraries so that we can reach even more students.
And you can help. We’ve made all of these resources available to anyone who would like to teach a workshop. Please look them over and inspire your own community to build a better web.
Want to host your own workshop and aren’t sure where to start? Drop us a line, and we’d be happy to talk.
