Weboplex

This is a continuation of my thoughts and takeaways from organizing and running the Webmaker for Nannies, an activity aimed at teaching web literacy to a group of nannies and live-in caregivers based in Toronto.

One of the things I realized from the last session was that there was a lot of tweaking to be made. I also got feedback from Mozilla Foundation folks Laura Hilliger and Michelle Thorne about possible improvements and tweak I did. (Thanks, ladies!)

I would say Day 2 was a breakthrough day. I started the day off with a rough wireframing/sketching exercise: I asked the learners to sketch the website the would like to make using Sharpies on a letter-sized paper. After everyone was done with their sketches, I asked people to volunteer to share to the group what they did. 

At that point, I was expecting around 3-4 presenters, but everyone turned out to be eager to share their works! Most of their sites were about themselves and things they are interested in and I think it was a great start.

I then asked them to label each major element on their sketches (logos, pictures, paragraphs, titles, etc.) using small Post-its and add a small note describing what that element is (like an annotation).

I then proceeded to recap the lesson on basic HTML tags (<p>, <img>, <h1>, <li>) and asked each learner to put on the Post-it note the HTML tag they think the element should have. I hovered around the room to help folks who were stuck.

My intention for that exercise was to teach the concept of each element appearing on the browser needed to be coded with the proper HTML tag. I think it worked because what followed was a huge improvement from last week.

When everyone was finished with the HTML “tagging,” I asked everyone to open Thimble and use the HTML tags they learned to create a simple webpage. From what I gathered, everyone had an easier time creating their own pages with Thimble. I had the help of the HTML cheat sheet that was provided by the Hacktivity Kit.

I then proceeded to teach basic CSS using inline style attributes. Everyone lit up when they learned that they could add color and adjust positioning of the elements in their webpages.

Here are some of the Thimble projects the learners are working on:

• Jasmin’s Webpage
• Wonder Shoes
• Exploring World
• My Amazing Page

The day concluded with a quick intro to Popcorn Maker (which everyone will try next time).

Over-all, I felt the progress everyone made was very significant and judging by the way every was busy coding, things are looking great for the final session in on May 26.