Tutorial

Basics

There are a few important things to keep in mind when it comes to bringing your project to life. You will be creating elements such as div, span, img that you will be adding gravity to. A basic element looks like this:

<span> stuff inside a tag </span>

Elements have attributes that we can set to values. An attribute is inside the tag of an element as shown here:

<span attribute="value" > stuff </span>

The next attribute that is important is the style attribute. The value of this tag is a list of statements.

<span style="property:value;..." ...

There are many property values that can be set. To set the background color of an element one of the following can be used:

background-color:orange;
background-color:red;
background-color:green;

To change the size of the font the font-size property can be set to some number:

font-size:30pt;
font-size:50pt;

The color of the letters can be changed using the color property:

color:blue;
color:red;
color:black;

These can be combined inside the style attribute:

<span style="background-color:green;font-size:50pt;" ...

Things that won't work

Here the class attribute is not contained inside the tag:

<span> class="grav" </span>

Here the attribute value is missing an exit quote:

<span class="grav > </span>

Here we are missing a space:

<spanclass="grav" > </span>

Give it a try on the code provided on the right side of the screen. Remember, if you reload the page all work will be lost. If you want to save your work then create a new Throw.