Design

Paying homage to (or stealing from) your inspiration

I had an idea for the new version of my site: I was going to illustrate objects using only HTML and CSS ( to show that I know how to do stuff with code), and make them look like they were neatly organized in a physical space* (which seems vaguely trendy) according to the underlying grid…

Code

 /  Front-end Series

Adding single page “scrolling” navigation to your site

Update: June 2021 Lots of people keep finding this page through search and the original method from 2014 was outdated and broken. So, this new method (embedded below and also available on CodePen) is a better version that works with vanilla JS instead of requiring jQuery. To see it in action on a full page,…

Code

 /  Front-end Series

Basic introduction to jQuery (Part 4)

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 use some different…

Code

 /  Front-end Series

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,…

Code

 /  Front-end Series

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…

Code

 /  Front-end Series

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…

Code

 /  Front-end Series

Building a CSS dropdown menu

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 going to…

Code

 /  HTML & CSS Basics Series

The Box Model: visualizing HTML & CSS

Finally! We’re going to get to the layout of the page and make it look like a website. In the past few tutorials, we’ve been exploring some of the HTML and CSS fundamentals needed to start this, and now we’re going to dig in. As of the last tutorial, you should have three HTML pages…

Code

 /  Front-end Series

Practical web typography and font styling

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 CSS for fine…

Musings

Plastic report covers and vague spaces

I have these weird dreams like everything is the wrong size and somehow because the sizes don’t make sense, my whole world is wrong and I’m going to die. Or at least it feels that way until I wake up, drenched in sweat. These dreams usually preempt a cold, or happen when I’m trying to…