CSS-TRICKS Tutorials Collection
CSS-TRICKS.COM Tutorials Collection
English | FLV | 782x646 | VP6 1024 Kbps | AAC 96 Kbps | 7.86 Gb
English | FLV | 782x646 | VP6 1024 Kbps | AAC 96 Kbps | 7.86 Gb
Digital-Tutors helps you make movies, video games and more with the largest online CG training library of thousands video-based lessons.
#1: Converting a Photoshop Mockup (part 1 of 3)
Duration: 10:10
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 these will get more focused with time. Please let me have it with criticisms at my contact page.
#2: Converting a Photoshop Mockup (part 2 of 3)
Duration: 17:10
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 decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some “filler” content for the main area before I end with building the footer.
#3: Converting a Photoshop Mockup (part 3 of 3)
Duration: 31:53
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 columns including the “quick links” section. I also talk a little bit about typography.
#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”
Duration: 7: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 one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.
#5: Columns of Equal Height: Super Simple Two Column Layout
Duration: 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 background image to “fake” the look of equal height columns.
#6: Tools of the Trade: The Mac Software I Use for Web Design
Duration: 15:33
Before I get too far along in these screencasts, I thought I would introduce you a little to my working enviornment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac software. This isn’t an endorsement of any particular working enviorment, I just want everyone to know, see, and understand what these programs are that I will be switching back and forth between in upcoming podcasts.
#7: Creating a Three State Menu
Duration: 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 elminates any “pauses” while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the /videos/images to the HTML to the CSS.
#8: CSS Formatting
Duration: 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 very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder.
#9: Starry Night: 3D Background with the Parallax Effect
Duration: 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 support alpha transparency in PNG’s, this screencase also covers how to create a warning message that will display only in those browsers.
#10: Fixed Width, Fluid Width & Elastic Width
Duration: 16:40
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 some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have “zoom” abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types.
#11: Working Modularly with PHP
Duration: 14:44
Many sites do not use any fancy Content Managment 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 homepage, about page, and contact page. Each of these pages has different main content, but much of it stays exactly the same, like the header, navigation, and footer. Think of these sections as “modules” that you can easily use PHP to insert into the page. This way, making changes to those sections changes all the pages at the same time, saving you time and potentially mistakes. At the end, I show you how you can still achieve unique effects in your navigation despite the code being identical.
#12: Converting a Photoshop Mockup: Part Two, Episode One
Duration: 22:03
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!
#13: Converting a Photoshop Mockup: Part Two, Episode Two
Duration: 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 and “on” states for the tabs. We then create the main content area and footer.
#14: Converting a Photoshop Mockup: Part Two, Episode Three
Duration: 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 fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.
#15: Introduction to Firebug
Duration: 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 see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for javascript programmers.
#16: Creating the Photoshop Mockup
Duration: 22:04
This 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.
#17: Sliding Doors Button
Duration: 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 hook in our markup, we can apply two overlapping background /videos/images to a single spot of text. When that text grows or shrinks, these overlapping /videos/images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.
#18: Introduction to the Band Website Template
Duration: 12:06
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 designers.
#19: Designing a Unique Page for Twitter Updates
Duration: 19:46
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 javascript stuff provided by Twitter to the markup, to the CSS to style the page.
#20: Introduction to jQuery
Duration: 18:12
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 is a very basic introduction to including jQuery on your web page and getting started writing a few functions.
#21: Walkthrough of Contact Form
Duration: 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 a page as well as make a page truly functional. In this screencast I talk about contact forms in general as well as quickly walk through the design, creating, and functionality of Contact Form.
#22: Cutting Clipping Paths
Duration: 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 are a variety of ways to make selections in Photoshop, but drawing a real vector path is the most tried-and-true and highest quality way to do so. Mastering this tool will make you a better designer and help unleash your creative potential.
#23: Conditional Stylesheets
Duration: 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 to cause problems with new browsers down the road), they are perfectly valid code. Just be careful not to overdo it and make things more complicated for yourself.
#24: Rounded Corners
Duration: 25:56
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 techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be!
#25: Designing for Wordpress: Part One
Duration: 16:27
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 WordPress. In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.
#26: Designing for Wordpress: Part Two
Duration: 52:48
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, changing some settings and creating posts/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all imporant things to consider as well as the overall feel. WordPress sites don’t need to scream “Blog!” unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the “extra-content” stuff like the Twitter feed, or that might be a part four.
#27: Designing for Wordpress: Part Three
Duration: 59:38
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 we use SimplePie to pull in the external RSS feed and jQuery to pull in the “social” stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up.
#28: Using Wufoo for Web Forms
Duration: 27:47
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. In this screencast I walk you through how to get started with Wufoo and start using some of its more advanced features like custom themes, integrating PayPal payment, creating public reports, and user management.
#29: Google Search for Your Site
Duration: 16:19
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 you can integrate right into your own site. This leverages Googles awesome search power, and it can all happen directly on your own website!
#30: Creating and Sending HTML Email
Duration: 27:38
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 single design is as viewable as absoulely possible in all email clients, and there are a heck of a lot more email clients than their are browsers. HTML Emails are all about table based layouts, inline styling, and direct URL’s. Codin’ like it’s 1999.
#31: Introduction to Google Analytics
Duration: 25:48
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 be a good time to introduce it to folks who might not already know much about it and also share that experience. As with most things, it has its ups and downs, so I introduce an alternative product at the end as well.
#32: Using the Unit PNG Fix
Duration: 18:14
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 of alpha transparancy get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS “filter”. A newcomer on the scene is the “Unit PNG Fix” which is ridiculously easy to use. Simply link up a very tiny javascript file in your header and you are done!
#33: eCommerce Product Page Makeover
Duration: 16:50
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 redesigning the entire thing on a whim or as a reaction. In this screencast, we take open up a screenshot of an eCommerce sites product page in Photoshop and start moving things around and making changes. Then we’ll take a look at the updated page on the live site. It’s like CSS-Tricks Screencast: Makeover Edition!
#34: Integrating and Customizing Google Maps
Duration: 21:44
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 site. Set you own default location, zoom level, widgetry. Even add your own markers with custom balloons. Remember though, if a map and directions are vital to your site, nothing beats some “plain English” directions.
#35: Intro to jQuery 2
Duration: 24:55
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 variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in javascript too!
#36: Current Nav Highlighting: Using PHP to Set the Body ID
Duration: 24:55
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 CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the URI of the page and create the ID based on that. Nifty trick!
#37: Status, Fluid and Menu Bar Apps
Duration: 19:37
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. Then I show Fluid, which is a Mac app for creating site-specific desktop applications and create one for Status. Then while I was on the subject, I introduce a few other Menu Bar applications that I find indispensable.
#38: Basics & Tips on Designing for the iPhone
Duration: 31:13
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 do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, how to create a “Back to Top” button, and then show some iPhone pages I’ve made.
#39: How to Use sIFR 3
Duration: 22:10
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 replace them with a block of Flash, which is the same text only rendered with a new font. This means you are free to use any font you wish in your designs instead of being limited to very small set of “safe” web fonts. sIFR degrades nicely for users without Flash and/or javascript, so no worries about that. This tutorial walks through the process of how to get it working on a webpage, from downloading it to creating your own custom font to getting it working live.
#40: How z-index Works
Duration: 18:37
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.
#41: WordPress as a CMS
Duration: 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.
#42: All About Floats
Duration: 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.
#43: How to Use CSS Sprites
Duration: 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.
#44: Hodgepodge of WordPress Tricks
Duration: 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.
#45: Using FoxyCart for eCommerce
Duration: 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.
#46: Domains, DNS, Hosting and Google Apps
Duration: 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.
#47: CSS Shorthand
Duration: 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.
#48: Skinning phpBB
Duration: 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.
#49: Hodgepodge of Photoshop Tricks
Duration: 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.
#50: Building a Customized and Dynamic Ordering Form
Duration: 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.
#51: A Lesson Learned in Accessibility
Duration: 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.
#52: Building a Print Stylesheet
Duration: 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.
#53: Customizing PayPal Forms, Buttons, and Headers
Duration: 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.
#54: Introduction to FLIR
Duration: 25:52
Introducing FLIR, comparing it to sIFR, and installing it on a WordPress site.
#55: Adding RSS Content with SimplePie
Duration: 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.
#56: Integrating FoxyCart and WordPress
Duration: 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.
#57: Using CSS3
Duration: 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.
#58: HTML & CSS – The VERY Basics
Duration: 32:15
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.
#59: Embedding Audio
Duration: 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.
#60: AJAX Refreshing RSS Content
Duration: 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.
#61: Basic Table Styling with CSS
Duration: 41:17
This screencast goes over when tables are appropriate in web design, the markup that creates them, things you should know about them, basic styling with CSS, and a little jQuery bonus stuff.
#62: Advanced Form Styling & Functionality
Duration: 41:24
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.
#63: On Screencasting
Duration: 37:43
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 gets put into and why.
#64: Building a Photo Gallery
Duration: 23:10
This photo gallery will automatically build itself from a directory of images, including subdirectories and the images inside them. Images open in a nice looking jQuery lightbox.
#65: Advanced Uses for Custom Fields in WordPress
Duration: 47:48
More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Learn how to use them to do expand your WordPress theme design skills.
#66: Table Styling 2, Fixed Header and Highlighting
Duration: 26:26
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 always visible. Then we implement row AND column highlighting with a bit of semi-clever javascript.
#67: jQuery Part 3 – Image Title Plugin
Duration: 33:56
Goes through the process of creating a versatile and expandable jQuery plugin from an existing idea and code.
#68: Think Geek Background Fade Technique
Duration: 22:19
Robots, Zombies. Robots…. Zombies….. It’s just CSS!
#69: First Ten Minutes with TypeKit
Duration: 13:42
Implementing nice custom fonts incredibly quickly with the brand new TypeKit.
#70: Random Pet Peeves
Duration: 30:55
I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS.
#71: Building a Website (1 of 3): Photoshop Mockup
Duration: 59:50
This is part 1 of a three part series on building a website from scratch. In this first episode, we start from absolute scratch in Photoshop and design the web layout.
#72: Building a Website (2 of 3): HTML/CSS Conversion
Duration: 01:11:10
This is part 2 of the three part series on building a website. In this episode, we take the Photoshop file we have done and slice it up into HTML/CSS.
#73: Building a Website (3 of 3): WordPress Theme
Duration: 50:59
This is part 3 of this series on building a website, we take the HTML/CSS we already have created and convert it into a WordPress theme.
#74: Editable CSS3 Image Gallery
Duration: 42:02
A photo gallery is built with fun visual flairs via HTML5, CSS3, and jQuery. Then made editable with PageLime.
#75: How Not To Design a Checkout
Duration: 11:17
A bit of a venting session as I struggle through a checkout process.
#76: A Tour of jQuery on a Live Site
Duration: 38:33
I walk through a real website we just launched at work and show off how jQuery is used in all sorts of different capacities. From small embellishments to larger interactive areas to core functionality.
#77: Styling an Individual Article
Duration: 41:15
Web design can learn a lot from print design, where individual articles are styled to meet, enhance, and better serve the content. I do this on my personal site using WordPress and the Art Direction plugin.
#78: On Web Advertising
Duration: 45:19
What services are out there to use, which ones I use, and why I don’t have any problem with online advertising.
#79: Complete/Non-Queuing Animations with jQuery
Duration: 19:38
We look at some ways we can ensure that an animation that occurs on a mouse hover completes a full cycle without stopping short or queuing up.
#80: Regarding Wheel Invention
Duration: 19:09
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 can use, give me a couple of days. Skilled developer: I’ll write something up from scratch for you, it will be perfect, give me a couple of weeks. Wise developer: Let’s just use a Flickr group, give me a couple of minutes.
“Reinventing the wheel” on the web means doing something from scratch vs. using a pre-existing solution, especially referring to solutions that already work particularly well. On the “reinventing” side, you benefit from complete control and learning from the process. On the other side, you benefit from speed, reliability, and familiarity. Also often at odds are time spent and cost.
This screencast takes a look at a few examples that have come up for me recently. The answer, I propose, is like most things in life: somewhere in the middle.
#81: AJAXing a WordPress Theme
Duration: 42:23
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 refresh, including search. Not always the most practical idea in the world, but it’s kinda neat, and as I show in the video, I did find a nice real-world problem that it solved.
#82: CSS Image Switcher
Duration: 12:19
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 hover and a bit of absolute positioning.
#83: Thoughts on SEO
Duration: 39:46
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 things can be good, a SEO service that claims to do anything else seems shady. However, there are plenty of examples where seemingly doing everything right doesn’t seem to work, and results that show up higher than your project look like pure garbage. SEO is, and may always be, quite mysterious.
#84: Site Walkthrough of chris-mcgarry.com
Duration: 36:50
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 loaded comes up (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls of Flash.
#85: Best Practices with Dynamic Content
Duration: 31:00
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 content and fade in new content that it fetched via AJAX. The old article didn’t encompass what I now consider to be best practices for this kind of thing. 1) Works fine with javascript disabled. 2) It is possible to “deep link” to specific content. 3) The browsers back button and forward button work as expected.
#86: First Moments with MAMP
Duration: 11:38
With MAMP, you can run all the server side technologies you need to (PHP, MySQL, Apache) locally, so you can develop locally before pushing out to a real web server.
#87: Moving Up with MAMP
Duration: 11:38
We take a WordPress installation that is running locally with MAMP and move it to a live website.
#88: Intro to Compass/Sass
Duration: 29:28
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 like me, you don’t have any trouble writing CSS, but the thought of being able to using things like variables, mixins, and nesting is rather enticing. I learned quite a bit in my first musings with Compass/Sass and answered a lot of my own questions about how it works. You’ll see it all here.
#89: Organizing a Photoshop Document
Duration: 11:38
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 you’ll pardon the likely-inaccurate cliche) being in right-brained creative mode and caring about what you are looking at not the left-brained organizational stuff. Then it compounds itself as you go in and out of the file for days on end. If you are handing this file off to someone else, or are beginning the HTML/CSS conversion process, it’s a great idea to revisit the file with the specific intent of organizing it. We’ll cover good naming conventions, using folders, layer comps, and various other little tricks.
#90: Simple TextMate Tips
Duration: 20:52
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’ve been working a lot more locally, I’ve been using much more TextMate, which I’ve always considered to be superior as a code editor but just wasn’t as convenient as Coda being all-in-one. I’ll cover some things I find cool and useful in TextMate, like vertical text selection, mass indenting, commenting, code folding, find in project, using the minimal bundles, zen coding, and more. I’m sure there are some TextMate gurus out there, so please feel free to share your own tips.
#91: The WordPress Loop
Duration: 31:15
Learn about how the loop works. Write your own queries. Run multiple loops. Implement your own pageination, and more.
#92: Code Walkthrough of Drawing Table
Duration: 34:19
Look at each feature of a mini one-page jQuery-based app and see the markup and javascript that makes that feature work.
#93: CSS3 Slideup Boxes
Duration: 18:27
CSS3 transitions are used to make these cool boxes where, on hover, more information slides up into place.
#94: Intro to Pseudo Elements
Duration: 18:37
Add elements to the page without changing the markup. A semantic designers dream.
#95: A Tale of Border Gradients
Duration: 20: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 the way.
Duration: 10:10
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 these will get more focused with time. Please let me have it with criticisms at my contact page.
#2: Converting a Photoshop Mockup (part 2 of 3)
Duration: 17:10
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 decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some “filler” content for the main area before I end with building the footer.
#3: Converting a Photoshop Mockup (part 3 of 3)
Duration: 31:53
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 columns including the “quick links” section. I also talk a little bit about typography.
#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”
Duration: 7: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 one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.
#5: Columns of Equal Height: Super Simple Two Column Layout
Duration: 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 background image to “fake” the look of equal height columns.
#6: Tools of the Trade: The Mac Software I Use for Web Design
Duration: 15:33
Before I get too far along in these screencasts, I thought I would introduce you a little to my working enviornment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac software. This isn’t an endorsement of any particular working enviorment, I just want everyone to know, see, and understand what these programs are that I will be switching back and forth between in upcoming podcasts.
#7: Creating a Three State Menu
Duration: 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 elminates any “pauses” while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the /videos/images to the HTML to the CSS.
#8: CSS Formatting
Duration: 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 very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder.
#9: Starry Night: 3D Background with the Parallax Effect
Duration: 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 support alpha transparency in PNG’s, this screencase also covers how to create a warning message that will display only in those browsers.
#10: Fixed Width, Fluid Width & Elastic Width
Duration: 16:40
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 some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have “zoom” abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types.
#11: Working Modularly with PHP
Duration: 14:44
Many sites do not use any fancy Content Managment 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 homepage, about page, and contact page. Each of these pages has different main content, but much of it stays exactly the same, like the header, navigation, and footer. Think of these sections as “modules” that you can easily use PHP to insert into the page. This way, making changes to those sections changes all the pages at the same time, saving you time and potentially mistakes. At the end, I show you how you can still achieve unique effects in your navigation despite the code being identical.
#12: Converting a Photoshop Mockup: Part Two, Episode One
Duration: 22:03
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!
#13: Converting a Photoshop Mockup: Part Two, Episode Two
Duration: 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 and “on” states for the tabs. We then create the main content area and footer.
#14: Converting a Photoshop Mockup: Part Two, Episode Three
Duration: 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 fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.
#15: Introduction to Firebug
Duration: 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 see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for javascript programmers.
#16: Creating the Photoshop Mockup
Duration: 22:04
This 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.
#17: Sliding Doors Button
Duration: 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 hook in our markup, we can apply two overlapping background /videos/images to a single spot of text. When that text grows or shrinks, these overlapping /videos/images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.
#18: Introduction to the Band Website Template
Duration: 12:06
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 designers.
#19: Designing a Unique Page for Twitter Updates
Duration: 19:46
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 javascript stuff provided by Twitter to the markup, to the CSS to style the page.
#20: Introduction to jQuery
Duration: 18:12
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 is a very basic introduction to including jQuery on your web page and getting started writing a few functions.
#21: Walkthrough of Contact Form
Duration: 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 a page as well as make a page truly functional. In this screencast I talk about contact forms in general as well as quickly walk through the design, creating, and functionality of Contact Form.
#22: Cutting Clipping Paths
Duration: 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 are a variety of ways to make selections in Photoshop, but drawing a real vector path is the most tried-and-true and highest quality way to do so. Mastering this tool will make you a better designer and help unleash your creative potential.
#23: Conditional Stylesheets
Duration: 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 to cause problems with new browsers down the road), they are perfectly valid code. Just be careful not to overdo it and make things more complicated for yourself.
#24: Rounded Corners
Duration: 25:56
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 techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be!
#25: Designing for Wordpress: Part One
Duration: 16:27
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 WordPress. In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.
#26: Designing for Wordpress: Part Two
Duration: 52:48
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, changing some settings and creating posts/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all imporant things to consider as well as the overall feel. WordPress sites don’t need to scream “Blog!” unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the “extra-content” stuff like the Twitter feed, or that might be a part four.
#27: Designing for Wordpress: Part Three
Duration: 59:38
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 we use SimplePie to pull in the external RSS feed and jQuery to pull in the “social” stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up.
#28: Using Wufoo for Web Forms
Duration: 27:47
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. In this screencast I walk you through how to get started with Wufoo and start using some of its more advanced features like custom themes, integrating PayPal payment, creating public reports, and user management.
#29: Google Search for Your Site
Duration: 16:19
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 you can integrate right into your own site. This leverages Googles awesome search power, and it can all happen directly on your own website!
#30: Creating and Sending HTML Email
Duration: 27:38
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 single design is as viewable as absoulely possible in all email clients, and there are a heck of a lot more email clients than their are browsers. HTML Emails are all about table based layouts, inline styling, and direct URL’s. Codin’ like it’s 1999.
#31: Introduction to Google Analytics
Duration: 25:48
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 be a good time to introduce it to folks who might not already know much about it and also share that experience. As with most things, it has its ups and downs, so I introduce an alternative product at the end as well.
#32: Using the Unit PNG Fix
Duration: 18:14
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 of alpha transparancy get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS “filter”. A newcomer on the scene is the “Unit PNG Fix” which is ridiculously easy to use. Simply link up a very tiny javascript file in your header and you are done!
#33: eCommerce Product Page Makeover
Duration: 16:50
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 redesigning the entire thing on a whim or as a reaction. In this screencast, we take open up a screenshot of an eCommerce sites product page in Photoshop and start moving things around and making changes. Then we’ll take a look at the updated page on the live site. It’s like CSS-Tricks Screencast: Makeover Edition!
#34: Integrating and Customizing Google Maps
Duration: 21:44
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 site. Set you own default location, zoom level, widgetry. Even add your own markers with custom balloons. Remember though, if a map and directions are vital to your site, nothing beats some “plain English” directions.
#35: Intro to jQuery 2
Duration: 24:55
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 variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in javascript too!
#36: Current Nav Highlighting: Using PHP to Set the Body ID
Duration: 24:55
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 CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the URI of the page and create the ID based on that. Nifty trick!
#37: Status, Fluid and Menu Bar Apps
Duration: 19:37
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. Then I show Fluid, which is a Mac app for creating site-specific desktop applications and create one for Status. Then while I was on the subject, I introduce a few other Menu Bar applications that I find indispensable.
#38: Basics & Tips on Designing for the iPhone
Duration: 31:13
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 do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, how to create a “Back to Top” button, and then show some iPhone pages I’ve made.
#39: How to Use sIFR 3
Duration: 22:10
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 replace them with a block of Flash, which is the same text only rendered with a new font. This means you are free to use any font you wish in your designs instead of being limited to very small set of “safe” web fonts. sIFR degrades nicely for users without Flash and/or javascript, so no worries about that. This tutorial walks through the process of how to get it working on a webpage, from downloading it to creating your own custom font to getting it working live.
#40: How z-index Works
Duration: 18:37
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.
#41: WordPress as a CMS
Duration: 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.
#42: All About Floats
Duration: 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.
#43: How to Use CSS Sprites
Duration: 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.
#44: Hodgepodge of WordPress Tricks
Duration: 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.
#45: Using FoxyCart for eCommerce
Duration: 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.
#46: Domains, DNS, Hosting and Google Apps
Duration: 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.
#47: CSS Shorthand
Duration: 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.
#48: Skinning phpBB
Duration: 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.
#49: Hodgepodge of Photoshop Tricks
Duration: 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.
#50: Building a Customized and Dynamic Ordering Form
Duration: 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.
#51: A Lesson Learned in Accessibility
Duration: 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.
#52: Building a Print Stylesheet
Duration: 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.
#53: Customizing PayPal Forms, Buttons, and Headers
Duration: 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.
#54: Introduction to FLIR
Duration: 25:52
Introducing FLIR, comparing it to sIFR, and installing it on a WordPress site.
#55: Adding RSS Content with SimplePie
Duration: 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.
#56: Integrating FoxyCart and WordPress
Duration: 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.
#57: Using CSS3
Duration: 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.
#58: HTML & CSS – The VERY Basics
Duration: 32:15
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.
#59: Embedding Audio
Duration: 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.
#60: AJAX Refreshing RSS Content
Duration: 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.
#61: Basic Table Styling with CSS
Duration: 41:17
This screencast goes over when tables are appropriate in web design, the markup that creates them, things you should know about them, basic styling with CSS, and a little jQuery bonus stuff.
#62: Advanced Form Styling & Functionality
Duration: 41:24
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.
#63: On Screencasting
Duration: 37:43
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 gets put into and why.
#64: Building a Photo Gallery
Duration: 23:10
This photo gallery will automatically build itself from a directory of images, including subdirectories and the images inside them. Images open in a nice looking jQuery lightbox.
#65: Advanced Uses for Custom Fields in WordPress
Duration: 47:48
More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Learn how to use them to do expand your WordPress theme design skills.
#66: Table Styling 2, Fixed Header and Highlighting
Duration: 26:26
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 always visible. Then we implement row AND column highlighting with a bit of semi-clever javascript.
#67: jQuery Part 3 – Image Title Plugin
Duration: 33:56
Goes through the process of creating a versatile and expandable jQuery plugin from an existing idea and code.
#68: Think Geek Background Fade Technique
Duration: 22:19
Robots, Zombies. Robots…. Zombies….. It’s just CSS!
#69: First Ten Minutes with TypeKit
Duration: 13:42
Implementing nice custom fonts incredibly quickly with the brand new TypeKit.
#70: Random Pet Peeves
Duration: 30:55
I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS.
#71: Building a Website (1 of 3): Photoshop Mockup
Duration: 59:50
This is part 1 of a three part series on building a website from scratch. In this first episode, we start from absolute scratch in Photoshop and design the web layout.
#72: Building a Website (2 of 3): HTML/CSS Conversion
Duration: 01:11:10
This is part 2 of the three part series on building a website. In this episode, we take the Photoshop file we have done and slice it up into HTML/CSS.
#73: Building a Website (3 of 3): WordPress Theme
Duration: 50:59
This is part 3 of this series on building a website, we take the HTML/CSS we already have created and convert it into a WordPress theme.
#74: Editable CSS3 Image Gallery
Duration: 42:02
A photo gallery is built with fun visual flairs via HTML5, CSS3, and jQuery. Then made editable with PageLime.
#75: How Not To Design a Checkout
Duration: 11:17
A bit of a venting session as I struggle through a checkout process.
#76: A Tour of jQuery on a Live Site
Duration: 38:33
I walk through a real website we just launched at work and show off how jQuery is used in all sorts of different capacities. From small embellishments to larger interactive areas to core functionality.
#77: Styling an Individual Article
Duration: 41:15
Web design can learn a lot from print design, where individual articles are styled to meet, enhance, and better serve the content. I do this on my personal site using WordPress and the Art Direction plugin.
#78: On Web Advertising
Duration: 45:19
What services are out there to use, which ones I use, and why I don’t have any problem with online advertising.
#79: Complete/Non-Queuing Animations with jQuery
Duration: 19:38
We look at some ways we can ensure that an animation that occurs on a mouse hover completes a full cycle without stopping short or queuing up.
#80: Regarding Wheel Invention
Duration: 19:09
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 can use, give me a couple of days. Skilled developer: I’ll write something up from scratch for you, it will be perfect, give me a couple of weeks. Wise developer: Let’s just use a Flickr group, give me a couple of minutes.
“Reinventing the wheel” on the web means doing something from scratch vs. using a pre-existing solution, especially referring to solutions that already work particularly well. On the “reinventing” side, you benefit from complete control and learning from the process. On the other side, you benefit from speed, reliability, and familiarity. Also often at odds are time spent and cost.
This screencast takes a look at a few examples that have come up for me recently. The answer, I propose, is like most things in life: somewhere in the middle.
#81: AJAXing a WordPress Theme
Duration: 42:23
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 refresh, including search. Not always the most practical idea in the world, but it’s kinda neat, and as I show in the video, I did find a nice real-world problem that it solved.
#82: CSS Image Switcher
Duration: 12:19
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 hover and a bit of absolute positioning.
#83: Thoughts on SEO
Duration: 39:46
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 things can be good, a SEO service that claims to do anything else seems shady. However, there are plenty of examples where seemingly doing everything right doesn’t seem to work, and results that show up higher than your project look like pure garbage. SEO is, and may always be, quite mysterious.
#84: Site Walkthrough of chris-mcgarry.com
Duration: 36:50
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 loaded comes up (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls of Flash.
#85: Best Practices with Dynamic Content
Duration: 31:00
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 content and fade in new content that it fetched via AJAX. The old article didn’t encompass what I now consider to be best practices for this kind of thing. 1) Works fine with javascript disabled. 2) It is possible to “deep link” to specific content. 3) The browsers back button and forward button work as expected.
#86: First Moments with MAMP
Duration: 11:38
With MAMP, you can run all the server side technologies you need to (PHP, MySQL, Apache) locally, so you can develop locally before pushing out to a real web server.
#87: Moving Up with MAMP
Duration: 11:38
We take a WordPress installation that is running locally with MAMP and move it to a live website.
#88: Intro to Compass/Sass
Duration: 29:28
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 like me, you don’t have any trouble writing CSS, but the thought of being able to using things like variables, mixins, and nesting is rather enticing. I learned quite a bit in my first musings with Compass/Sass and answered a lot of my own questions about how it works. You’ll see it all here.
#89: Organizing a Photoshop Document
Duration: 11:38
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 you’ll pardon the likely-inaccurate cliche) being in right-brained creative mode and caring about what you are looking at not the left-brained organizational stuff. Then it compounds itself as you go in and out of the file for days on end. If you are handing this file off to someone else, or are beginning the HTML/CSS conversion process, it’s a great idea to revisit the file with the specific intent of organizing it. We’ll cover good naming conventions, using folders, layer comps, and various other little tricks.
#90: Simple TextMate Tips
Duration: 20:52
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’ve been working a lot more locally, I’ve been using much more TextMate, which I’ve always considered to be superior as a code editor but just wasn’t as convenient as Coda being all-in-one. I’ll cover some things I find cool and useful in TextMate, like vertical text selection, mass indenting, commenting, code folding, find in project, using the minimal bundles, zen coding, and more. I’m sure there are some TextMate gurus out there, so please feel free to share your own tips.
#91: The WordPress Loop
Duration: 31:15
Learn about how the loop works. Write your own queries. Run multiple loops. Implement your own pageination, and more.
#92: Code Walkthrough of Drawing Table
Duration: 34:19
Look at each feature of a mini one-page jQuery-based app and see the markup and javascript that makes that feature work.
#93: CSS3 Slideup Boxes
Duration: 18:27
CSS3 transitions are used to make these cool boxes where, on hover, more information slides up into place.
#94: Intro to Pseudo Elements
Duration: 18:37
Add elements to the page without changing the markup. A semantic designers dream.
#95: A Tale of Border Gradients
Duration: 20: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 the way.