Content kits

Each MDN Content Kit offers relevant, up-to-date technical information for presenters and teachers on a particular topic related to web development or web app development, such as Web APIs, useful libraries, or developer tools. Content Kits may also be focused on Mozilla products, tools, or technologies such as Firefox Developer Tools or Mozilla Research projects. Resources may include slides, demos, code samples, screencasts, video, exercises, etc.

By providing MDN Content Kits, MDN aims to grow developer engagement with Mozilla in regional communities, and increase standards-based web development globally.

Creating or contributing to an MDN content kit

Kits can be built by anyone, and we encourage people to suggest and build kits! Individuals may also contribute to existing content kits by submitting a pull request on Github.  Get started with the MDN Content Kit Template on Github or read about the project on the MDN wiki.

Current content kits

• Beginners Programming. This kit contains resources you can use to learn and teach general programming principles and the JavaScript language. The teacher will need to know HTML and JavaScript. The students will not need any previous web development knowledge but knowing how the web works and what web pages are will help. The Beginners Programming kit has 8 sections, each of which takes 1-1.5 hours to teach.
• Beginners Game development with HTML5 Canvas. In this kit you can learn the basics of game development using JavaScript and HTML5 Canvas. All you need is a little prior experience with JavaScript basics.
• Beginners Game development with Phaser. In this kit you can learn the basics of game development using Phaser, a popular HTML5 game development framework. This differs from the above kit because it doesn't teach you any pure JavaScript, instead giving you expeience of working with a framework. All you need is a little prior experience with JavaScript basics.
• Valence.  Valence is the public-facing name for the Firefox Developer Tools Adapters, which extend the Firefox WebIDE to allow for remotely debugging pages in Chrome or Safari from within the Firefox Developer Tools. Valence is still in development and is experimental. Valence is distributed as an add-on, which is automatically downloaded and installed by Firefox Developer Edition, though the raw .xpi file is available on archive.mozilla.org and its source code is on GitHub.  The Valance Content Kit is for an experienced web developer to give a presentation to a group of experienced web developers.
• node-firefox. Node-firefox is a series of node.js modules for interacting with Firefox runtimes via the Developer Tools remote debugging protocol. The node-firefox Content Kit is for an experienced web developer to give a presentation to a group of experienced web developers.
• Working with HTML5 Video: Adding captions and subtitles. This kit contains everything you might need to present a one hour presentation on HTML5 video captions and subtitles. This includes using the <track> element, WebVTT syntax, CSS extensions, and the difference between captions and subtitles.
• l10n.js. JavaScript library that enables localization through the native JavaScript method intended for it. There is already a placeholder method for all API calls as specified in the ECMAScript specification and is present in all JavaScript engines.
• Matrix Math for the Web. This content kit is brief overview of manipulating 3d objects with matrices (a concept from linear algebra.) Matrix math is used heavily in WebGL, but web developers are more familiar with DOM manipulations. This intro divorces the explanation of matrices from the WebGL APIs by using the CSS3 matrix3d transform. It demonstrates translation, scale, and rotation transformations, as well as exploring how to compose a single matrix transform from multiple transforms through matrix multiplication.
• WebGL Model View Projection. This content kit explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used to represent a 3d object: the model, view and projection matrices.
• WebGL Lighting Models. Getting a model projected onto the screen using WebGL is only the first step for working in 3d. The next is applying a shading or lighting model to it. This content kit walks through the steps on how to build the classic Lambertian lighting model and the Blinn Phong lighting model.

How to use an MDN content kit

Hints on using Content Kits before, during, and after a meetup. Note that these points are representative of a general Content Kit — not all points will necessarily apply to all kits.

Prior to a meetup

1. Review the content kit and all supporting materials, including relevant MDN articles.
2. Download the demo project and play with it until you feel comfortable demoing it.
3. Download the video, so you can play it locally if all else fails.

During the meetup

1. Present the topic, including a live demo (or recorded, if necessary.)
2. Lead the group in a discussion of the topic, or an activity with the demo project.

After the meetup

1. Submit issues for any problems you encountered with the kit.
2. Submit pull requests for any changes you made to the kit.

How to propose a new MDN content kit

If you would like to propose a new topic for an MDN Content Kit, please add your topic to this etherpad as well as on the MDN mailing list.

If you propose a new Content Kit topic, please let us know how you will use the new MDN Content Kit and whether you will provide us feedback. We are looking for proposals for topics that will be used by groups that can provide us with feedback so that we can continue to improve and grow the collection of MDN Content Kits.