Podcasts by CSS-Tricks Screencasts

#176: Working with Framer Motion from 2019-10-28T17:18:05

Matt Perry from Framer and I take a look at the React animation library Listen

#175: 7 Things to Know About Webflow from 2019-10-10T19:45:05

(This is a sponsored video I worked on between us at CSS-Tricks and Webflow. I think Webflow is a fascinating product for building websites...

Listen

#174: Using Local Overrides in DevTools from 2019-08-08T15:01:56

There is a feature of Chrome DevTools that lets you:

1. See the code of any given resource the current web page is using (like CSS and JavaScript).


2. “Pretty P...
   Listen

#173: Ooooops I guess we’re full-stack developers now. from 2019-08-07T16:23:12

And by “we’re”, I mean us, front-end developers ;)

Here’s the website that goe...

Listen

#172: Hand SVGing a Curved Line from 2019-08-06T15:12:31

I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates...

Listen

#171: Movable Stacked Card Row in CSS from 2019-04-29T14:38

The same basic idea as the cards on the homepage of v17 of this site. …

Listen

#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project from 2019-03-05T00:35:49

Fair warning! This isn’t a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all ...

Listen

#169: How to Think Like a Front-End Developer from 2019-02-07T20:26:18

This is a video from my talk at WordCamp US.

Let’s take a peek at what front-end development has become these days. Starting from what the role is, where we sit, and the ...

Listen

#168: CSS-in-JS from 2019-01-09T15:17:45

I’m joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. ...

Listen

#167: Sponsored Videos for Jetpack and WooCommerce from 2018-12-05T14:32:15

This is a compilation of four videos I’ve done over the last few months for a sponsorship with Automattic. It’s mostly about Je...

Listen

#166: Learn to Integrate Visual Testing with Percy from 2018-10-25T16:21:41

Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site?

That’s exactly wh...

Listen

#165: Building Your Backend with Serverless Functions from 2018-10-18T14:17

David Wells & Chris Coyier talk about how you can build an app hosted on Netlify statically but still have a backend database to power it. We use the classic TODO app example where the data...

Listen

#164: Basic WooCommerce Walkthrough from 2018-08-17T15:15:36

WooCommerce is a powerful and flexible eCommerce plugin for WordPress. Wanna sell Listen

#163: First Steps with Serverless from 2018-07-06T17:47:25

David Wells, from Netlify, and I take some baby steps into building things ...

Listen

#162: What the Heck is Serverless? from 2018-07-05T17:14:06

David Wells, from Netlify, and I take a crack at answering this question in...

Listen

#161: Jetpack from 2018-06-14T14:24:13

Jetpack sponsored this video, which goes into what Jetpack is and can do for your site.

These are my words though! I’m a big Je...

Listen

#160: The All-Powerful Front-End Developer from 2018-06-06T15:20:18

The internet is, without metaphor, just a bunch of servers tied together with wires. Without servers, we’d have no way to share our creations with the world. Yet, in a bit of a paradox, se...

Listen

#159: Learning Vue from 2018-05-12T13:32:51

Sarah Drasner and I dig into Vue! Vue is a very popular JavaScript framework that is absolutely exploding. Sarah is on the core team and is about ...

Listen

#158: An Expando Button Menu from 2018-02-20T01:34:18

I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue...

Listen

#157: A Tale of Four Properties from 2017-10-03T13:54:09

This is a talk I’ve given at a couple of conferences recently. It’s about four different properties in CSS:

1. Listen

#156: Let’s Talk About Webpack from 2017-07-09T16:36:11

Sean Larkin joins me to talk about Webpack!

I doubt I’m alone i...

Listen

#155: Responsive Images, WordPress, and Cloudinary from 2017-06-22T17:51:16

Eric Portis joins me to dig into the world of responsive images.

We start at the basics. Responsive images are specifically images...

Listen

#154: A Poster Child WordPress Site from 2017-05-15T10:43:23

CSS-Tricks itself is a WordPress site, and one in which WordPress is a perfect fit for. Between things like the login and permissions system, blogging, pages, custom post types, forums, eCommerc...

Listen

#153: Getting Started with CSS Grid from 2017-02-20T19:44:10

It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we ...

Listen

#152: Font Loading with Zach Leatherman from 2017-01-30T15:05:01

Time for another pairing screencast! This time I have Zach Leatherman on, from Fila...

Listen

#151: The First Few Minutes with Sublime Text from 2016-12-12T13:19:32

Sublime Text is a pretty darn popular code editor. Despite its popularity and all the good things I’ve heard about it, I still lea...

Listen

#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend from 2016-11-23T16:39:54

Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning sm...

Listen

#149: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer from 2016-08-29T19:39:19

In this screencast I pair up with Brian Muenzenmeyer who, among other things, works on Listen

#148: Laying Things Out (HTML & Flexbox) with Dee Gill from 2016-05-24T19:58:27

In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she’s working on: Listen

#147: Starting a React-Powered Comment Form from 2016-03-18T13:46:05

In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some “rea...

Listen

#146: Getting More from Google Analytics with Philip Walton from 2016-03-07T22:21:48

I pair with Philip Walton (who works for Google on Google Analytics) in this screencast. It complements the case-study we put together: Listen

#145: WordPress Child Themes with Lara Schenck from 2016-02-27T17:47:09

In this video Lara Schenck and I pair up, and she teaches me all about child t...

Listen

#144: Building a JavaScript/Canvas Game with Kyle Simpson from 2016-02-13T15:56:17

Kyle Simpson, partly in an effort to rejuvenate his enthusiasm for working with JavaScript at all, started building a game. He’s not...

Listen

#143: Using and Caching Third-Party JSON with WordPress from 2015-10-23T17:29:07

On the design of CSS-Tricks as I record this, one of the things I wanted to add was a “Front End Design & Development Jobs” widget, powered by the Listen

#142: Hiding Things With CSS from 2015-10-16T14:10:41

There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.

Listen

#141: Getting the Images and Numbers for Responsive Images from 2015-07-21T13:47:34

You know about responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly t...

Listen

#140: Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap from 2015-07-08T22:02:31

This is the video screencast version of a blog post I did not long ago: Useful Flexbox Technique: Alignment...

Listen

#139: Explaining the Server Side Mustard Cut from 2015-04-20T18:07:19

I published a written post about this idea of the Server Side Mustard Cut. So if you’re into reading and checking out code sam...

Listen

#138: Walking Through an HTTPS Conversion on WordPress from 2015-04-13T17:14:25

We just recently moved to “HTTPS everywhere” right here on CSS-Tricks. I wrote up a blog post detailing the steps t...

Listen

#137: SVG is for Everybody from 2015-03-13T19:24:35

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course ...

Listen

#136: Moving Things to a CMS as Needed from 2015-01-20T00:19:02

In this video, I prattle on about a particular “real world” situation I was in involving how I handle the CodePen Meetups...

Listen

#135: Three Ways to Animate SVG from 2014-12-14T20:34:04

Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. …

Listen

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More from 2014-08-01T14:16:39

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don’t write any code.

---

<...

Listen

#133: Figuring Out Responsive Images from 2014-05-16T12:46:09

I’m probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It’s an interesting problem that bred lots of interesting solutions. The whole thin...

Listen

#132: A Quick Useful Case for Sass Math and Mixins from 2014-03-13T20:09:42

I had a little design situation come up where I was making a fluid grid of boxes with floats. I wanted to specify how many boxes across a row was very easily, and have them flush against both ed...

Listen

#131: Tinkering With Flexbox from 2014-01-30T20:32:54

In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up ...

Listen

#130: First Moments with Grunt from 2013-12-10T20:27:55

There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using differ...

Listen

#129: Emmet (is Awesome) from 2013-09-27T16:25:31

Emmet is an add-on for code editors that allows you to write HTML and CSS more quickly.

On the HTML front, it allow you to write Listen

#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub from 2013-08-15T14:06:17

Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web...

Listen

#127: Basics of JavaScript Templating from 2013-08-13T14:41:21

A template is a chunk of HTML that you need to inject onto the page. Often templates are created “server side” – in that they come to the JavaScript fully formed and just need ...

Listen

#126: Using Modernizr from 2013-05-23T19:15:16

Should Modernizr be part of every modern web project? Not necessarily. In this screencast I talk about how you need Modernizr when you plan to do something specifically different depending on it...

Listen

#125: How To Stay Up To Date With Web Technology from 2013-05-21T12:49:06

This is a presentation I gave at a conference just once in December 2012. In this screencast I give it one last time to you, o’ CSS-Tricks subscriber.…

