References
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.
General references
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. - CSS-Tricks
- 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.
- SitePoint
- One part paid portal for a variety of books on web development, and one part excellent resource for everything from CSS help to
.htaccess
optimizations to picking out fonts and WordPress themes. Check out their blog for the latter.
Tools
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).
- 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?
- HTML Tidy
- An excellent tool for cleaning up sloppy, error-ridden markup, such as those output by WYSIWYG editors like Word.
- ICANN Lookup
- Many sites will offer you a "WHOIS lookup" for seeing the registrant information associated with a domain, but most try to sell you domains on the side or other such skeevy behavior. ICANN's official WHOIS tool doesn't.
- NuHTML Checker
- An HTML5 validator service from the W3, considered the gold standard of validators.
- Paletton
- 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
head
to make the favicons work. - W3C CSS Validation Service
- The W3C's official service for checking if you've written your stylesheets correctly.
- 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
- Another validation service, this one for pages using XHTML or HTML 4.0 or below. Putting in an HTML5 page simply redirects the output to the above NuHTML Checker.
- XML-Sitemaps.com
- 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.)
Retro references
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.