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
Thumbnail for #22: Cutting Clipping Paths

#22 Cutting Clipping Paths

Running Time: 16:15

We’re back in Photoshop this week because I wanted to talk a little bit about a very specific skill that I think is important for all designers. That is the Pen Tool and using it to hand-draw clipping paths. There …

Watch the Screencast
Thumbnail for #21: Walkthrough of Contact Form

#21 Walkthrough of Contact Form

Running Time: 24:50

In some ways, the Contact Form is the “Hello, World!” application of web designers and web developers. It is nothing that hasn’t been done before a million times, but it is symbolic of being able to control the design of …

Watch the Screencast
Thumbnail for #20: Introduction to jQuery

#20 Introduction to jQuery

Running Time: 17:02

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This …

Watch the Screencast
Thumbnail for #17: Sliding Doors Button

#17 Sliding Doors Button

Running Time: 14:28

While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra …

Watch the Screencast
Thumbnail for #15: Introduction to Firebug

#15 Introduction to Firebug

Running Time: 13:38

Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you …

Watch the Screencast
Thumbnail for #14: Converting a Photoshop Mockup: Part Two, Episode Three

#14 Converting a Photoshop Mockup

Running Time: 23:58

We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we …

Watch the Screencast
Thumbnail for #13: Converting a Photoshop Mockup: Part Two, Episode Two

#13 Converting a Photoshop Mockup

Running Time: 25:45

In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover …

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 →