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

    • 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. 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!

    • 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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.