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.

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

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag