#001 Taking Content Inventory

Running Time: 22:08

Welcome! This is going to be quite the journey, and like all journeys, this one starts with a single step. Our first step is to take inventory of bit of content on CSS-Tricks. Starting with this means that we won’t …

Watch the Screencast

#002 Establishing Redesign Goals

Running Time: 11:12

This redesign isn’t a redesign just for the sake of redesigning. I want to improve the site in every conceivable way you can improve a site. One of the big things is that the design should serve the different types …

Watch the Screencast

#005 Adding Slight Dimensionality

Running Time: 6:08

We add some extra layers beneath the main header/branding box to give the “stack of papers” look. No big metaphor or anything, it just adds some visual interest and gives us something to work with as we move to other …

Watch the Screencast

#006 Photoshopping the Main Navigation

Running Time: 16:18

We start designing the top level (main) navigation of the site. We’re starting with the desktop size screen (at an admittedly arbitrary width) but we’re not worried that the navigation will have any problem adapting to a small screen.

We …

Watch the Screencast

#009 Setting Up our Local Dev Environment

Running Time: 9:26

We certainly aren’t “done” in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we’re building not a picture of a website …

Watch the Screencast

#010 Starting to Write HTML

Running Time: 14:19

While looking at our Photoshop mockup, we write start writing HTML to describe what we are looking at. We are of course using HTML5 whenever it makes sense to staying as absolutely semantic as possible. For example we use the …

Watch the Screencast

#012 CSSing the Header / Logo

Running Time: 17:23

So far the actual web site doesn’t look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a …

Watch the Screencast

#013 CSSing the Navigation Structure

Running Time: 14:22

We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.

The navigation blocks, at the widest width, are 1/8 …

Watch the Screencast

#016 Using Media Queries in Sass

Running Time: 11:06

We introduce the concept of @media queries in CSS.

A lot of what using Sass on this project allows us to do is stay DRY (don’t repeat yourself). We did that setting color and size variables. We did that with …

Watch the Screencast

#019 Building a Simple Grid

Running Time: 9:31

The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren’t grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They’re easy. …

Watch the Screencast

#021 Breaking Into Include-able Parts

Running Time: 9:07

Now that we’re running a custom local domain, we can use PHP. The “P” in MAMP is for “PHP” =). Using PHP means that we can use includes. For instance:

<?php include("header.php"); ?>

Our goal is to make a static …

Watch the Screencast

#023 Moving Typography out of Normalize

Running Time: 7:00

I think it’s very nice to have an individual file (.scss) that is for the vast majority of typography on the site. Normalize has quite a bit of typography related stuff in it already, so let’s remove that and move …

Watch the Screencast

#025 Post Typography, Part 1

Running Time: 19:03

Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it’s the place a reader will be spending the most time looking …

Watch the Screencast

#026 Post Typography, Part 2

Running Time: 16:12

We’ve done a little bit of work on headers, but we’ll dig in more on those in this screencast. Headers are a darn important aspect of any site. Done well, our friends h1 through h6 should serve just about every …

Watch the Screencast

#029 Integrating FitVids.js

Running Time: 7:04

Images aren’t the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will …

Watch the Screencast

#031 Current Navigation Highlighting

Running Time: 1:49

In this super quick video we add in all the CSS necessary to make sure the current page item in the main navigation gets highlighted when that page is active. Turns out we kinda already did this, since we’re so …

Watch the Screencast

#032 Making The Grid Responsive

Running Time: 18:12

We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.

The …

Watch the Screencast

#033 Photoshopping Search

Running Time: 14:39

There is a lot of content on CSS-Tricks. That’s one of the things that makes it’s design a bit challenging. While we can stay clean with the design, we probably can’t get away with “minimal” with the amount of stuff …

Watch the Screencast

#034 Building Search, Part 1

Running Time: 17:50

Now that we’ve Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X …

Watch the Screencast

#036 Building Search, Part 2

Running Time: 18:36

We pick up where we left off in Video #034 and continue building out the search area.

This time we’re focusing on the “open” state of the search, building the actual form elements themselves. The search field itself uses the …

Watch the Screencast

#037 Building Search, Part 3

Running Time: 10:38

We have a little more work to do to finish up the search area.

We get sidetracked for just a second as I notice we didn’t add the three-dimensional stacking affect to the page wrap yet, so we do that …

Watch the Screencast

#038 Adding Button States

Running Time: 2:48

We’ve created the look of a button in it’s regular state, but a 3D button like that is begging for a “pushed” state. What we do is add a darker color to the button on :hover and :focus. Then …

Watch the Screencast