Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

73 comments

Sublime Text for Front End Developers

The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out

Sponsor: Frontend Masters – Expert Web Development Training

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. These are super in-depth courses designed for intermediate and advanced developers.

They have two fantastic workshops coming up:

  • Level up your JavaScript in

The State Of Animation 2014

Rachel Nabors:

I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.…

Perf.Rocks

Find resources that help you build lightning fast websites

by Daniel Guillan…

Performance Budget Metrics

Tim Kadlec groups all the things you could measure in a performance budget into four groups:

  1. Milestone timings (Example: time to visually complete)
  2. SpeedIndex (WebPageTest's well-loved but isolated score)
  3. Quantity based metrics (Example: number of requests)
  4. Rule based metrics (Example:
6 comments

CSS-Tricks Chronicle XX

I thought for this edition of Chronicle I'd focus on some web stuff that I've been enjoying lately. …

CSS Specificity Graph Generator

Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet.

Jonas Ohlsson created a tool around Harry Roberts concept.…

Fun Times with CSS Counters

Some bonafide CSS trickery from Will Boyd, like counted selected items and continuing a count across multiple sections.…

26 comments

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

a CSS-Tricks reader wrote to me with a layout question. A variety of elements need to be arranged in a horizontal bar. Some of fixed size, some vary, and one needs to take up the rest of the space. Flexbox is beautifully suited for this, so I explain with that.
16 comments

Sketchy Avatars with CSS clip-path

The following is a guest post by Ryan Scherf. Ryan found a neat way to give avatars kind of rough, uneven, varied edges. Kinda like they were cut out with scissors by someone who wasn't very good at using

Sponsor: Dash – Monitor your Website, Business, & Life

Dash is a website that lets people quickly create real-time dashboards. There are dozens of pre-built widgets for services like Google Analytics, GitHub, Twitter, and Fitbit. Dash also has an API that allows you to share data from Dropbox or …

15 comments

Collision Detection

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, …

Firefox Developer Edition

  • For a normal front end dev like me, Valence is the most interesting feature. It's like how you can inspect iOS simulator through Safari, only it looks like you can do more with it, like inspect Chrome (weird), a Firefox

Sponsor: Extract for Brackets

Autocomplete is a pretty excellent feature of code editors, right? It helps us type faster and more accurately, and suggests things that might not immediately come to mind. (Was that white-space: prewrap; or whitespace: pre-wrap; again?)

Extract, a new …

15 comments

How SVG Fragment Identifiers Work

I've talked a good bit about SVG's <use></use> around here and using it to build an icon system. The beauty of <use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that …

The Specificity Graph

Harry Roberts, on charting CSS selector specificity across entire codebases:

A spiky graph is a bad graph.

I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. …

Sponsor: Wufoo

I'm posting this just as a big ol' high five to Wufoo for being a long time sponsor of CSS-Tricks.

Wufoo is a web app for building web forms. Things like contact forms, conference registration forms, t-shirt selling forms, wedding …

21 comments

Datalists for Different Input Types

I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date.

Typically, that looks like this:…

9 comments

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate …

Sponsor: Hack Reactor’s Immersive Remote Beta Course

Hack Reactor's Coding School is accepting applications for its next online immersive course, Remote Beta. Their team of exceptional instructors and staff work towards a two-fold mission of empowering people and transforming education through rapid-iteration teaching. Students build the skills …

Lobotomized Owls

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate …

41 comments

Probably Don’t Base64 SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it …

14 comments

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 …

63 comments

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

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 …

29 comments

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

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 …

36 comments

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 …

10 comments

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 …

52 comments

Responsive Images: If you’re just changing resolutions, use srcset.

If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the …

28 comments

Thoughts on Pagination

I've had some disparate thoughts regarding pagination lately, so I thought I'd attempt to organize them in a post. That's how blogging works right? …

24 comments

The Game of Life

It's not really a "game" - but more like a set of rules by mathematician John Horton Conway. Imagine a grid of cells, like a spreadsheet or a <table></table>. Each cell is either alive or dead. "Rounds" pass one …

Don’t use `picture` (most of the time)

Jason Grigsby:

Unless you're solving for art direction, you don't need to the element. In fact, you're likely doing your users a disservice by using the <picture> element.

I'd wager that the majority of "responsive images" use is serving appropriately …

59 comments

Build Web Layouts Easily with Susy

I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Last week I

The Bézier Game

A game to help you master the pen tool.

By Mark MacKay.

Early in my career I had a job where a good half of it was cutting detailed clipping paths on photos (using the Pen Tool in Photoshop). We …

25 comments

Scroll-Then-Fix Content

A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) There is a search input in the middle of the page …

Sponsor: Hack Reactor – New Remote Beta Classes

With the success of their first online cohort, Hack Reactor is happy to announce two new Remote Beta classes. Aspiring engineers no longer need to relocate to San Francisco in order to attend their 12-week immersive JavaScript coding school. Take …