#121 A Template for Generic Pages

Running Time: 7:37

We look at the contact page and decide that it’s the kind of page on CSS-Tricks that is very generic and doesn’t need any particular special styling at all. Really the only difference between a generic page and a blog …

Watch the Screencast

#122 Building the Videos Archive, Part 1

Running Time: 18:47

The videos archive page is the part of the site where people can browse all the free videos available to watch. It’s for browsing, must like the homepage for the snippets or the homepage for the demos.

These pages are …

Watch the Screencast

#124 Building the Demos Archive

Running Time: 6:56

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 …

Watch the Screencast

#125 Photoshopping the Single Video Page

Running Time: 15:03

In this screencast we dig into designing another very important page. This is one of those pages I’ve been excited about designing since the beginning, because it’s a page that was particularly under-served by the last design. In this new …

Watch the Screencast

#127 Building the Single Video Page, Part 2

Running Time: 10:39

In this screencast we’ll finish up code-wranglin’ the template for single videos.

We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and …

Watch the Screencast

#128 Styling the Deals Page

Running Time: 18:27

In this screencast we’ll dig into the Deals section. The Deals section is essentially a “wall of ads”. It’s an area of the site that people would have to navigate to themselves, so I’m not worried about jamming ads down …

Watch the Screencast

#130 Styling the Article Archives Page

Running Time: 14:11

The article archives page on CSS-Tricks is rather important. Rather than having paginated blog posts like most blogs have, I simply link to the archives. I figure it’ll save people the trouble of click-and-scrollbrowse, click-and-scrollbrowse, click-and-scrollbrowse… Instead, they go right …

Watch the Screencast

#131 Building More Homepage Modules

Running Time: 16:48

In this screencast we set about building out a few more of the modules we plan to have on the homepage.

Just a little tweak and we’re showing three hot links instead of two. Copy and paste a bit of …

Watch the Screencast

#132 Intro to The Forums

Running Time: 8:59

In this screencast we dive into an all new section of the site: The Forums! This is a huge area of the site. Perhaps not so much in traffic (I’ve always wished it could grow, traffic wise), but certainly in …

Watch the Screencast

#133 Forums Wrangling, Part 1

Running Time: 32:48

In this screencast we’ll actually dig into the code of the Forums area.

The “main” file of the forums, if there is such a thing, is default.master.php. It’s a bit like index.php in a WordPress theme, except literally every view …

Watch the Screencast

#134 Forums Wrangling, Part 2

Running Time: 18:17

In this screencast we continue to dig into the code of Vanilla Forums and get our theme going. We make the decision right away to do the wild-n-crazy move of nuking the entire set of CSS that comes from Vanilla …

Watch the Screencast

#135 Forums Wrangling, Part 3, Login

Running Time: 11:45

We keep digging into theming the Forums area of the site. We’ve done good so far, but the deeper we dig the more difficult things are going to get. Partially just because I don’t have a ton of experience with …

Watch the Screencast

#138 Forums Homepage Styling

Running Time: 13:30

It’s been a bit of a long road wrestling control over all the parts we need, with a couple of struggles and surprises along the way. We can finally get started designing those modules on the homepage according to the …

Watch the Screencast

#139 Individual Forums Thread Styling

Running Time: 16:53

You might argue that the homepage of the Forums is the most important page, but there are equally good arguments for individual thread views being the most important. Data suggests people land on these “deep links” in higher numbers than …

Watch the Screencast

#140 Forums Signup Styling

Running Time: 17:01

We’re still neck deep in the Forums area. In this screencast we look at the signup page. Another rather important page as we want the experience of joining the forums to be and easy and welcoming as possible.

We’re a …

Watch the Screencast

#141 Restrict Content Pro Setup and Settings

Running Time: 12:53

In this screencast we take a little break from battling Vanilla Forums styling to work on setting up Restrict Content Pro (RCP), our WordPress plugin for managing subscribers to The Lodge, the private access area (that you are literally inside …

Watch the Screencast

#142 Forums Modules Styling

Running Time: 19:21

Along the right side of the forums there are a series of modules. “Modules” visually, “Modules” literally in code, and “Modules” in that the content they contain is a related group, separate/different from the content in other modules.

The first …

Watch the Screencast

#146 Custom Header for The Lodge

Running Time: 17:27

In the last screencast we snagged that photo from iStockPhoto of the snowy cabin and forest. We dropped it in the background, behind the main content area and sidebar of our Photoshop document and it fit nicely up there, in …

Watch the Screencast

#149 Building a Login Form for The Lodge

Running Time: 6:27

One of the reasons WordPress is awesome is that it comes with its own fully functioning user authentication system. Writing that from scratch these days would be pretty dumb if you don’t plan to bring a heaping pile of innovation …

Watch the Screencast

#153 Styling the Lodge Signup Form

Running Time: 13:34

The signup page for The Lodge is very important for obvious reasons: this is the page that collects the money and grants the access to the membership area. It needs to look good and work better.

Text is a part …

Watch the Screencast

#156 Launching the Site, Part 1

Running Time: 17:22

This is the big moment! We have a list of things we know that we need to do and we’re just going to start doing them and get this site live.

Perhaps the most noticeable change (last second thing before …

Watch the Screencast

#157 Immediate Post Launch Followup

Running Time: 5:52

I shot the video just maybe 10 minutes after launching the site. Comments are starting to roll in and this is me kind of reacting to some of that. Like anything of this nature, there are reactions both positive and …

Watch the Screencast

#158 A Month Later

Running Time: 33:21

About a month after the launch we talk about how the v10 launch has gone.

We look through the document we set up at the very beginning of this process where we wrote down all the goals for the redesign. …

Watch the Screencast