Grow your CSS skills. Land your dream job.

#115: Don’t Overthink It Grids

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 …

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

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 …

#113: Creating and Using a Custom Icon Font

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 …

#112: Using CodePen

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 …

#111: Get Yourself Preprocessing in Just a Few Minutes

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 …

#110: Quick Overview of CSS Position Values

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

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

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 …

#108: Using Chartwell

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 …

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

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 …

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

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

#105: Using SpriteCow

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 …

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

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 …

#103: Integrating FitVids.js into WordPress

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 …

#102: Braindump on Responsive Web Design

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

#101: Let’s Suck at GitHub Together

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 …

#100: Let’s Write Semantic Markup

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 …

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

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 …

#98: Playing with Body Borders

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 …

#97: Intro to CSS Animations

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 …

#96: localStorage for Forms

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 …

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