Listen

#124: A Modern Web Designer’s Workflow from 2013-05-21T12:38:46

This is a presentation I gave at conferences in late 2012 and early 2013. In this screencast I give it one last time to you, o’ CSS-Tricks subscriber. …

Listen

#123: If it Moves When You Click, Make Something Stick from 2013-04-09T17:21:47

The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active sta...

Listen

#122: The State of Favicons from 2013-03-28T15:19:18

Forever we all made 16×16 graphics and got them into the .ico format somehow. I probably used this converter tool a milli...

Listen

#121: The Right CMS is a Customized One from 2013-03-19T00:40:54

The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn’...

Listen

#120: A Sublime Text Snippet for Media Query Mixins from 2013-03-15T20:46:47

I’ve never messed with creating custom Sublime Text snippets before. So when James Nowland Listen

#119: Let’s Answer Forum Posts! Vol. 2 from 2013-01-23T21:27:27

In this screencast we live answer more forums posts with no planning whatsoever. I don’t think we hit a homerun on any of the threads we look at, but that’s the lesson. You don’...

Listen

#118: Introduction to CodePen PRO from 2013-01-08T19:40:21

CodePen PRO offers a slew of new features. You can read about them, but much better to show them right?

Listen

#117: Let’s Attempt To Do a “Pull Request” from 2013-01-05T19:42:03

I’ve never in my life submitted a “Pull Request” on GitHub. I wanted to give it a shot, so this video is capturing the moment of me attempting to figure it out. Fair warning, t...

Listen

#116: Let’s Answer Forum Posts! from 2012-12-12T00:03:40

In this screencast we pop over to The Forums to answer as many questions as we can. The point is just to have a little fun and show you how easy it i...

Listen

#115: Don’t Overthink It Grids from 2012-10-24T14:02

Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. There are new layout methods in CSS that are getting closer to prime ti...

Listen

#114: Let’s Do Simple Stuff to Make Our Websites Faster from 2012-08-30T22:18:18

I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain’t that complicated). These are all easy wins with bi...

Listen

#113: Creating and Using a Custom Icon Font from 2012-08-22T15:00:51

As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single...

Listen

#112: Using CodePen from 2012-06-27T18:11:40

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typ...

Listen

#111: Get Yourself Preprocessing in Just a Few Minutes from 2012-05-13T16:49:39

There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple pr...

Listen

#110: Quick Overview of CSS Position Values from 2012-03-18T22:30:18

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the pa...

Listen

#109: Getting off FTP and onto Git Deployment with Beanstalk from 2012-02-13T20:09:35

In this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven’t had much experience with this, so ...

Listen

#108: Using Chartwell from 2012-01-30T01:33:53

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It’s as simple as writing out simple equations like 40+20+25+15. In desktop softwa...

Listen

#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development from 2011-12-14T16:17:56

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is sa...

Listen

#106: Use BrowserStack for Live Web-Based Cross Browser Testing from 2011-12-12T16:02:51

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resi...

Listen

#105: Using SpriteCow from 2011-11-16T16:04:42

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exac...

Listen

#104: Quick Tip: Use Dropbox to Make a Public URL for Anything from 2011-11-07T14:45:44

Just save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.&h...

Listen

#103: Integrating FitVids.js into WordPress from 2011-11-02T14:45:54

The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the...

Listen

#102: Braindump on Responsive Web Design from 2011-10-14T17:36:06

In which I show and explain the very basics of what “responsive web design” has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips...

Listen

#101: Let’s Suck at GitHub Together from 2011-08-25T02:42:48

You are probably pretty aware of why using version control is a good thing. In case you aren’t, I quickly go through that in this video. Then we get into the most basic thing we can possib...

Listen

#100: Let’s Write Semantic Markup from 2011-08-17T05:05:42

We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up....

Listen

#99: Overview of HTML5 Forms Types, Attributes, and Elements from 2011-06-20T11:37:16

HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive...

Listen

#98: Playing with Body Borders from 2011-05-27T00:06:03

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don’t scroll away as the page...

Listen

#97: Intro to CSS Animations from 2011-05-12T19:46:09

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can...

Listen

#96: localStorage for Forms from 2011-04-15T13:38:37

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. ...

Listen

#95: A Tale of Border Gradients from 2011-04-07T20:54:36

Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along t...

