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

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