Demos

Illustration by John Neiner

Seamless Responsive Photo Grid: Create a grid of photos and display them edge-to-edge on the browser window with no gaps.; Download Files View Demo

HTML Email Template: Nothing too fancy here, but a real solid foundation on an HTML email template that will work and look good in all email clients. Tables and inline styling, just the way email likes it!; Download Files View Demo

Responsive Data Tables: Using "responsive design" principles to detect if the screen is smaller than the maximum squishitude of our table. If it is, we're going to reformat the table.; Download Files View Demo

Editable Invoice: Just click to edit any of the information. Math is done automatically. Print out the result, or print to PDF for mailing.; Download Files View Demo

DocTemplate: Fixed Sidebar with Navigation. Some CSS3 fun. jQuery AJAX for changing pages, with permalinks via hash tag.; Download Files View Demo

Typographic Grid: The type on the page follows a "vertical rhythm" in that the baseline stays in exact increments down the page even when other typographic thing change. Click to toggle both horizontal and vertical grids.; Download Files View Demo

Drawing Table: Cool thingy to use your mouse cursor to draw on a grid with different colors.; Download Files View Demo

Layout Packs

Several common fluid-width layout frameworks.

Demos: Fixed, Fluid / Fixed, Fluid, Fixed / Fluid, Fixed / Half and Half

Download Files

Modal Log in Page: A completely distraction-free log in page. These are becoming more and more popular with web applications which require you to log in before you can do very much. The log in page can be a great place to have fun with design and do something unique.; Download Files View Demo

Creating a Body Border: Creating a border to go around an entire browser window.; Demos: 4 Divs Technique / Psuedo Elements Technique / Kottke.org body border

Fade-in Gradient Body Border: Darken the edges of your site with this "body border" technique. Makes use of alpha-transparent PNG's which "fade in" from the edges of the browser window. jQuery provides the engine to optionally have the gradients fade in and out.; Download Files View Demo

WordPress Theme: WPTypo: 100% typographic theme, no images used.; Download Files View Demo

Perfect Full Page Background Image

Create a background image on a website that covers the entire browser window at all times.

Demos: Progressive CSS3 Way / CSS-Only Technique #1 / CSS-Only Technique #2 / jQuery Method

Download Files

One Page Resume: Very simple, very readable, clean resume site. Appropriate markup, microformats, and prints cleanly (could even print to PDF for emailing purposes).; Download Files View Demo

I recommend using Treehouse for learning web design, web development, and iOS development. Their structured course-based learning is like a more modern college at about 1% of the price.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

You already know Wufoo is the best online form builder. But did you know Wufoo forms can accept payments? That means you can take donations, start subscriptions, handle paid event registrations, or even sell Girl Scout cookies online as easy as, well, Wufoo. Try it free!