Treehouse: Grow your CSS skills. Land your dream job.
Thumbnail for Seamless Responsive Photo Grid demo
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
thumbnail for HTML Email Template 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
Thumbnail for Responsive Data Tables 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
Thumbnail for Editable Invoice 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
Thumbnail for DocTemplate demo
Fixed Sidebar with Navigation. Some CSS3 fun. jQuery AJAX for changing pages, with permalinks via hash tag.
Download Files   View Demo
Thumbnail for Typographic Grid 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
Thumbnail for Drawing Table demo
Drawing Table
Cool thingy to use your mouse cursor to draw on a grid with different colors.
Download Files   View Demo
Thumbnail for Layout Packs demo
Layout Packs
Several common fluid-width layout frameworks.

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

Download Files

thumbnail for Modal Log in Page demo
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
thumbnail for Creating a Body Border demo
Creating a Body Border
Creating a border to go around an entire browser window.

Demos: 4 Divs Technique / Psuedo Elements Technique / body border

thumbnail for Fade-in Gradient Body Border demo
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
Thumbnail for WPTypo WordPress Theme demo
WordPress Theme: WPTypo
100% typographic theme, no images used.
Download Files   View Demo
Thumbnail for Perfect Full Page Background Image 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

Thumbnail for One Page Resume demo
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