Commitment to Client Group

Tween Program: Coding w/HTML

Hi everyone! It has been a goal of mine to teach a coding with HTML class to tween patrons (ages 9-12) at my library, and this post will detail my first ever time doing so.

Cover image of book "Get Coding"

I bought this book as my guide when I became the Tween Librarian. I had taken some website design classes in library school, and really wanted to make it accessible to my tweens. Web design can be fun, easy, and has limitless options; it is a great way to play around with coding. I tackled it (this week actually!), and it went, semi-okay! With this book as my resource, I created a PowerPoint and handouts I used to teach the class.

The first few slides opened the discussion of what HTML is (a programming language most webpages are created with), what kinds of things you can code into a webpage using HTML (images, lists, tables, links, forms, etc.), and a review of the keyboard/mouse controls we would be using. We then talked about how the content of the webpage we would build in class goes into <tags> and how important it is to <open> and </close> tags.

Class Structure:

  • A computer lab with 15 computers, plus 5 laptops to accommodate more tweens (we had a wicked long wait list—I actually had to duplicate the program).
  • 21 kids came to the first hour long program (two were siblings, so they shared a computer), 19 for the second hour long program.
  • A PowerPoint that we had to go through quickly, to get coding!
  • At the last minute, the week before I (thankfully!) asked for another co-worker’s help because 20 kids in a coding HTML class worried me (thank you again, Allison!).
  • The website: We built a three sentence website with two pictures, changed the font, and the background color of the webpage.

What I Learned:

  • 10-15 kids only would have been more manageable, with still two adults, absolutely.
  • Take out the three sentences, and just have them put their name at the top of the website. The typing took the longest for most tweens, and was the least fun! To get to the good stuff—inserting the pics, changing the font & colors– reduce the amount of typing necessary.

Overall:

  • The tweens who were into it were really into it! They wanted to keep going, and learn more things they could do.
  • Typing can be frustrating to those tweens who have not mastered the skill yet, so I encouraged them to be patient with themselves.
  • For those with whom coding with HTML seemed to click, we asked that they help their neighbor if we were busy with another tween at the moment. They were very sweet and kind about helping each other.
  • HTML is very detail specific, so our job as librarians/teachers of the class is to skim their code to see what might be off. In one case, it was a matter of one space not being inserted. That was the difference between the picture showing up in the browser versus not showing up. (Patience amongst yourselves, as well!)
  • I would totally do it again, and implement what I learned!

Here is a picture of what the website we created looked like:

Webpage created in coding class

Here are two documents that will (hopefully) help those of you reading who want to implement this kind of program in your programming schedule or in your school classrooms.

Let me know how it goes, or if you have any questions!


Our guest blogger today is Gretchen Schulz. Gretchen is the Tween Librarian at Schaumburg Township District Library in the suburbs of Chicago, IL. She focuses on programming for 9-12 year olds, and does Baby Storytime. Both of which she loves! In her spare time, she loves reading, crafting, drinking coffee, kickboxing, and baking.

Please note that as a guest post, the views expressed here do not represent the official position of ALA or ALSC.

If you’d like to write a guest post for the ALSC Blog, please contact Mary Voors, ALSC Blog manager, at alscblog@gmail.com.


This blog post relates to ALSC Core Competencies of Commitment to Client Group and Programming Skills.

Leave a Reply

Your email address will not be published. Required fields are marked *