Front-end Development Introduction

WORKING DRAFT: 9/20/2014 This series extends the basics series in terms of skill level—but we’ll start over with a new project, utilizing the great HTML 5 Boilerplate as a solid foundation. We’ll run through the process of creating the front-end for a website and learn some modern methods and tricks along the way, including: Working […]


Getting started with HTML 5 Boilerplate

WORKING DRAFT: 9/20/2014 We’ll be using HTML5 Boilerplate as a starting point for our project. You can download it at read more at the project website. Starting with this will give you the benefit of some of the most popular tools for front-end development today, in a neat package.  The project includes many more features […]


Building your own responsive grid (Part 1)

WORKING DRAFT: 9/20/2014 Every web project is different, and there is no “one size fits all” solution for organizing content. That said, responsive grids are a great place to start for many web projects that have a more-or-less “traditional” layout.  You might want to even start your project with a pre-built CSS grid framework, like the […]


Building your own responsive grid (Part 2)

WORKING DRAFT: 9/20/2014 In the last post, we built the large “desktop” size of our 12 column grid. Now, we’ll utilize media queries to transform how it looks on mobile devices. 


Practical web typography and font styling

WORKING DRAFT: 11/6/2014 Today, we have fine control over all of our web typography using just CSS—a vast improvement from just a few years ago when we were limited to a handful of “web safe” fonts or janky flash workarounds to use the fonts we wanted. Here’s a quick guide to get your started using […]


Building a CSS dropdown menu

WORKING DRAFT: 9/24/2014 One of the most basic features that the majority of websites share is a simple navigation menu that often includes some type of “dropdown”. These days, menus can take all shapes and forms, from the simple stacked list (left, below) to the “mega” menus including photos and other media (right side, below). We’re […]


Basic introduction to jQuery (Part 1)

I’ll confess that when I was learning web development, javascript seemed intimidating. But it really doesn’t have to be. If you understand how to select HTML elements with CSS (do you know how classes work?), then you can easily transition into understanding Javascript with the help of jQuery. I should note that there are tons of […]


Basic introduction to jQuery (Part 2)

This tutorial directly follows the previous “Basic Introduction to jQuery (Part 1)“, so start there if you haven’t seen it yet. Previously, we wrote a very simple jQuery function to make a pop-up box show up when we click on a button. Check out the Pen below to see what this looks like, as well as […]


Basic introduction to jQuery (Part 3)

Part three of learning jQuery extends the last tutorial. This time, we’re going to add multiple methods inside a single function, and learn about conditional statements. At the end of the last tutorial, we built some pretty solid looking tooltips (and that same method can be used to make a whole bunch of pop-up-type devices, […]


Basic introduction to jQuery (Part 4)

WORKING DRAFT: 10/18/14 Okay, this is the last part of the “intro to jQuery” tutorials… you can start with the previous tutorials if you’d like: Part 1 | Part 2 | Part 3 This time, we’re going to round out the functionality of the pop-ups by adding an optional “close” button inside of the pop-up, and […]


Adding single page “scrolling” navigation to your site

WORKING DRAFT: 10/30/2014 Adding “scrolling” navigation to your website can be helpful in a bunch of different scenarios. This tutorial show you how to use some popular jQuery plugins to easily add flexible nav options to your site. You can preview how this looks in the demo (opens in new tab). I’ve opted for an older […]