Tesserae encourages exploration. No one site is the be-all end-all of information, and neither is Tesserae. As a result, along with the "Further reading" sections found on most of the tutorials, I put together this list of links of sites I check for my web work, use frequently, and recommend highly.
These are sites that specialize in reference material and general information.
- Can I Use...
- Put in a feature (say,
position: sticky;), and Can I Use... will tell you how good support for it is, right down to the browser version.
- A wealth of well-written articles on a variety of CSS and UX (user interface) topics.
- MDN Web Docs
- This is the gold standard of reference sites. Put together by Mozilla themselves, MDN features interactive demos, exhaustive documentation on just about every element and declaration, and even a compatibility chart for what elements you can expect to work in what browsers.
These are online tools for writing better markup and assisting you in building sites.
- Base64 File Encoder
- Base64 is a scheme for encoding binary files as ASCII characters. This means you can actually pack images and fonts directly into a page or stylesheet to cut down on HTTP requests (of course, the page becomes much bigger as a result).
- W3C CSS Validation Service
- The W3C's official service for checking if you've written your stylesheets correctly.
- Font Converter
- As its name suggests, this is good for converting between a variety of font formats, including TTF, OTF, SVG, and WOFF. If you're looking to slim your site down and speed downloads, consider converting your fonts to WOFF or WOFF2.
- Hipster Ipsum
- My personal favorite placeholder text generator. Mixes gibberish Latin with trendy hipster irony. Chillwave, anyone?
- W3C Link Checker
- Once you've gotten your site online, it's a good idea to use a tool to check for broken links.
- W3C Markup Validation Service
- Much like the CSS validator above, but for HTML and XHTML pages.
- NuHTML Checker
- Another HTML validator service from the W3. This one's ostensibly a testing ground for new validating methods, but I'm not aware of any significant differences between them.
- A good site for generating a color palette quickly and easily. You can start with a base color and come out with a pleasing triad, tetrad, a swatch of complimentary colors, and everything's tweakable so you can get the exact colors you want. There's even some preview pages you can apply your palette to, so you can quickly see how everything stacks up.
- Real Favicon Generator
- This tool handles generating all the permutations of favicons and home screen icons for you. You can go as simple as giving it a single image and letting it handle the rest to as picky as customizing how your site looks on every different home screen. Aside from the images, this site will also give you a chunk of markup to add to your page
headto make the favicons work.
- For advanced webmasters, a sitemap is a good way to make sure the whole of your site is being indexed. This site will crawl yours and generate a sitemap ready for Google Search Console or anything else that requires one. (Note that the free service only checks up to 500 pages, but even on my personal sites, I've yet to hit this limit.)
These sites are interesting as a historical curiosity. You likely shouldn't follow any of their advice, but these are what the developers of yesteryear used to put their sites together.
- Index DOT HTML
- A curious and very thorough reference for both HTML and CSS, going back to about 1995 or so. Hasn't been updated since the mid-2000s, but a lot of work definitely went into it.
- Lissa Explains
- Lissa Explains was a major influence on Tesserae for the way it explains concepts like adding music to a page or making headers instead of being a pure reference site. Much of it hasn't been updated since the days of IE6, and some of it outright doesn't work in modern browsers, but that's what's fascinating about it. Also, it was put together by an 11-year-old girl.
- The Neopets HTML Guide
- Neopets was many a child's first introduction to web design through its pet pages, lookups, and shops. If you're building something for Neopets, you'll need to make it conform to Neopets' strange, retro, filtered HTML and CSS. Thankfully, they maintain a guide to show you exactly what's acceptable practice.