Tutorials on Web Design

Video Screencasts

#60: AJAX Refreshing RSS Content: Running time: 22:56; 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 jQuery) to refresh that content without requiring a page refresh.

#59: Embedding Audio: Running time: 23:26; 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.

#58: HTML & CSS - The VERY Basics: Running time: 32:15; As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.

#57: Using CSS3: Running time: 51:36; 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, focusing on the ones that can be used for progressive visual enhancement.

#56: Integrating FoxyCart and WordPress: Running time: 36:32; 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 CMS. In this screencast, we integrate it with WordPress.

#55: Adding RSS Content with SimplePie: Running time: 33:03; We build a really simple site that grabs content from multiple RSS feeds, smushes them together, and displays them using our own custom markup.

#54: Introduction to FLIR: Running time: 25:52; Introducing FLIR, comparing it to sIFR, and installing it on a WordPress site.

#53: Customizing PayPal Forms, Buttons, and Headers: Running time: 28:35; Go through how to create a Buy Now button, which uses a custom email address, has a custom header, custom thank you page, and is custom styled.

#52: Building a Print Stylesheet: Running time: 38:52; 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) Put page-breaks where appropriate.

#51: A Lesson Learned in Accessibility: Running time: 18: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.

#50: Building a Customized and Dynamic Ordering Form: Running time: 31:00; In this screencast I walk through an example feature I am building for a real-life client who needed some very specific functionality built into a page. It is an ordering process that needs to check for a valid zip code, and then do a bunch of custom calculations based on quantities, shipping costs, etc. Both jQuery and PHP are used to do the heavy lifting.

#49: Hodgepodge of Photoshop Tricks: Running time: 36:02; 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 learn it. Photoshop is a very powerful tool all by itself and I’m going to add to that pile of resources by sharing some simple tips and tricks I used when using it every day.

#48: Skinning phpBB: Running time: 27:22; 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 into the skin of an existing site pretty easily. We do just that in this screencast, and work out the kinks that pop up.

#47: CSS Shorthand: Running time: 28:03; 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 readable. In this screencast I introduce all of the common ones and go over a few gotchas that can happen when using them.

#46: Domains, DNS, Hosting and Google Apps: Running time: 24:54; 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 many little tips of how I like to handle it. I use a real live domain name that I recently purchased on Go Daddy, point it to my Media Temple hosting and then switch the email handling to Google Apps.

#45: Using FoxyCart for eCommerce: Running time: 28:46; FoxyCart is my new favorite eCommerce system. In this screencast we cover the process of signing up and setting up FoxyCart at the most basic level. Then I show some examples of it in use, fully customized.

#44: Hodgepodge of WordPress Tricks: Running time: 42:49; 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. See the post page for a complete list of tips covered.

#43: How to Use CSS Sprites: Running time: 25:21; 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 combining images and reducing that number of requests. In this screencast I’m going to show you how to do exactly that, by taking what would be 8 different images and combining them into one. As an added bonus, we then expand the idea with jQuery and build ourselves a little accordion widget.

#42: All About Floats: 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 go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences.

#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 it “manages content”. But is WordPress really only suited for blogging, or can it be used for more traditional non-blog sites? In this screencast I attempt to show off a number of WordPress features that make it very “CMS-like” in my opinion. Including page templates, dynamic menus, parent-child relationship pages, and using posts as ancillary content.