Listen

#94: Intro to Pseudo Elements from 2011-01-19T16:09:51

Pseudo elements are visible elements on a web page that aren’t “in the DOM” or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat...

Listen

#93: CSS3 Slideup Boxes from 2010-11-08T11:37:09

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a mo...

Listen

#92: Code Walkthrough of Drawing Table from 2010-10-07T19:44:04

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many f...

Listen

#91: The WordPress Loop from 2010-08-31T11:59:57

There is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than ther...

Listen

#90: Simple TextMate Tips from 2010-07-22T12:48:03

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you’ve been watching these screencasts for a long time, you know I used to mostly use Coda. Since I’...

Listen

#89: Organizing a Photoshop Document from 2010-07-08T11:50:13

If you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn’t intentional, it’s just born of (if ...

Listen

#88: Intro to Compass/Sass from 2010-06-23T21:07:35

Ask a bunch of designers what they wish CSS could do that it can’t now, and you’ll get a big list that reads much like the list of features for the Compass/Sass framework. If you are...

Listen

#87: Moving Up with MAMP from 2010-06-17T11:41:27

Working locally with MAMP is awesome, but what about when you need to take that site live? Last time we got a version of WordPress installed locally, now we’ll take that local version and ...

Listen

#86: First Moments with MAMP from 2010-05-28T12:52:41

I’m way behind the times on this one, but until recently, I have never really developed locally. Everything I did was “going commando” and working directly on servers. The situ...

Listen

#85: Best Practices with Dynamic Content from 2010-05-13T13:28:47

One of the articles I updated during “May is Maintenance Month” was an article about dynamic content. The idea was a simple website where clicking a link would fade out the existing ...

Listen

#84: Site Walkthrough of chris-mcgarry.com from 2010-04-15T13:02:12

I built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loa...

Listen

#83: Thoughts on SEO from 2010-04-01T11:52:31

Fair warning: more rambling than usual. Listen to my thoughts about SEO. What I think I know is that SEO is a series of fairly obvious best practices. A SEO service that helps you with those thi...

Listen

#82: CSS Image Switcher from 2010-03-04T13:04:34

Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hove...

Listen

#81: AJAXing a WordPress Theme from 2010-02-25T13:30:35

Watch me bumble my way through adding AJAX functionality to a WordPress theme. The idea is that any internal link on the site will load into the main content area without requiring a page refres...

Listen

#80: Regarding Wheel Invention from 2010-02-11T13:37:56

A couple needs a photo gallery for their wedding, where everyone can browse and upload their own photos from the wedding. Beginner developer: I know of some great software we ca...

Listen

#79: Complete/Non-Queuing Animations with jQuery from 2010-01-22T15:04:21

When you use jQuery’s .animate() function with something like a hover event, those animations will “queue up”. That is, if you hover multiple times, that animation will fire mu...

Listen

#78: On Web Advertising from 2010-01-04T13:06:10

In this screencast I discuss online advertising. What it is, how it works, and why it isn’t evil (except when it is). I talk about my experiences, the different services out there and the ...

Listen

#77: Styling an Individual Article from 2009-12-16T13:49:55

The idea of “art directing” posts is very popular lately. It’s the idea of applying unique styling to an article on the web in the way that print designers uniquely style artic...

Listen

#76: A Tour of jQuery on a Live Site from 2009-11-20T15:04:19

I’m busy, you’re busy, we’re all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I’m the first...

Listen

#75: How Not To Design a Checkout from 2009-10-29T00:11:20

You’ll have to forgive me here folks, this isn’t a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I&#...

Listen

#74: Editable CSS3 Image Gallery from 2009-10-18T23:23:49

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual trea...

Listen

#73: Building a Website (3 of 3): WordPress Theme from 2009-10-01T17:36:26

In part 3 of this series, we take the HTML and CSS that we have already created for this design, and convert it into a WordPress theme. We start with a completely “blank” WordPress t...

Listen

#72: Building a Website (2 of 3): HTML/CSS Conversion from 2009-09-23T14:04:17

In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop f...

Listen

#71: Building a Website (1 of 3): Photoshop Mockup from 2009-09-16T15:59:08

This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who’s website I happen to ruin during a routine WordPress upgrade...

Listen

#70: Random Pet Peeves from 2009-09-10T03:38:27

I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I’ll sp...

Listen

#69: First Ten Minutes with TypeKit from 2009-08-25T22:56:35

I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I’ll show you the entire process from start to finish, as well as touch on t...

Listen

#68: Think Geek Background Fade Technique from 2009-08-12T17:50:51

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to bl...

Listen

#67: jQuery Part 3 – Image Title Plugin from 2009-07-29T12:23:34

This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrade...

Listen

#66: Table Styling 2, Fixed Header and Highlighting from 2009-07-01T14:22:06

Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is...

Listen

#65: Advanced Uses for Custom Fields in WordPress from 2009-06-23T19:35:14

More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Custom fields are chunks of data that travel along with posts and pages ...

Listen

#64: Building a Photo Gallery from 2009-06-09T13:21:07

This photo gallery will automatically build itself from a directory of images, including sub-directories and the images inside them. Images open in a nice looking jQuery lightbox.

Listen

#63: On Screencasting from 2009-05-21T15:32:04

This is somewhat of a behind the scenes look at how I create and distribute the screencast. I go over the hardware and software I use, how it gets stitched together, and the sizes/formats it get...

Listen

#62: Advanced Form Styling & Functionality from 2009-05-06T16:51:49

This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling...

Listen

#61: Basic Table Styling with CSS from 2009-04-22T18:55:05

Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we’ll cover what that actually means, take a look ...

Listen

#60: AJAX Refreshing RSS Content from 2009-04-08T17:10:43

In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuer...

Listen

#59: Embedding Audio from 2009-04-02T21:27:54

Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four metho...

Listen

#58: HTML & CSS – The VERY Basics from 2009-03-25T01:03:30

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create th...

Listen

#57: Using CSS3 from 2009-03-18T17:31:30

The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusin...

Listen

#56: Integrating FoxyCart and WordPress from 2009-03-05T00:32:40

FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CM...

Listen

#55: Adding RSS Content with SimplePie from 2009-02-25T22:11:50

The “Really Simple” part of RSS is sometimes misleading. What if you want to pull in content from an RSS feed and display it on your site? Doing that from scratch would be no-so-easy...

Listen

#54: Introduction to FLIR from 2009-02-18T00:32:19

FLIR (Face Lift Image Replacement) bills itself as an “alternative to sIFR”. They are definitely in the same category. sIFR has some extra functionality, but is relies on more techno...

Listen

#53: Customizing PayPal Forms, Buttons, and Headers from 2009-02-12T00:33:57

PayPal, love it or hate it, is easiest way to send and receive money online. In this screencast we go through how to create a Buy Now button, which uses a custom email address, has a custom head...

Listen

#52: Building a Print Stylesheet from 2009-02-05T14:36:32

My technique for building print stylesheets goes like this. 1) Start from scratch 2) Leave most defaults alone 2) Eliminate every thing on the page you don’t need with display: none; 4) Pu...

