Digital Ocean logo

CSS-Tricks is joining the DigitalOcean community! We are so excited to be joining forces. Learn more about this change here. As a special welcome offer, enjoy $200 of free credit to try DigitalOcean on us.

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
Thumbnail for #4: Forcing Scrollbars: Eliminating “Horizontal Jumps”

#4 Forcing Scrollbars

Running Time: 07:08

In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to “jump” to the left or right when going from a page that needs to vertically scroll to …

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 →