The Making of Warming Up With Ember.js

in Announcements

We recently launched  Warming Up With Ember.js at Code School. If you’ve been following along with the progress of this course, then you know we released the first four levels in December and the last three levels just last week. You already know what we produced, but today I’ll walk you through the process of how we created the Ember.js course.

image

Content

Every course we teach at Code School starts with someone planning, creating, and editing the content. In most cases, it’s a topic we’re already familiar with, but Ember was new to me. Luckily, there are a number of internal developers with Ember experience at Envy Labs whom I consulted with and borrowed for content reviews.

I started off with an outline of what topics I wanted to teach, and an estimate of how long the course should be. If you’ve played through any of Code School’s courses before, you may have noticed that they tend to include an hour of video and at least six levels of content.

Theme

Coming up with a theme for a course is always fun. I was initially rallying for an *Ember for Chipmunks* theme, but eventually fell in love with our Fire Spirit theme. The visuals created by Dave Mottram and Justin Mezzell are extraordinary, and they help tell a visual story that supports the teaching of Ember.

Slides

Everyone who writes content at Code School knows how to use Keynote. As a general rule of thumb, whatever we teach in a course should be understood by looking solely at slides. This requires us to separate content into small, digestible sections. The goal is to make something as complicated as Ember.js seem easy and manageable.

image

After all of the slides are done, we are already a month into course creation.

Writing Challenges

When taking a course, the in-browser challenges you work through are typically written by the same person who wrote the course content. This process incorporates teaching strategy, challenge difficulty considerations, and response feedback, all while trying to stick to the course theme.

Creating a Course Web Application

Even after releasing nearly 40 Code School courses, this process is still different for each course. For a course teaching Git we use a console, but for an Ember course we need an editor and a live HTML preview. We start by looking at how we want to learn a subject and work backward from there. Ember introduced a number of unique teaching opportunities that we wanted to try for the first time:

  • Full HTML preview of a running Ember application with a simulated location bar
  • Individual tasks for challenges rather than having long instructions
  • Content that carries over from challenge to challenge that we build on throughout the course
  • Videos inline for each task that can be used as a refresher during challenges

With all of these ideas agreed upon, we got started creating them! From start to finish, we worked on the course code for less than a month before releasing the first half. For most courses, including Ember, a course team includes two developers (myself being one of them), a graphic designer, and a front-end developer.

Implementing Challenges

Running code client-side to verify that a challenge is correct is no small task. For this course, Eric Allam dove deep into the internals of Ember in order to test the tasks we’re teaching one by one. The result is something new that we feel provides an amazing teaching experience for the subject matter.

Beta Testing

All Code School courses include an in-person beta event where we invite the Orlando community into our office to preview and give feedback on a course. Since Ember was the first time that we attempted a task-based approach, it was important to see if people liked it.

Course Release!

After about a month of content research and another month of development (mostly on challenge implementation) we’re ready to release a course. For Ember, we released the first four levels in December, which taught how to create an Ember application, work with routes and controllers, and even start learning Ember Data.

image

Last week, we released the second half of the course, which digs deeper into controllers, ways of cleaning up and adding behavior to templates using components, partials and rendering additional templates. We finish by focusing on user interaction, and how templates and views can act on events.

A lot of time and love went into creating this course; we hope you enjoy Warming Up With Ember.js!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Adam Fortuna

Adam works on courses at Code School, usually jumping between JavaScript and Ruby. When not looking for new ways to teach topics, he spends his days playing board games and listening to way too many SciFi audiobooks.

Might We Suggest