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