CSS-Tricks Screencasts

#211: Building a Paid Subscription Newsletter with MailPoet + WooCommerce + WordPress

Mon, 16 Aug 2021 14:56:16 +0000

With MailPoet and WooCommerce, we can build a paid subscription newsletter into a WordPress website. Our only costs are transaction fees, whatever WordPress hosting we might need, and a yearly fee for WooCommerce Subscriptions, making it a very cost-friendly …

#210: Yapping About Astro

Mon, 09 Aug 2021 19:15:09 +0000

I think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We’ll get into that in the video. How can we call it a framework if it asks you to “bring your …

#209: A Netflix Clone with DataStax Astra and Netlify

Fri, 06 Aug 2021 20:32:51 +0000

I paired up with David Jones-Gilardi of DataStax to go through one of the workshops they have put together (with Ania Kubów, who has a video you should watch as well) that does a good job of showcasing how …

#208: A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

Fri, 30 Jul 2021 20:07:44 +0000

This is the video version of a blog post we did asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?

It’s a satisfying answer because …

#207: Performance Testing CSS-Tricks with WebPageTest

Fri, 23 Jul 2021 21:50:48 +0000

I get a hands-on performance review with Tim Kadlec of WebPageTest! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I’m all about ~~getting a little free consulting~~ helping y’all …

#206: Building a Data-Backed Next.js Site with Prisma & App Platform

Mon, 12 Jul 2021 23:23:17 +0000

I’m joined by Chris Sev from Digital Ocean to talk about their new App Platform. We’re going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic …

#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks

Mon, 15 Mar 2021 21:53:29 +0000

How it works

You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will “stick” in that position when the threshold is passed, as long as there is room …

#204: Using the axe DevTools Web Accessibility Testing Browser Plugin

Thu, 04 Mar 2021 23:11:38 +0000

In this video, I’m joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then helps …

#203: A First Look at Cloudflare Pages

Wed, 03 Mar 2021 00:30:25 +0000

Cloudflare Pages is Jamstack hosting, meaning it’s a static file host that runs your builds and lets you do dynamic things with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s …

#202: Centered List Markers

Fri, 15 Jan 2021 15:59:43 +0000

Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker.

A reader wrote in with a screenshot of what they were trying to accomplish — basically an …

#201: Doing Booping

Mon, 21 Dec 2020 15:01:32 +0000

Joshua Comeau crowd-coined the term “boop” (high five, Adam Kuhn). These are sorta like hover/focus states, except that they aren’t. Your thingies — things like links, buttons, etc. — should still have those states. A “boop” is a more …

#200: Scroll to Zoom

Thu, 10 Dec 2020 15:56:16 +0000

Fair warning: you aren’t going to need this every day! I just happened to be looking at a neat little SVG warping tool that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the …

#199: Messing with JSX

Wed, 09 Dec 2020 23:29:07 +0000

I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets …

#198: About the Position Property

Fri, 20 Nov 2020 15:51:41 +0000

static: the default
relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
absolute: top/right/bottom/left moves the element

…

#197: A Look at Stackbit and Stackbit Studio

Mon, 02 Nov 2020 16:01:30 +0000

The Stackbit app helps you kick out a new Jamstack site very quickly. Pick a theme, a static site generator, and a CMS and it’ll get a repo going for you on the double. Stackbit has gotten much more powerful …

#196: Learning Grid & Flexbox with Kyle Simpson

Fri, 30 Oct 2020 18:58:54 +0000

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but …

#195: How to Draw a Line with CSS

Fri, 25 Sep 2020 19:15:30 +0000

Stupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We’ll mostly talk about a …

#194: Jetpack’s Social Integration

Thu, 24 Sep 2020 21:32:45 +0000

Jetpack can help automate your site’s social media.

It’s a pretty small feature compared to all the huge stuff Jetpack can do, like improve your site’s search, back it up, and protect it. But it’s a …

#193: Scully: the SSG for Angular

Wed, 23 Sep 2020 14:50:00 +0000

Tara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular — nay, the SSG for Angular, as Tara pointed out to me.

I don’t know much Angular …

