In this screencast we're going to work on the "Demos" area of CSS-Tricks. It's a rather popular area of the site, despite the fact that I don't put as much time into it as I should. The point of it is a place on the site with a load of downloadable and viewable demos all in one place - so it's very easy to scroll and browse though and find bits that might be of interest to you and your projects.

In structure, it's very similar to the videos area. Each demo has a title and short description and a few buttons, just like each video. So we'll model the layout just like we did the videos area. However unlike the videos area, we aren't able to remove the hand-crafted HTML and replace it with a WordPress loop. That's because each demo doesn't live inside of WordPress, they are independent. That's OK though, we aren't afraid of a little markup. We'll just re-write it a bit to make it as perfect as it can be.

We now have all the bits in place as we need. We control the markup. We control the CSS just for this particular area. Just a few tinkerings with that and the main content area for this area is done.

At the end we look at individual demo pages and see how the branding of CSS-Tricks applies to those pages too.

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 in triple backtick fences like this:

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

We have a pretty good* newsletter.