css

Resource (external link)

This is a very well-written, easy-to-understand blog post describing how to use the CSS property @font-face to implement non-standard fonts in your web site.

Resource (external link)

This small web app is a must-have when you are using the CSS @font-face property. You upload a font file to Font Squirrel (be sure you have the legal right to embed the font on web pages), select a few options, and then Font Squirrel generates the font in other font file formats so that your font works across different browsers. It even generates the @font-face CSS code that references the new font files!

Resource (external link)

Modernizr is a handy JavaScript library that detects the capabilities of the browser viewing your site, and then dynamically adds classes to the <html> root element on the page, based on what it detects. You can then write your CSS and jQuery selectors using these classes. An example use would be to detect support for the @font-face CSS property (I am doing that on this site). You can also use it to detect support for various HTML5 elements. I have also heard of people using it to make their sites more mobile browser-friendly.

Resource (external link)
Blog Post

This tutorial demonstrates one way of setting up an audio player for a page with multiple audio clips. The end result is the following.

Rain and thunder
Elevator door
Door handle creaking
Applause
School bell

Here's a little background on what led to this solution. Some time ago, I was asked to build a small site that included dozens of audio clips on one page. The client suggested I base this site on an existing site of hers that also had a page with dozens of audio clips. Visitors to the site could play different audio clips by clicking on a play button for each clip. The play buttons for the clips were laid out in a table similar to the one depicted below:

Table of audio clip play buttons