CSS-Tricks Screencasts
213 episodes - English - Latest episode: over 2 years ago - ★★★★★ - 86 ratingsCSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability.
Homepage Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Episodes
#63: On Screencasting
May 21, 2009 15:32 - 41 minutes - 105 MB VideoThis 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 gets put into and why. …
#62: Advanced Form Styling & Functionality
May 06, 2009 16:51 - 41 minutes - 93.5 MB VideoThis 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, one for validation, and one for …
#61: Basic Table Styling with CSS
April 22, 2009 18:55 - 41 minutes - 97.3 MB VideoTables 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 at a table, the markup that creates it, quirks and …
#60: AJAX Refreshing RSS Content
April 08, 2009 17:10 - 22 minutes - 54.4 MB VideoIn 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 …
#59: Embedding Audio
April 02, 2009 21:27 - 23 minutes - 55.3 MB VideoPutting 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 methods/players. Two use …
#58: HTML & CSS – The VERY Basics
March 25, 2009 01:03 - 32 minutes - 62.3 MB VideoThis 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 them, although a nice code editor …
#57: Using CSS3
March 18, 2009 17:31 - 51 minutes - 104 MB VideoThe 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 …
#56: Integrating FoxyCart and WordPress
March 05, 2009 00:32 - 36 minutes - 99.9 MB VideoFoxyCart 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 …
#55: Adding RSS Content with SimplePie
February 25, 2009 22:11 - 33 minutes - 78.5 MB VideoThe “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, but thankfully we have wonderful SimplePie …
#54: Introduction to FLIR
February 18, 2009 00:32 - 25 minutes - 70.4 MB VideoFLIR (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 technology on both the server and client side. FLIR may be …
#53: Customizing PayPal Forms, Buttons, and Headers
February 12, 2009 00:33 - 28 minutes - 67.3 MB VideoPayPal, 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 header, custom thank …
#52: Building a Print Stylesheet
February 05, 2009 14:36 - 38 minutes - 117 MB VideoMy 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. Of course, I spend …
#51: A Lesson Learned in Accessibility
January 22, 2009 14:33 - 18 minutes - 84 MB VideoEven 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 is compounded when dealing with AJAX style behavior. That …
#50: Building a Customized and Dynamic Ordering Form
January 20, 2009 23:41 - 31 minutes - 112 MB VideoReal-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 this screencast I walk through …
#49: Hodgepodge of Photoshop Tricks
January 19, 2009 14:16 - 36 minutes - 105 MB VideoPhotoshop 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 …
#48: Skinning phpBB
January 18, 2009 22:41 - 27 minutes - 113 MB VideoCreating 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 …
#47: CSS Shorthand
January 18, 2009 02:36 - 28 minutes - 71 MB VideoThere 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 …
#46: Domains, DNS, Hosting and Google Apps
January 17, 2009 00:21 - 24 minutes - 73.2 MB VideoDealing 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 …
#45: Using FoxyCart for eCommerce
January 16, 2009 02:52 - 28 minutes - 96.2 MB VideoFoxyCart 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 need (downloadables, security, saved accounts, subscriptions). Best …
#44: Hodgepodge of WordPress Tricks
January 14, 2009 18:27 - 42 minutes - 157 MB VideoIt’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 cover: Listing categories with a built-in function and building a tabbed …
#43: How to Use CSS Sprites
January 14, 2009 00:22 - 25 minutes - 62.9 MB VideoCSS 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 …
#42: All About Floats Screencast
January 12, 2009 19:59 - 27 minutes - 99.6 MB VideoEven 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 …
#41: WordPress as a CMS
January 11, 2009 14:30 - 27 minutes - 103 MB VideoWe 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 …
#40: How z-index Works
January 10, 2009 22:24 - 18 minutes - 54.4 MB VideoZ-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.…
#39: How to Use sIFR 3
January 09, 2009 20:07 - 22 minutes - 74.2 MB VideosIFR (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 replace them with a block of …
#38: Basics & Tips on Designing for the iPhone
January 09, 2009 04:38 - 31 minutes - 104 MB VideoDesigning 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 do not vary, you know exactly what you are …
#37: Status, Fluid and Menu Bar Apps
January 08, 2009 04:43 - 19 minutes - 77.5 MB VideoFair 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. Then I show Fluid, which is a Mac …
#36: Current Nav Highlighting: Using PHP to Set the Body ID
January 06, 2009 18:20 - 18 minutes - 38.2 MB VideoOne 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 CSS can control what each …
#35: Intro to jQuery 2
January 05, 2009 17:13 - 24 minutes - 66.3 MB VideoStarting 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 variable and an IF/ELSE statement. Then we …
#34: Integrating and Customizing Google Maps
January 04, 2009 17:04 - 21 minutes - 69.5 MB VideoGoogle 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 site. Set you own default …
#33: eCommerce Product Page Makeover
January 03, 2009 16:59 - 16 minutes - 46.6 MB VideoI 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 redesigning the entire thing on a whim or as …
#32: Using the Unit PNG Fix
January 02, 2009 17:18 - 18 minutes - 99.6 MB VideoDesigning 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 of alpha transparency get turned into nasty blue-gray …
#31: Introduction to Google Analytics
January 01, 2009 14:49 - 25 minutes - 82.5 MB VideoGoogle 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 …
#30: Creating and Sending HTML Email
December 19, 2008 17:27 - 27 minutes - 102 MB VideoDesigning 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 …
#29: Google Search for Your Site
December 18, 2008 14:46 - 16 minutes - 55.3 MB VideoIntegrating 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 …
#28: Using Wufoo for Web Forms
December 18, 2008 01:30 - 27 minutes - 83.5 MB VideoAnytime 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 …
#27: Designing for WordPress: Part Three
December 16, 2008 18:39 - 59 minutes - 124 MB VideoIn 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 …
#26: Designing for WordPress: Part Two
December 15, 2008 18:34 - 52 minutes - 115 MB VideoWe 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 …
#25: Designing for WordPress: Part One
December 14, 2008 18:23 - 16 minutes - 43.1 MB VideoWordPress 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 …
#24: Rounded Corners
December 14, 2008 01:25 - 25 minutes - 67.3 MB VideoHere 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 …
#23: Conditional Stylesheets
December 13, 2008 01:15 - 17 minutes - 50.6 MB VideoInternet 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 …
#22: Cutting Clipping Paths
December 12, 2008 00:27 - 16 minutes - 48.1 MB VideoWe’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 …
#21: Walkthrough of Contact Form
December 11, 2008 00:24 - 24 minutes - 55.4 MB VideoIn 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 …
#20: Introduction to jQuery
December 10, 2008 00:18 - 17 minutes - 37.1 MB VideoThe 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 …
#19: Designing a Unique Page for Twitter Updates
December 08, 2008 23:07 - 19 minutes - 47.1 MB VideoThis 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 javascript stuff provided by Twitter to the markup, to …
#18: Introduction to the Band Website Template
December 08, 2008 00:15 - 14 minutes - 30 MB VideoI 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 designers. NOTE:…
#17: Sliding Doors Button
December 07, 2008 00:11 - 14 minutes - 23.3 MB VideoWhile 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 …
#16: Creating the Photoshop Mockup
December 05, 2008 15:55 - 22 minutes - 77.4 MB VideoThis episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work. Links from Video: View …
#15: Introduction to Firebug
December 04, 2008 15:51 - 13 minutes - 33.8 MB VideoFirebug 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 …
#14: Converting a Photoshop Mockup: Part Two, Episode Three
December 03, 2008 15:21 - 23 minutes - 61.1 MB VideoWe 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 …