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
Thumbnail for #31: Introduction to Google Analytics

#31 Introduction to Google Analytics

Running Time: 25:48

Google Analytics is a free service to track all sorts of information about the visitors to your website. I recently had a weird experience with the Analytics on CSS-Tricks, so I thought it would be a good time to introduce …

Watch the Screencast
Thumbnail for #30: Creating and Sending HTML Email

#30 Creating and Sending HTML Email

Running Time: 27:38

Designing HTML Email is far cry from regular web design. Sure, they both us HTML elements, but the whole philosophy is different. In this world, you gotta do all you can do to make sure this single design is as …

Watch the Screencast
Thumbnail for #29: Google Search for Your Site

#29 Google Search for Your Site

Running Time: 16:17

Integrating search on a website can be an incredibly complex subject far beyond my web development skills. Fortunately, Google offers a service called “Custom Search Engine” which you can integrate right into your own site. This leverages Googles awesome search …

Watch the Screencast
Thumbnail for #28: Using Wufoo for Web Forms

#28 Using Wufoo for Web Forms

Running Time: 27:47

Anytime anyone asks me about forms, I always mention Wufoo. At work and at home, almost every single form I create I just use Wufoo. It makes form creation so easy it’s almost entertaining. In this screencast I walk you …

Watch the Screencast
Thumbnail for #27: Designing for WordPress: Part Three

#27 Designing for WordPress

Running Time: 59:37

In part three of this series, we finish up the structure of the site and start diving into the details. The typography is set up, the right sidebar is set up, and the footer if flushed out. Then we use …

Watch the Screencast
Thumbnail for #26: Designing for WordPress: Part Two

#26 Designing for WordPress

Running Time: 52:48

We have WordPress installed, now let’s really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts/pages. Then …

Watch the Screencast
Thumbnail for #25: Designing for WordPress: Part One

#25 Designing for WordPress

Running Time: 16:27

WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress. In part one, we …

Watch the Screencast
Thumbnail for #24: Rounded Corners

#24 Rounded Corners

Running Time: 25:55

Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five …

Watch the Screencast
Thumbnail for #23: Conditional Stylesheets

#23 Conditional Stylesheets

Running Time: 17:58

Internet Explorer provides a way to target CSS styling information specifically for its different versions. These “conditional stylesheets” are the best way to handle CSS problems that pop up with your page in IE. They aren’t “hacks” (which are liable …

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 →