How Best to Use Tesserae

Each tutorial on Tesserae is written with a specific topic in mind. Often, it's something you might want on your site, like images or media queries. Other times, it's a major bit of web design theory, things like block and inline elements or page flow. These will help you understand the behavior of certain elements.

Pay attention to bolded or italicized wording. The former is for new terms I'll be using throughout the rest of the site, while the latter is for reminders or warnings.

Tesserae doesn't, nor does it aim to, cover everything. Features so esoteric, only a small handful of people would need to know about them, won't be covered. That's what a reference site is for. Tesserae aims to give you a good enough understanding with the topics you'd need to build a valid static site using text and multimedia such as audio and video. After each tutorial, you'll find a selection of sources in case you'd like to read more.

Example markup

Tesserae often provides example markup in the form of code blocks. Not only is this a demonstration of the markup at hand, but it also gives you the opportunity to paste the markup into your page and test it out for yourself.

Here's what a code block on Tesserae looks like:

<p>Lorem ipsum dolor amet freegan pour-over hella sed bitters crucifix la croix chillwave adipisicing poutine paleo small batch. Vegan truffaut squid iceland, tumblr ullamco air plant pok pok consectetur cronut. Meh flexitarian gentrify ut.</p>

This can be copy-and-pasted into your text editor and used right away. To test out any changes you make:

1. Save the page in your text editor.
2. Open it in one of your browsers. If it's already open, refresh the page.
3. Your changes will be immediately visible.

Summaries

Most pages on Tesserae end off with a summary of what was covered. These bullet points should at least give you the general idea of what you need to know, if not all the finer details or examples.

Ideally, you should look at the entire page, but in a pinch, the summaries suffice.

Further reading

Remember citing your sources in school? Because I'd like you to get as many second opinions and alternate explanations as you might need to grasp a topic (or just to see if I'm making it all up), Tesserae cites other sites covering the same material at the bottom of each page, next to the summary. Often, a reference site will be provided for exhaustive coverage, and other tutorials round out the list. Helper tools like color palette or gradient generators may also be linked to aid you in getting the look you want.

Sections

At current, Tesserae is split up into six sections: this primer section, two HTML sections, two CSS sections, and the extras section.

The basic sections are written to essentially fast-track you into the basics of each language without much theory or overhead. If you follow only those, you'll have a simple, solid site with some color and flair. It's recommended that you follow these tutorials in order.

After you've mastered the basic sections, the advanced sections will give you the more abstract information you'll need to really understand what your site's doing. By the end of those, you should be able to create a site with a little more going on and more of a layout to speak of.

The extras section is for miscellaneous topics that usually only fall under the banner of "webmaster". These are more technical, and depending on your hosting, might not even apply to you. These tutorials don't have to be followed in any sort of order and really don't even need to be read together.

And with the basics all wrapped up, you're ready to start building a website. Click here to start the beginner HTML tutorial.