Tesserae Relaunch, Day One March 22, 2020

Getting awful close to Tesserae 2.0 now, enough to count the days left. Here’s a summary of everything I’ve added recently.

highlight.js

Tesserae using a slightly-modified highlight.js setup

After I wrote the page on text editors, I thought it’d be a good idea to look for a proper syntax highlighting script for Tesserae’s markup examples, and highlight.js seemed to fit the bill nicely. Was pleased to see it had a bunch of color choices built in, so I went with Obsidian, which is what I use myself in Notepad++.

Section placeholders and colors

I’m planning to relaunch with only the “Before You Begin” and “Basic HTML” sections for now. My goal as I’ve rewritten these is to target someone who knows their way around a computer enough to work with files, images, music, all that, but doesn’t know a thing about web design. These two sections, I think, make or break the site for that group.

Tesserae's advanced CSS section (without links for now)
Tesserae’s advanced CSS section (without links for now)

For the rest of the sections, I’ll devote my full attention to them after launch, one by one. For now, I just have the section indices (without links) and the color palettes for each one ready to go.

Rearranging for cleaner URLS

Tesserae's new file structure

Tesserae 1.0 had a really janky file structure where HTML and CSS were both divided into “basic” and “advanced”. Given that you’re meant to follow the basic pages in one go before you move onto the advanced ones, I thought a bit of a reorganization was in order. Additionally, now everything is in folders and uses the index.html trick so the URLs stay slick and memorable. (I’ll have a page on that in Tesserae’s extras section at some point.)

More pages, of course

I still need to finish up the page on browsers, file formats, and “how best to use Tesserae”, which is where I explain the structure of the site, markup examples, and get people experimenting and copy-and-pasting. With any luck, it’ll be the perfect prologue into the tutorials proper.

Tesserae's new references page
Tesserae’s new references page

One page I thought would be useful would be a dedicated “references” page with links to tools and other web design sites I personally recommend. Some of it’s not entirely modern or serious (like the Neopets HTML help), but they’re amusing to look back on anyway, so I included them.

Tags: Tesserae, Web Design,

Hosted by DreamHost. mini.css so gracefully developed by @Chalarangelo, bless em.