#192: Git Tricks for Getting Yourself Out of Trouble

Mon, 14 Sep 2020 23:43:42 +0000

As amazing as Git is for handling your source code, you can certain git (lol) yourself into trouble. What if you make a change to a file and you want to get rid of the change? What if you just …

#191: Learn by doing: CUBE CSS

Tue, 11 Aug 2020 01:10:15 +0000

Andy Bell joins me to talk through his CSS methodology he calls CUBE CSS. That’s Composition, Utility, Block, and Exception.…

#190: CSS Custom Properties Penetrate the Shadow DOM

Tue, 28 Jul 2020 17:58:43 +0000

One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one of them that is pretty cool and useful is using …

#189: Notion for Personal & Public Use

Fri, 05 Jun 2020 19:22:36 +0000

This is the last video in our little series on using Notion. We’ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it’s useful for yourself too. …

#188: Exploring the Overlapping Header Pattern

Fri, 29 May 2020 22:26:33 +0000

Snook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the …

#187: Notion for Team Meetings & Documentation

Mon, 25 May 2020 22:03:40 +0000

This is the second video in 3-video series on using Notion. In Part 1 we covered a lot of ground on what Notion is how it’s great for any team, and web development teams in particular.

In this video, …

#186: Notion for Web Development Teams

Wed, 13 May 2020 21:31:25 +0000

I’m a big fan of Notion, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I had to sum it up really quickly, I’d tell Notion …

#185: Playing with CSS Masks

Wed, 13 May 2020 14:48:44 +0000

Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference…

#184: Inside & Aligned Lists

Tue, 05 May 2020 22:08:33 +0000

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but …

#183: Art Directing Images, the Picture Element, and Image CDNs

Tue, 21 Apr 2020 23:58:06 +0000

It’s a bonafide phenomenon!

I’m talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. In other words, if you need multiple copies of an …

#182: Baby’s First Vue SFC

Thu, 16 Apr 2020 14:33:52 +0000

SFC as in “Single File Component” which is something that Vue offers and Vue people seem to love. I’ve written very little Vue in my days, but I’m a fan! We recently started supporting Vue SFC’s on CodePen, so this …

#181: Poking at HTML Lists

Wed, 15 Apr 2020 00:33:59 +0000

I had a dumb little issue the other day where a nested list didn’t quite have the right spacing. I was only adding margin-bottom on the list elements and the lists themselves, but that meant there was no space between …

#180: Tinkering with Video on Mobile

Wed, 08 Apr 2020 21:19:16 +0000

Fair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts.

I have an iOS simulator up in this video, …

#179: A Grid of Squares

Mon, 06 Apr 2020 21:22:10 +0000

Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this …

#178: Percy Catches Visual Changes in any Workflow

Wed, 06 Nov 2019 16:50:48 +0000

I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will …

#177: Local WordPress Development to Production Workflow

Mon, 04 Nov 2019 19:03:00 +0000

This is the basics of how I work locally with a WordPress site, and then getting it to production.

Flywheel is a sponsor of CSS-Tricks, and I’m glad they are because they make great products. Flywheel is at the heart …

#176: Working with Framer Motion

Mon, 28 Oct 2019 17:18:05 +0000

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

First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. …

#175: 7 Things to Know About Webflow

Thu, 10 Oct 2019 19:45:05 +0000

