The maquette tutorial
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>
Because maquette allows you to use data to create the right browser DOM, it does not use HTML.
Maquette uses a notation called hyperscript.
h(), which creates a virtual DOM node.
The first parameter of the
h() function is a CSS selector string, like
which results in
The final parameters represent the content. Strings become text, and
h() calls create childnodes.
In the workbench below you can edit the sourcefiles for this exercise.
In order to create the flying saucer, you need to complement the
The next button at the bottom will be unlocked once you complete the objective. Good luck!