JS 101 Lesson Plan

An example meetup description for this workshop is here.

Facilitator Prep:

TA prep:

Day 1:


Setup tables, name tags


Early students start arriving, setting up laptops


Lunch arrives, TAs mingle with students


Welcome, start round of introductions with an intro quick question


Sponsor welcome, if a sponsor host is available

Present “What is GDI?”


Introduce yourself to person nearest to you, with an intro question


  • Ask how many have done the first hour (as requested)

  • Make sure they’ve added GDI chapter account as coach

  • Talk about the structure for workshop - self-paced learning, *skip* the projects and keep going, then pair on projects together.


Start self-paced learning




Pair programming intro


Project: What’s for Dinner?

  • With a twist: Draw a local meal or a favorite seasonal meal

  • Pair people based on progress (see below)


Project Show & Tell (see below)


Re-start self-paced learning




Project: Fantasy Race

  • Pair people based on progress (see below)


Project Show & Tell (see below)


Go home!

Day 2:


Setup tables, name tags


Students start arriving, eating lunch, setting up



  • Show an inspirational use of JS


Start self-paced learning




Pair Project:

  • If they did “Function Return Values”: Project: Shape-Maker

  • If they didn’t: Project: Ad Design. Suggest twist: make an animated ad for a local startup or one you wish existed, try to animate part of it.

  • Pair people based on progress (see below)


Project Show & Tell

  • Alternative: Have them walk around to eachother’s computers and admire their work


Self-paced starts again




Present “Thanks for coming!”

  • Walk through the entire JS sequence, talk about the format of each class, the prerequisites, emphasize the study groups

  • We do this before the pair project  


Pair Project:

  • Pair people based on progress (see below)


Project Show & Tell, Science Fair Style

  • Have them walk around to eachother’s computers and admire their programs

Project Show & Tell

We want to get students in the habits of being proud of what they’ve made, so we do show & tells. There are two ways to run a show & tell:

You can mix and match these styles throughout the workshop, or pick one based on timing, or even do both for some projects.

Pairing Based on Progress

As students move through the course, their progress will vary more - some of them may be 1-2 tutorials ahead of others. When pairing people on the projects, the goal is to give them a project to work on that’s roughly at their level, but when possible, pair more advanced with less advanced.

On day 1, students are generally close enough to each other in progress that it works to have them work through the same projects. Thus, the goal of creating the pairs is to pair more advanced with less advanced. The way to do that is to look at the coach reports on Khan Academy and select the Skill Progress tab. That will show you graphs of how many students have started and completed each node in the course, and is a great way to figure out pairs.

Find a node that looks roughly 50/50 (keeping into account no-show students), and come up with pairs based on that. Make the list of pairs right before connecting your laptop to the monitor, to avoid showing that data to the whole class.

On day 2, students get farther apart, so there are 2-3 suggested projects for each pairing time, with a prerequisite listed. To select the pairs, open the Skill progress report, find which students have completed the highest pre-req, make the pairs, and keep going down the projects list until all are paired.

It’s okay if pairs aren’t perfectly matched, students can always learn from each other.

Here’s a screenshot of the Skill progress report halfway through Day 1:
Screen Shot 2015-06-20 at 3.41.35 PM.png