(This is a sponsored video I worked on between us at CSS-Tricks and Webflow. I think Webflow is a fascinating product for building websites that is, in my opinion, in a category all to itself at the moment. It …

#174: Using Local Overrides in DevTools

Thu, 08 Aug 2019 15:01:56 +0000

There is a feature of Chrome DevTools that lets you:

See the code of any given resource the current web page is using (like CSS and JavaScript).
“Pretty Print” it (format it for readability)
Save it to disk
Use that

…

#173: Ooooops I guess we’re full-stack developers now.

Wed, 07 Aug 2019 16:23:12 +0000

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

Here’s the website that goes with this talk.

This is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to do …

#172: Hand SVGing a Curved Line

Tue, 06 Aug 2019 15:12:31 +0000

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

#171: Movable Stacked Card Row in CSS

Mon, 29 Apr 2019 14:38:00 +0000

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

#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project

Tue, 05 Mar 2019 00:35:49 +0000

Fair warning! This isn’t a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. …

#169: How to Think Like a Front-End Developer

Thu, 07 Feb 2019 20:26:18 +0000

This is a video from my talk at WordCamp US.

Let’s take a peek at what front-end development has become these days. Starting from what the role is, where we sit, and the expectations of us. Then we’ll get into

…

#168: CSS-in-JS

Wed, 09 Jan 2019 15:17:45 +0000

I’m joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than …

#167: Sponsored Videos for Jetpack and WooCommerce

Wed, 05 Dec 2018 14:32:15 +0000

This is a compilation of four videos I’ve done over the last few months for a sponsorship with Automattic. It’s mostly about Jetpack, a WordPress plugin I quite like and that we use here at CSS-Tricks), but also …

#166: Learn to Integrate Visual Testing with Percy

Thu, 25 Oct 2018 16:21:41 +0000

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

That’s exactly what Percy does. It assumes what you have on master …

#165: Building Your Backend with Serverless Functions

Thu, 18 Oct 2018 14:17:00 +0000

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

#164: Basic WooCommerce Walkthrough

Fri, 17 Aug 2018 15:15:36 +0000

WooCommerce is a powerful and flexible eCommerce plugin for WordPress. Wanna sell subscriptions or memberships? WooCommerce can do that? Digital downloads? Yep. Appointments and bookings? Sure.

But the meat and potatoes of eCommerce, so to speak, is …

#163: First Steps with Serverless

Fri, 06 Jul 2018 17:47:25 +0000

David Wells, from Netlify, and I take some baby steps into building things with Serverless. We’ll mostly be looking at cloud functions here and how using them from an otherwise static hosting environment means you’ve unlocked all sorts of …

#162: What the Heck is Serverless?

Thu, 05 Jul 2018 17:14:06 +0000

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

Are there still servers involved? Of course, but you don’t manage them, scale them, or pay for them when you aren’t using …

#161: Jetpack

Thu, 14 Jun 2018 14:24:13 +0000

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

These are my words though! I’m a big Jetpack fan and I run Jetpack on all my self-hosted WordPress sites. It does a ton …

#160: The All-Powerful Front-End Developer

Wed, 06 Jun 2018 15:20:18 +0000

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

#159: Learning Vue

Sat, 12 May 2018 13:32:51 +0000

Sarah Drasner and I dig into Vue! Vue is a very popular JavaScript framework that is absolutely exploding. Sarah is on the core team and is about the most passionate fan of Vue I’ve ever known. …

#158: An Expando Button Menu

Tue, 20 Feb 2018 01:34:18 +0000

I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I fired up Professor Mode on CodePen to let people …

#157: A Tale of Four Properties

Tue, 03 Oct 2017 13:54:09 +0000

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

…

#156: Let’s Talk About Webpack

Sun, 09 Jul 2017 16:36:11 +0000

Sean Larkin joins me to talk about Webpack!

I doubt I’m alone in being a bit confused about what the heck Webpack is and does. Even if you’re actively using a project that uses it! We’re just going to …

#155: Responsive Images, WordPress, and Cloudinary

Thu, 22 Jun 2017 17:51:16 +0000

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

We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in …

#154: A Poster Child WordPress Site

Mon, 15 May 2017 10:43:23 +0000

CSS-Tricks itself is a WordPress site, and one in which WordPress is a perfect fit for. Between things like the login and permissions system, blogging, pages, custom post types, forums, eCommerce, and more, CSS-Tricks makes use of a huge swath …

#153: Getting Started with CSS Grid

Mon, 20 Feb 2017 19:44:10 +0000

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

#152: Font Loading with Zach Leatherman

Mon, 30 Jan 2017 15:05:01 +0000

Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He’s got a comprehensive guide on …

#151: The First Few Minutes with Sublime Text

Mon, 12 Dec 2016 13:19:32 +0000

Sublime Text is a pretty darn popular code editor. Despite its popularity and all the good things I’ve heard about it, I still lean heavily on other editors (Coda being my go-to for most projects) and have never given Sublime …

#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend

Wed, 23 Nov 2016 16:39:54 +0000

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

#149: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer

Mon, 29 Aug 2016 19:39:19 +0000

In this screencast I pair up with Brian Muenzenmeyer who, among other things, works on Pattern Lab. Specifically, the Node version of Pattern Lab, along with Geoff Pursell.

I should point out: this screencast barely scratched the surface …

#148: Laying Things Out (HTML & Flexbox) with Dee Gill

Tue, 24 May 2016 19:58:27 +0000

In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she’s working on: Tinge. She had a design mockup she was working from, so we peak …

#147: Starting a React-Powered Comment Form

Fri, 18 Mar 2016 13:46:05 +0000

In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some “real world” style functionality: a comment form.

This turned out to be a pretty useful bit of …

#146: Getting More from Google Analytics with Philip Walton

Mon, 07 Mar 2016 22:21:48 +0000

I pair with Philip Walton (who works for Google on Google Analytics) in this screencast. It complements the case-study we put together: Learning to Use Google Analytics More Effectively at CodePen.

I learned a ton about how Google Analytics …

#145: WordPress Child Themes with Lara Schenck

Sat, 27 Feb 2016 17:47:09 +0000

In this video Lara Schenck and I pair up, and she teaches me all about child themes in WordPress. It’s like a podcast that you watch too!

We straight up create one, starting from the Twentysixteen theme, which provided a …

#144: Building a JavaScript/Canvas Game with Kyle Simpson

Sat, 13 Feb 2016 15:56:17 +0000

Kyle Simpson, partly in an effort to rejuvenate his enthusiasm for working with JavaScript at all, started building a game. He’s not really a “game developer” (or at least, wasn’t at the time!) but tackled this anyway for the …

#143: Using and Caching Third-Party JSON with WordPress

Fri, 23 Oct 2015 17:29:07 +0000

On the design of CSS-Tricks as I record this, one of the things I wanted to add was a “Front End Design & Development Jobs” widget, powered by the CodePen Job Board. Those jobs are available as JSON data…

#142: Hiding Things With CSS

Fri, 16 Oct 2015 14:10:41 +0000

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

For instance, there is the display property in which …

#141: Getting the Images and Numbers for Responsive Images

Tue, 21 Jul 2015 13:47:34 +0000

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

#140: Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap

Wed, 08 Jul 2015 22:02:31 +0000

This is the video screencast version of a blog post I did not long ago: Useful Flexbox Technique: Alignment Shifting Wrapping. I was at a CodePen Meetup and used it as a quick show-and-tell demo and it was kinda …

#139: Explaining the Server Side Mustard Cut

Mon, 20 Apr 2015 18:07:19 +0000

I published a written post about this idea of the Server Side Mustard Cut. So if you’re into reading and checking out code samples and stuff, that’s the place for you. In this video I just walk through all …

#138: Walking Through an HTTPS Conversion on WordPress

Mon, 13 Apr 2015 17:14:25 +0000

We just recently moved to “HTTPS everywhere” right here on CSS-Tricks. I wrote up a blog post detailing the steps to get there. This video is a companion to that, talking through the steps, as I know some folks prefer …

#137: SVG is for Everybody

Fri, 13 Mar 2015 19:24:35 +0000

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, …

#136: Moving Things to a CMS as Needed

Tue, 20 Jan 2015 00:19:02 +0000

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

At the very beginning days of CodePen Meetups, we just had a single one planned. It was …

#135: Three Ways to Animate SVG

Sun, 14 Dec 2014 20:34:04 +0000

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

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Fri, 01 Aug 2014 14:16:39 +0000

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

A “build process” is all the stuff that happens between the code …

#133: Figuring Out Responsive Images

Fri, 16 May 2014 12:46:09 +0000

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

#132: A Quick Useful Case for Sass Math and Mixins

Thu, 13 Mar 2014 20:09:42 +0000

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

#131: Tinkering With Flexbox

Thu, 30 Jan 2014 20:32:54 +0000

In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up an article about it too, for easier reference of code.…

#130: First Moments with Grunt

Tue, 10 Dec 2013 20:27:55 +0000

There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is …

#129: Emmet (is Awesome)

Fri, 27 Sep 2013 16:25:31 +0000

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

On the HTML front, it allow you to write abbreviations for HTML. For instance …

#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub

Thu, 15 Aug 2013 14:06:17 +0000

Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to …

#127: Basics of JavaScript Templating

Tue, 13 Aug 2013 14:41:21 +0000

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

#126: Using Modernizr

Thu, 23 May 2013 19:15:16 +0000

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

#125: How To Stay Up To Date With Web Technology

Tue, 21 May 2013 12:49:06 +0000

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

#124: A Modern Web Designer’s Workflow

Tue, 21 May 2013 12:38:46 +0000

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

#123: If it Moves When You Click, Make Something Stick

Tue, 09 Apr 2013 17:21:47 +0000

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

#122: The State of Favicons

Thu, 28 Mar 2013 15:19:18 +0000

Forever we all made 16×16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And …

#121: The Right CMS is a Customized One

Tue, 19 Mar 2013 00:40:54 +0000

The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn’t just a title and content anymore. It’s a title, optional subtitle, …

#120: A Sublime Text Snippet for Media Query Mixins

Fri, 15 Mar 2013 20:46:47 +0000

I’ve never messed with creating custom Sublime Text snippets before. So when James Nowland sent one in, I took the opportunity to learn. …

#119: Let’s Answer Forum Posts! Vol. 2

Wed, 23 Jan 2013 21:27:27 +0000

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

#118: Introduction to CodePen PRO

Tue, 08 Jan 2013 19:40:21 +0000

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

[Deep awesome voice]: and this is just the beginning.…

#117: Let’s Attempt To Do a “Pull Request”

Sat, 05 Jan 2013 19:42:03 +0000

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

#116: Let’s Answer Forum Posts!

Wed, 12 Dec 2012 00:03:40 +0000

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

#115: Don’t Overthink It Grids

Wed, 24 Oct 2012 14:02:00 +0000

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

#114: Let’s Do Simple Stuff to Make Our Websites Faster

Thu, 30 Aug 2012 22:18:18 +0000

I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain’t that complicated). These are all easy wins with big possible performance gains. Plus, we handle a …

#113: Creating and Using a Custom Icon Font

Wed, 22 Aug 2012 15:00:51 +0000

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

#112: Using CodePen

Wed, 27 Jun 2012 18:11:40 +0000

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it’s for, how …

#111: Get Yourself Preprocessing in Just a Few Minutes

Sun, 13 May 2012 16:49:39 +0000

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

#110: Quick Overview of CSS Position Values

Sun, 18 Mar 2012 22:30:18 +0000

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to “nudge” and leaves the element’s original position in the page flow. Absolute and fixed allow for exact placement of elements and …

#109: Getting off FTP and onto Git Deployment with Beanstalk

Mon, 13 Feb 2012 20:09:35 +0000

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

We …

#108: Using Chartwell

Mon, 30 Jan 2012 01:33:53 +0000

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It’s as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out …

#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

Wed, 14 Dec 2011 16:17:56 +0000

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to …

#106: Use BrowserStack for Live Web-Based Cross Browser Testing

Mon, 12 Dec 2011 16:02:51 +0000

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

#105: Using SpriteCow

Wed, 16 Nov 2011 16:04:42 +0000

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

#104: Quick Tip: Use Dropbox to Make a Public URL for Anything

Mon, 07 Nov 2011 14:45:44 +0000

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

#103: Integrating FitVids.js into WordPress

Wed, 02 Nov 2011 14:45:54 +0000

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

#102: Braindump on Responsive Web Design

Fri, 14 Oct 2011 17:36:06 +0000

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

#101: Let’s Suck at GitHub Together

Thu, 25 Aug 2011 02:42:48 +0000

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

#100: Let’s Write Semantic Markup

Wed, 17 Aug 2011 05:05:42 +0000

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

#99: Overview of HTML5 Forms Types, Attributes, and Elements

Mon, 20 Jun 2011 11:37:16 +0000

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

#98: Playing with Body Borders

Fri, 27 May 2011 00:06:03 +0000

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

#97: Intro to CSS Animations

Thu, 12 May 2011 19:46:09 +0000

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

#96: localStorage for Forms

Fri, 15 Apr 2011 13:38:37 +0000

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This …

#95: A Tale of Border Gradients

Thu, 07 Apr 2011 20:54:36 +0000

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.

View Demo…

#94: Intro to Pseudo Elements

Wed, 19 Jan 2011 16:09:51 +0000

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

#93: CSS3 Slideup Boxes

Mon, 08 Nov 2010 11:37:09 +0000

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

#92: Code Walkthrough of Drawing Table

Thu, 07 Oct 2010 19:44:04 +0000

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

#91: The WordPress Loop

Tue, 31 Aug 2010 11:59:57 +0000

There is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than there should be. In this screencast I try and explain what it is, how …

#90: Simple TextMate Tips

Thu, 22 Jul 2010 12:48:03 +0000

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 …

#89: Organizing a Photoshop Document

Thu, 08 Jul 2010 11:50:13 +0000

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 cliché) being in right-brained creative mode and caring …

#88: Intro to Compass/Sass

Wed, 23 Jun 2010 21:07:35 +0000

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 …

#87: Moving Up with MAMP

Thu, 17 Jun 2010 11:41:27 +0000

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

#86: First Moments with MAMP

Fri, 28 May 2010 12:52:41 +0000

I’m way behind the times on this one, but until recently, I have never really developed locally. Everything I did was “going commando” and working directly on servers. The situation arose where I really needed to, so now I have …

#85: Best Practices with Dynamic Content

Thu, 13 May 2010 13:28:47 +0000

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 …

#84: Site Walkthrough of chris-mcgarry.com

Thu, 15 Apr 2010 13:02:12 +0000

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 …

#83: Thoughts on SEO

Thu, 01 Apr 2010 11:52:31 +0000

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

#82: CSS Image Switcher

Thu, 04 Mar 2010 13:04:34 +0000

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

#81: AJAXing a WordPress Theme

Thu, 25 Feb 2010 13:30:35 +0000

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 …

#80: Regarding Wheel Invention

Thu, 11 Feb 2010 13:37:56 +0000

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

#79: Complete/Non-Queuing Animations with jQuery

Fri, 22 Jan 2010 15:04:21 +0000

When you use jQuery’s .animate() function with something like a hover event, those animations will “queue up”. That is, if you hover multiple times, that animation will fire multiple times. The classic method to prevent this is to throw in …

#78: On Web Advertising

Mon, 04 Jan 2010 13:06:10 +0000

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

#77: Styling an Individual Article

Wed, 16 Dec 2009 13:49:55 +0000

The idea of “art directing” posts is very popular lately. It’s the idea of applying unique styling to an article on the web in the way that print designers uniquely style articles for, say, a magazine. This is more than …

#76: A Tour of jQuery on a Live Site

Fri, 20 Nov 2009 15:04:19 +0000

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

#75: How Not To Design a Checkout

Thu, 29 Oct 2009 00:11:20 +0000

You’ll have to forgive me here folks, this isn’t a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I’d screencast it as a lesson to us all …

#74: Editable CSS3 Image Gallery

Sun, 18 Oct 2009 23:23:49 +0000

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

#73: Building a Website (3 of 3): WordPress Theme

Thu, 01 Oct 2009 17:36:26 +0000

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

#72: Building a Website (2 of 3): HTML/CSS Conversion

Wed, 23 Sep 2009 14:04:17 +0000

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

#71: Building a Website (1 of 3): Photoshop Mockup

Wed, 16 Sep 2009 15:59:08 +0000

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

#70: Random Pet Peeves

Thu, 10 Sep 2009 03:38:27 +0000

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

#69: First Ten Minutes with TypeKit

Tue, 25 Aug 2009 22:56:35 +0000

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

#68: Think Geek Background Fade Technique

Wed, 12 Aug 2009 17:50:51 +0000

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

#67: jQuery Part 3 – Image Title Plugin

Wed, 29 Jul 2009 12:23:34 +0000

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

#66: Table Styling 2, Fixed Header and Highlighting