Listen

#51: A Lesson Learned in Accessibility from 2009-01-22T14:33: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 i...

Listen

#50: Building a Customized and Dynamic Ordering Form from 2009-01-20T23:41:03

Real-life clients have real-life needs for their websites. They don’t care about your fancy RSS feeds and AJAX, they just want their website to do what they tell you they want it to do. In...

Listen

#49: Hodgepodge of Photoshop Tricks from 2009-01-19T14:16:23

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 lear...

Listen

#48: Skinning phpBB from 2009-01-18T22:41:19

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 in...

Listen

#47: CSS Shorthand from 2009-01-18T02:36:09

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 re...

Listen

#46: Domains, DNS, Hosting and Google Apps from 2009-01-17T00:21:22

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 ma...

Listen

#45: Using FoxyCart for eCommerce from 2009-01-16T02:52:28

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 ne...

Listen

#44: Hodgepodge of WordPress Tricks from 2009-01-14T18:27:03

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 cove...

Listen

#43: How to Use CSS Sprites from 2009-01-14T00:22:05

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 combi...

Listen

#42: All About Floats Screencast from 2009-01-12T19:59:59

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 ...

Listen

#41: WordPress as a CMS from 2009-01-11T14:30:45

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, i...

Listen

#40: How z-index Works from 2009-01-10T22:24:36

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.…

Listen

#39: How to Use sIFR 3 from 2009-01-09T20:07:57

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 ...

Listen

