Thumbnail for #51: A Lesson Learned in Accessibility

#51 A Lesson Learned in Accessibility

Running Time: 18:54

Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That …

Watch the Screencast
Thumbnail for #49: Hodgepodge of Photoshop Tricks

#49 Hodgepodge of Photoshop Tricks

Running Time: 36:02

Photoshop is my tool of choice in designing for the web. I liken it to choosing the guitar as an instrument to play. A guitar sounds great alone and there are loads of resources to help you learn it. Photoshop …

Watch the Screencast
Thumbnail for #48: Skinning phpBB

#48 Skinning phpBB

Running Time: 27:22

Creating a completely custom theme for the popular forums software phpBB would be a monster job. Fortunately, to get up and running quickly, we can simply wrap a default installation of phpBB into the skin of an existing site pretty …

Watch the Screencast
Thumbnail for #47: CSS Shorthand

#47 CSS Shorthand

Running Time: 28:03

There are a handful of CSS attributes that can be combined into a single attribute for coding brevity. I endorse the use of CSS shorthand whenever possible. It saves space and makes code more readable. In this screencast I introduce …

Watch the Screencast
Thumbnail for #46: Domains, DNS, Hosting and Google Apps

#46 Domains, DNS, Hosting and Google Apps

Running Time: 24:54

Dealing with domains and hosting and all the server setup stuff isn’t usually the most comfortable stuff for web designers. In this screencast I walk though my regular process and share many little tips of how I like to handle …

Watch the Screencast
Thumbnail for #45: Using FoxyCart for eCommerce

#45 Using FoxyCart for eCommerce

Running Time: 28:46

FoxyCart is my new favorite eCommerce system. It is extremely easy to get started with. You have full design control over all aspects of it (cart, checkout, receipts). It has the features you need (downloadables, security, saved accounts, subscriptions). Best …

Watch the Screencast
Thumbnail for #44: Hodgepodge of WordPress Tricks

#44 Hodgepodge of WordPress Tricks

Running Time: 42:49

It’s WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven’t made it into previous WordPress screencasts. We cover:

  • Listing categories with a built-in function and building a tabbed
Watch the Screencast
Thumbnail for #43: How to Use CSS Sprites

#43 How to Use CSS Sprites

Running Time: 25:21

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page by combining images …

Watch the Screencast
Thumbnail for #42: All About Floats Screencast

#42 All About Floats Screencast

Running Time: 27:38

Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We …

Watch the Screencast
Thumbnail for #41: WordPress as a CMS

#41 WordPress as a CMS

Running Time: 27:19

We once did a poll asking people what their favorite CMS was. WordPress was a run-away winner, but also got many comments of “WordPress isn’t a CMS!!“. Well clearly, in the strictest sense, WordPress is a CMS as …

Watch the Screencast
Thumbnail for #40: How z-index Works

#40 How z-index Works

Running Time: 18:37

Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it’s tied to positioning, some quirks, and some general advice.…

Watch the Screencast
Thumbnail for #39: How to Use sIFR 3

#39 How to Use sIFR 3

Running Time: 22:10

sIFR (Scalable Inman Flash Replacement) is a technology that allows you to use any font you wish on your web pages. Long story short, it uses JavaScript to target certain text page elements and replace them with a block of …

Watch the Screencast
Thumbnail for #37: Status, Fluid and Menu Bar Apps

#37 Status, Fluid and Menu Bar Apps

Running Time: 19:37

Fair warning: this screencast is fairly Mac-specific and I ramble on about all kind of random non-web design related stuff. I introduce the new web app Status that I’ve been working on. Then I show Fluid, which is a Mac …

Watch the Screencast
Thumbnail for #36: Current Nav Highlighting: Using PHP to Set the Body ID

#36 Current Nav Highlighting

Running Time: 18:56

One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each …

Watch the Screencast
Thumbnail for #35: Intro to jQuery 2

#35 Intro to jQuery 2

Running Time: 24:55

Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we …

Watch the Screencast
Thumbnail for #33: eCommerce Product Page Makeover

#33 eCommerce Product Page Makeover

Running Time: 16:50

I subscribe to the theory that web page redesigns should be evolutionary not revolutionary. Making small changes, tweaks, and upgrades over time leads to a higher quality design than up and redesigning the entire thing on a whim or as …

Watch the Screencast
Thumbnail for #32: Using the Unit PNG Fix

#32 Using the Unit PNG Fix

Running Time: 18:14

Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display… but any areas of alpha transparency get turned into nasty blue-gray …

Watch the Screencast

Free Video Courses

Video Course (2015)

Everything You Need To Know About SVG

Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. In his series you're going to learn why SVG is such an important part of building websites. From why SVG is useful and how to get your hands on it all the way to implementing it as a system and fancy stuff like animating it.

Go to Course →