It’s time to experiment a little.

I think you can go in two directions now.

The first is using a “cloud code editor” to run your code, so you don’t have to install anything on your computer, and everything happens in the browser.

Another direction is to install a code editor locally. We’ll do that in the next demo.

An online editor makes things faster. It just works, you can easily share what you do because each demo you do has a link, so you can easily get help when you’re stuck, etc.

There are many online tools you can use. CodePen is one of the ones I recommend.

It’s a site that helps you experiment with creating Web pages easily, see the work of others, easily share your work, etc.

On Codepen you can create a pen and see the result of your HTML without having to do things on your computer (and this means you can work on this from a tablet or a smartphone too)

Go to https://codepen.io and create your free account.

Here’s the HTML example I listed above in action on Codepen:

See? We have 3 boxes - HTML, CSS, and JS.

And below we have the result as if we executed those 3 components in the browser.

Now, let me tell you that what we wrote is still correct HTML 😅 because Codepen only wants the HTML that goes in the body tag, and it will give you a warning if you do write the “complete HTML”:

It’s a quick way to test and experiment with Web technologies.

In the example, the browser interpreted the page, and automatically applied some special styling to the list, because it knows what an unordered list is, and it applies a default style.

It also added some spacing around the paragraph, that’s different from the spacing between each list item.

I can share the link to the ”pen”: https://codepen.io/flaviocopes/pen/ZEjbPEW

This is another cool feature of Codepen, you can share your work by sharing a link. People can see that project, run it, and also fork it to add their changes (they also have collaboration tools, but we’re not going to use them).

And also embed a pen anywhere, for example, I’ll embed the pen here, so you can check it out:

See the Pen Simple HTML example by Flavio Copes (@flaviocopes) on CodePen.

You cannot edit the HTML directly from here, but you must first “fork” the pen by clicking “Edit on CodePen”.

Lessons in this unit: