Grow your CSS skills. Land your dream job.

SVG Artboard Sizing

There are a couple of different (rational) approaches to SVG artboard sizing.

The term "Artboard" here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful …

Read Article →

How To Get Started in Web Design

Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn't directly about the coding itself. It's about getting you to a place where you're doing web design for real and you can't help but learn!

I'm going to …

Read Article →

Sponsor: Creative Market – October Big Bundle 

It's always great to have a personal collection of design resources you know that you can use for whatever you like at your fingertips. Vectors flourishes and illustrations, photos, textures, patterns, fonts, layouts, all that good stuff.

No better place to stock up than Creative Market. This week, they have put together a Big Bundle of their best products. From graphics and fonts to photos and Photoshop actions. For only $39, you can fill up your designer's toolkit with 105 resources. This will only be available until October 21st, so be sure to grab it before it's too late.

A Guide to SVG Animations (SMIL)

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.…

Read Article →

Sponsored: Stack – Task Management for Dev Teams 

Stack is a powerful new task management system for Devs and Designers. A simple and fully customizable tool that fits your workflow. Manage projects and communicate with your team hassle free and in real time.

I really like how Stack approaches this. It's exactly how I would have done it. There are projects - big buckets that tasks go into. Then each project has these columns that you can organize however you want. Each task is actually in a column. Could be different types of tasks or the state the task is in, whatever works. Then each task has it's own little world of people and conversation and todo's and stuff, if needed. So I might have a CSS-Tricks account, with a project for The Lodge, that has a column for Videos To Shoot, and each video is a task, and in the task I leave notes on what the plan is. Beautiful.

Free for 30 days, no credit card required to get started. Super simple pricing model after that ($5/month per user).

Intermediary Pages in a Site Hierarchy

I had a reader write in with an interesting question:

When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About Company, Founder, History.

There isn't really anything worth putting on the About page that wouldn't be on the three sub-pages. In the nav, should About just redirect to Company? Should there not be a Company page and its content be moved to About?

Any best practices you've found …

Read Article →

When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. …

Read Article →

The Most Common Questions Asked on ShopTalk

As I type this, Dave Rupert and I have recorded 137 episodes of ShopTalk. ShopTalk is primarily a question-and-answer style show. Dave's early idea was to have it be loosely modeled after the most popular NPR show of all time, Car Talk, which is mostly Q&A. We have guests, and we talk a bit about the guest so people have a sense of who they are, but it's not exactly an interview show.

We solicit people's questions on …

Read Article →

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

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 you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

Watch Video →

More Blog Posts →

*May or may not contain any actual "CSS" or "Tricks".