Overview

Code on Camera is an online education platform that uses short video screencasts to teach modern web design and development. The goal of the site is to break down the modern web development process to every last detail. Lessons focus on practical applications, and provide code samples, resources, and explanations to help students learn in the easiest way possible.

I built Code on Camera as an extension of my passion for web development, and as a learning tool for others. The site is a custom WordPress theme that features an in depth course directory, and bbPress discussion forums. I also produced a multi-part video tutorial series on introductory web development.

codeoncamera.com
code_on_camera_landing_page

The idea for Code on Camera came about while I was furthering my own education. Watching some tutorials on advanced web development techniques, I noticed that the majority of lessons didn't put the concepts that they were teaching into context. I was looking for tutorials that demonstrated real world usage, and found that good providers of this kind of content were scarce. So I opened up a discussion on a number of web development related forums with the topic: Would you be interested in tutorials that concentrated on process and practical application. The feedback I received was overwhelmingly positive, and the idea was validated.

Armed with notes from my discussion threads, and loads of research, I entered into development and first set my focus on building the platform that would host the content. I selected WordPress as my CMS, and developed a custom theme from the ground up. Utilizing minimal design practices, and carefully organized information architecture, users are provided with an immersive experience, and content holds the center of attention.

codeoncamera.com/courses/building-a-simple-website/welcome-to-the-series
code_on_camera_lesson_page

Universal Accessibility

The research phase of the project made it clear that students would primarily be accessing the site from a desktop or laptop where they could watch the videos while following along in their code editor, but I still wanted to provide universal accessibility. Identifying key points where the site breaks down, I used media queries to manipulate the site's design and provide an experience catered to the user's viewport.

  • code_on_camera_mobile_course
  • code_on_camera_mobile_lesson
code_on_camera_behind_the_scenes

Producing the series

I started by reading and watching a number of introductory web development tutorials and taking notes on their strengths and weaknesses. This research allowed me to really identify the core concepts that I wanted to incorporate into my first course, and build a curriculum that taught these concepts in an easy to understand manner.

With pages and pages of notes detailing my rough ideas, I grouped the broad strokes by similarity and then further broke them down into bullet points that I shaped into a set of defined lessons. Moving into scripting, I made a point to stay as concise as possible with the series. Drawing from my research, I felt that I responded best to lessons that were short and had limited patter, so I went through a number of drafts for each lesson before arriving at something truly direct and simple.

To produce the series, I took it lesson by lesson, and experimented with multiple approaches. What I found to work best was to first record the audio, and then record the video instruction by working through my dictation. This process also worked to highlight sections of dialogue that didn't translate well to actions and prompted some revisions on the fly. Previously unfamiliar with screen recording, and video editing, I worked with both Camtasia and Screenflow as production tools and taught myself the programs in an experiential fashion.

Building the site and releasing my first series was a ton of fun, and I'm excited to continue producing content. I learned a lot with this project, and have a growing list of ideas for future courses that I can't wait to publish.