The maquette tutorial

This tutorial will teach you how to use the maquette library. The application we are building in this tutorial is a remote control for a flying saucer. This tutorial is made for people who are already familiar with HTML and Javascript.

Objective

In this first exercise you will create the flying saucer we are going to control. Thanks to some alien piece of CSS, all that is needed to create the the flying saucer is the following markup: <div class="saucer">Greetings</div>

Hyperscript 101

Because maquette allows you to use data to create the right browser DOM, it does not use HTML. Maquette uses a dialect of hyperscript, which means that you use a javascript function, h() to create a virtual DOM node.

The first parameter of the h() function is a CSS selector string, like "div.landscape", which produces <div class="landscape">. The final parameter is an array producing the contents of the node. The array may contain strings which produce text, and h() calls which produce childnodes.

The workbench

In the workbench below you can edit the sourcefiles for this exercise. In order to create the flying saucer, you need to complement the render() function. The next button at the bottom will be unlocked once you complete the objective. Good luck!