#38: Basics & Tips on Designing for the iPhone from 2009-01-09T04:38:16

Designing a web page that is optimized for the iPhone isn’t rocket science. It’s the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens ...

Listen

#37: Status, Fluid and Menu Bar Apps from 2009-01-08T04:43:43

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. Th...

Listen

#36: Current Nav Highlighting: Using PHP to Set the Body ID from 2009-01-06T18:20:51

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 C...

Listen

#35: Intro to jQuery 2 from 2009-01-05T17:13:30

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 variab...

Listen

#34: Integrating and Customizing Google Maps from 2009-01-04T17:04:27

Google maps, with all the dragging and zooming and satellite view and all, is my mapping service of choice. Google offers an free API for their maps so you can integrate them right onto your sit...

Listen

#33: eCommerce Product Page Makeover from 2009-01-03T16:59:59

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 rede...

Listen

#32: Using the Unit PNG Fix from 2009-01-02T17:18:13

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...

Listen

#31: Introduction to Google Analytics from 2009-01-01T14:49:09

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...

Listen

#30: Creating and Sending HTML Email from 2008-12-19T17:27:31

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 sin...

Listen

#29: Google Search for Your Site from 2008-12-18T14:46:32

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 yo...

Listen

#28: Using Wufoo for Web Forms from 2008-12-18T01:30:10

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...

Listen

#27: Designing for WordPress: Part Three from 2008-12-16T18:39:08

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...

Listen

#26: Designing for WordPress: Part Two from 2008-12-15T18:34:30

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, ch...

Listen

#25: Designing for WordPress: Part One from 2008-12-14T18:23:35

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 Wor...

Listen

#24: Rounded Corners from 2008-12-14T01:25:36

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 t...

Listen

#23: Conditional Stylesheets from 2008-12-13T01:15:34

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 th...

Listen

#22: Cutting Clipping Paths from 2008-12-12T00:27:41

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-d...

Listen

#21: Walkthrough of Contact Form from 2008-12-11T00:24:38

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 sym...

Listen

#20: Introduction to jQuery from 2008-12-10T00:18:03

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 h...

Listen

#19: Designing a Unique Page for Twitter Updates from 2008-12-08T23:07:29

This week I take you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the j...

Listen

#18: Introduction to the Band Website Template from 2008-12-08T00:15:03

I have recently released a side project called the Band Website Template. This is just a quick tour of it, explaining why it was built and why I think it can be useful for bands and their web de...

Listen

#17: Sliding Doors Button from 2008-12-07T00:11:07

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 i...

Listen

#16: Creating the Photoshop Mockup from 2008-12-05T15:55:58

This episode is a prequal to episodes 12, Listen

#15: Introduction to Firebug from 2008-12-04T15:51:47

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 instan...

Listen

#14: Converting a Photoshop Mockup: Part Two, Episode Three from 2008-12-03T15:21:11

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 Fireb...

Listen

#13: Converting a Photoshop Mockup: Part Two, Episode Two from 2008-12-02T15:03:17

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...

Listen

#12: Converting a Photoshop Mockup: Part Two, Episode One from 2008-12-01T14:56:36

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup in...

Listen

#11: Working Modularly with PHP from 2008-11-26T15:49:13

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 p...

Listen

#10: Fixed Width, Fluid Width & Elastic Width from 2008-11-25T15:46:45

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as s...

Listen

#9: Starry Night: 3D Background with the Parallax Effect from 2008-11-25T03:08:06

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 I...

Listen

#8: CSS Formatting from 2008-11-23T18:39:51

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...

Listen

#7: Three State Menu from 2008-11-22T18:36:35

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 e...

Listen

#6: Tools of the Trade from 2008-11-21T15:40:22

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 a...

Listen

#5: Columns of Equal Height: Super Simple Two Column Layout from 2008-11-20T15:37:22

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...

Listen

#4: Forcing Scrollbars: Eliminating “Horizontal Jumps” from 2008-11-19T14:48:17

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 f...

Listen

#3: Converting a Photoshop Mockup (part 3 of 3) from 2008-11-12T20:35:40

I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the co...

Listen

#2: Converting a Photoshop Mockup (part 2 of 3) from 2008-11-11T20:29:20

In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I d...

Listen

#1: Converting a Photoshop Mockup (part 1 of 3) from 2008-11-10T22:41:45

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure th...

Listen