Wed, 01 Jul 2009 14:22:06 +0000

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

#65: Advanced Uses for Custom Fields in WordPress

Tue, 23 Jun 2009 19:35:14 +0000

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

#64: Building a Photo Gallery

Tue, 09 Jun 2009 13:21:07 +0000

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

Links from Video:

…

#63: On Screencasting

Thu, 21 May 2009 15:32:04 +0000

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

#62: Advanced Form Styling & Functionality

Wed, 06 May 2009 16:51:49 +0000

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

#61: Basic Table Styling with CSS

Wed, 22 Apr 2009 18:55:05 +0000

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

#60: AJAX Refreshing RSS Content

Wed, 08 Apr 2009 17:10:43 +0000

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 …

#59: Embedding Audio

Thu, 02 Apr 2009 21:27:54 +0000

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

#58: HTML & CSS – The VERY Basics

Wed, 25 Mar 2009 01:03:30 +0000

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

#57: Using CSS3

Wed, 18 Mar 2009 17:31:30 +0000

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 …

#56: Integrating FoxyCart and WordPress

Thu, 05 Mar 2009 00:32:40 +0000

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 …

#55: Adding RSS Content with SimplePie

Wed, 25 Feb 2009 22:11:50 +0000

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

#54: Introduction to FLIR

Wed, 18 Feb 2009 00:32:19 +0000

FLIR (Face Lift Image Replacement) bills itself as an “alternative to sIFR”. They are definitely in the same category. sIFR has some extra functionality, but is relies on more technology on both the server and client side. FLIR may be …

#53: Customizing PayPal Forms, Buttons, and Headers

Thu, 12 Feb 2009 00:33:57 +0000

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

#52: Building a Print Stylesheet

Thu, 05 Feb 2009 14:36:32 +0000

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. Of course, I spend …

#51: A Lesson Learned in Accessibility

Thu, 22 Jan 2009 14:33:54 +0000

Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That …

#50: Building a Customized and Dynamic Ordering Form

Tue, 20 Jan 2009 23:41:03 +0000

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

#49: Hodgepodge of Photoshop Tricks

Mon, 19 Jan 2009 14:16:23 +0000

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 …

#48: Skinning phpBB

Sun, 18 Jan 2009 22:41:19 +0000

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 …

#47: CSS Shorthand

Sun, 18 Jan 2009 02:36:09 +0000

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 …

#46: Domains, DNS, Hosting and Google Apps

Sat, 17 Jan 2009 00:21:22 +0000

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 …

#45: Using FoxyCart for eCommerce

Fri, 16 Jan 2009 02:52:28 +0000

FoxyCart is my new favorite eCommerce system. It is extremely easy to get started with. You have full design control over all aspects of it (cart, checkout, receipts). It has the features you need (downloadables, security, saved accounts, subscriptions). Best …

#44: Hodgepodge of WordPress Tricks

Wed, 14 Jan 2009 18:27:03 +0000

It’s WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven’t made it into previous WordPress screencasts. We cover:

Listing categories with a built-in function and building a tabbed

…

#43: How to Use CSS Sprites

Wed, 14 Jan 2009 00:22:05 +0000

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 …

#42: All About Floats Screencast

Mon, 12 Jan 2009 19:59:59 +0000

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 …

#41: WordPress as a CMS

Sun, 11 Jan 2009 14:30:45 +0000

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 …

#40: How z-index Works

Sat, 10 Jan 2009 22:24:36 +0000

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

#39: How to Use sIFR 3

Fri, 09 Jan 2009 20:07:57 +0000

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 …

#38: Basics & Tips on Designing for the iPhone

Fri, 09 Jan 2009 04:38:16 +0000

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 …

#37: Status, Fluid and Menu Bar Apps

Thu, 08 Jan 2009 04:43:43 +0000

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 …

#36: Current Nav Highlighting: Using PHP to Set the Body ID

Tue, 06 Jan 2009 18:20:51 +0000

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 …

#35: Intro to jQuery 2

Mon, 05 Jan 2009 17:13:30 +0000

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 …

#34: Integrating and Customizing Google Maps

