HTML

This tutorial is an adapted version of RailsBridge's frontend tutorial (thanks, RailsBridge!). Check them out if you haven't; they're a great organization!

HTML stands for Hyper-Text Markup Language.

Every site on the internet is built with HTML. To learn it here, I'm going to show you how to use it to make a site all about how calamondins are a delicious and amazing fruit.

If you're not a fan of calamondins, feel free to adapt the instructions here to make your own fan site for something you think is awesome. Perhaps Beyoncé, or Steven Universe, or the DivaCup, or knitting.

Anything works. Or feel free to just follow my lead with calamondins (which are, after all, amazing).

To start our ✨magical✨ calamondin🍋 journey, keep this window open, and click this link to open SiteGarden's HTML editor in a new tab.

Once you've got that open, let's start our web site. Type Calamondins are delicious! into the editor. The editor is the part that looks like this:

When you're done, the preview next to the editor should look like this:

This is pretty much the whole idea of this site: letting you write stuff in the editor, and being able to see what it will look like, live, in the preview.

But doing this with just plain text is pretty boring, so click here to go to the next step: adding some HTML elements.