We've left a big amount of open space in the header. From the very start, I knew this would be be for CSS-Tricks primary sponsor, Treehouse. In this screencast we start designing what the advertisement for them will be like. We're actually really lucky here in that I have a relationship with Treehouse such that I can design the ad myself and do whatever works for CSS-Tricks up there and they'll probably be cool with it (not that I'm opposed to their feedback, of course!).

What's cool about this ad is that we can use real web text, which will look nice and sharp (much sharper than text in images normally looks).

It's also a bit tricky because that open space up top will changes as the screen size on different devices changes. But we'll cross that bridge when we get to it.


  1. User Avatar
    Permalink to comment#

    Hi Chris,

    I’m unable to download the video file. Receiving an XML error. BTW, loving these screencasts and the new re-design over all. Keep them coming. You are a huge source of inspiration.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Try refreshing the page and trying again. This time totally my fault =)

      I’m going to bury this comment just because it was a temporary issue.

  2. User Avatar
    Max G J Panas
    Permalink to comment#

    Hey Chris,

    referring to your current Treehouse banner add, that goes something like this:

    Web Design
    Web Development
    iOS Development

    At a glance, it does not convey what the company offers.

    Looking at it as someone who might not know what Treehouse is, all I see is the name “Treehouse” and a list of three terms. It is not obvious from the banner that Treehouse is a place to learn these things. Since the banner does not indicate it anywhere, I would be less likely to click on it even if I was someone eager to learn, because it is not necessarily obvious that that’s what’s offered.

    Adding the word “Learn” somewhere after “Treehouse” in the banner would alleviate the issue, I feel. That’s all!

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I think that’s valid criticism. If there was more visual connection between the top ad and the top-of-sidebar ad I’d be less worried about it, but at this exact second they aren’t very connected. This kind of thing is ever-evolving (I’m talking to them about some ad changes as we speak).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.