Sun, 04 Jan 2009 17:04:27 +0000

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 …

#33: eCommerce Product Page Makeover

Sat, 03 Jan 2009 16:59:59 +0000

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 …

#32: Using the Unit PNG Fix

Fri, 02 Jan 2009 17:18:13 +0000

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 transparency get turned into nasty blue-gray …

#31: Introduction to Google Analytics

Thu, 01 Jan 2009 14:49:09 +0000

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 …

#30: Creating and Sending HTML Email

Fri, 19 Dec 2008 17:27:31 +0000

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 …

#29: Google Search for Your Site

Thu, 18 Dec 2008 14:46:32 +0000

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 …

#28: Using Wufoo for Web Forms

Thu, 18 Dec 2008 01:30:10 +0000

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 …

#27: Designing for WordPress: Part Three

Tue, 16 Dec 2008 18:39:08 +0000

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 …

#26: Designing for WordPress: Part Two

Mon, 15 Dec 2008 18:34:30 +0000

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 …

#25: Designing for WordPress: Part One

Sun, 14 Dec 2008 18:23:35 +0000

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 …

#24: Rounded Corners

Sun, 14 Dec 2008 01:25:36 +0000

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 …

#23: Conditional Stylesheets

Sat, 13 Dec 2008 01:15:34 +0000

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 …

#22: Cutting Clipping Paths

Fri, 12 Dec 2008 00:27:41 +0000

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 …

#21: Walkthrough of Contact Form

Thu, 11 Dec 2008 00:24:38 +0000

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 …

#20: Introduction to jQuery

Wed, 10 Dec 2008 00:18:03 +0000

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 …

#19: Designing a Unique Page for Twitter Updates

Mon, 08 Dec 2008 23:07:29 +0000

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 …

#18: Introduction to the Band Website Template

Mon, 08 Dec 2008 00:15:03 +0000

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.

NOTE:…

#17: Sliding Doors Button

Sun, 07 Dec 2008 00:11:07 +0000

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 …

#16: Creating the Photoshop Mockup

Fri, 05 Dec 2008 15:55:58 +0000

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.

Links from Video:

View

…

#15: Introduction to Firebug

Thu, 04 Dec 2008 15:51:47 +0000

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 …

#14: Converting a Photoshop Mockup: Part Two, Episode Three

Wed, 03 Dec 2008 15:21:11 +0000

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 …

#13: Converting a Photoshop Mockup: Part Two, Episode Two

Tue, 02 Dec 2008 15:03:17 +0000

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 …

#12: Converting a Photoshop Mockup: Part Two, Episode One

Mon, 01 Dec 2008 14:56:36 +0000

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 technqiues so there will be plenty to learn this …

#11: Working Modularly with PHP

Wed, 26 Nov 2008 15:49:13 +0000

Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol’ static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a …

#10: Fixed Width, Fluid Width & Elastic Width

Tue, 25 Nov 2008 15:46:45 +0000

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 …

#9: Starry Night: 3D Background with the Parallax Effect

Tue, 25 Nov 2008 03:08:06 +0000

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 …

#8: CSS Formatting

Sun, 23 Nov 2008 18:39:51 +0000

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 …

#7: Three State Menu

Sat, 22 Nov 2008 18:36:35 +0000

Using a variation of the CSS Sprites technique, we can create a “three state” menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any “pauses” while moving to …

#6: Tools of the Trade

Fri, 21 Nov 2008 15:40:22 +0000

Before I get too far along in these screencasts, I thought I would introduce you a little to my working environment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac …

#5: Columns of Equal Height: Super Simple Two Column Layout

Thu, 20 Nov 2008 15:37:22 +0000

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 …

#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”

Wed, 19 Nov 2008 14:48:17 +0000

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 …

#3: Converting a Photoshop Mockup (part 3 of 3)

Wed, 12 Nov 2008 20:35:40 +0000

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

#2: Converting a Photoshop Mockup (part 2 of 3)

Tue, 11 Nov 2008 20:29:20 +0000

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 …

#1: Converting a Photoshop Mockup (part 1 of 3)

Mon, 10 Nov 2008 22:41:45 +0000

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