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
Thumbnail for #11: Working Modularly with PHP

#11 Working Modularly with PHP

Running Time: 14:44

Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol’ static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a …

Watch the Screencast
Thumbnail for #9: Starry Night: 3D Background with the Parallax Effect

#9 Starry Night

Running Time: 14:27

Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start to finish. Since Internet Explorer 6 and under do not …

Watch the Screencast
Thumbnail for #8: CSS Formatting

#8 CSS Formatting

Running Time: 14:39

Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically …

Watch the Screencast
Thumbnail for #7: Three State Menu

#7 Three State Menu

Running Time: 27:17

Using a variation of the CSS Sprites technique, we can create a “three state” menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any “pauses” while moving to …

Watch the Screencast
Thumbnail for #6: Tools of the Trade

#6 Tools of the Trade

Running Time: 15:33

Before I get too far along in these screencasts, I thought I would introduce you a little to my working environment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac …

Watch the Screencast
Thumbnail for #5: Columns of Equal Height: Super Simple Two Column Layout

#5 Columns of Equal Height

Running Time: 12:39

Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I’ll show you a little trick around it. Instead of making the actual elements themselves equal height, we’ll use a …

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 →