jQuery & JS

• Scroll to Top

  Simple, concise and functional tutorial for creating a scroll-to-top button using simple jQuery.

• Rhinoslider

  Yet another jQuery slider - this one has a nice fade effect and a generator that lets you pick your own settings before downloading the plugin.

• jQuery Modal

  A super simple & lightweight modal for when you don't need a ton of crazy options and features, and you do need small files and easy styling.

• jQuery Collapse

  A lightweight plugin that allows you to add collapsing functionality (e.g. a FAQ where clicking the question shows & hides the answer).

• Filtrify

  The most ridiculously complete filtering functionality I've seen out there. Used on this site in for my current portfolio (my old portfolio used Quicksand).

• Prism

  Syntax highlighting made pretty (and lightweight).

• Galleriffic

  Super easy photo galleries, with available thumbnail navigation and multiple other methods of control.

• fancyBox

  Zooming/ lightbox functionality for images, text, and other content types. I use this all the time, too many sites to list here.

• List.js

  Gives you the ability to create searchable, filterable, sortable HTML lists and tables. In use on this page!

• Picker

  Replace form checkboxes and radio buttons with nicer-looking, style-able versions.

• CarouFredSel

  Turn anything into a customizable, flexible carousel.

• jPages

  Pagination for everything! Easy-to-implement, flexible & powerful plugin for paginating any kind of content.

• HorizontalNav

  Simple little plugin for getting horizontal navigation to fill the available space.

• Tooltipster

  Allows you to create super flexible, customizable & easily styled tool tips. In use on this very page (hover over "Posts on this" or "Sites using this" icons).

• UnoSlider

  Simple, easy-to-use content slider.

• Chosen

  Converts form select boxes into more user-friendly versions with search, among other features.

• Backstretch

  Full-sized, scalable background images that keep their original aspect ratio.

• Selectbox

  Allows you to create nicely styled, customizable select elements (drop downs).

• FitText

  Flexible font sizing, useful for dynamic layouts. Meant for headlines and other display text.

• jScrollPane

  Lets you scroll content blocks with nice-looking, customizable scroll bars from single divs to the whole page. Horizontal & vertical, and can be nested. Very flexible.

• Revolver.js

  A content slider that looks to be super flexible with some nice navigation/ control options.

• Quicksand

  A filtering and reordering plugin, with nice options for animation.

Apps & Tools

• PHP Live Regex

  Test out PHP regular expressions in real time. Amazing, especially since regex are so a mind-bending to deal with.

• Gaug.es

  A subscription analytics provider. Why pay for analytics when GA does it free? For a simple, readable, intelligent UI, that's why. You'll actually USE your data, so in my opinion it's worth it (I use it for my sites).

• Am I Responsive?

  Ridiculously useful little tool to show a single site within various "devices." Hard to describe, so just look - great for portfolios, client education, screenshots, etc.

• Browse Happy

  A quick, easy way to check the latest version of each major browser with links to where you can download them if needed.

• Support Details

  The easiest way to get all the info you need about OS, screen resolution, web browser, and more, from a client. Great for troubleshooting.

• Under the Site

  Want to know if a site runs on WordPress or what programming languages it uses? This can tell you.

• Loads In

  Find out how fast a website loads across the world.

• CSS3 Generator

  A quick way to test out and grab sample code for fun CSS3 effects.

• BrowserStack

  Not free, but definitely my favorite cross-device/ browser testing tool.

• 0 to 255 Color Variations Tool

  One of my favorite tools for finding variations on any color by hex code.

Business

• Photoshop Etiquette

  My favorite (everyone's favorite) guide to organizing your Photoshop web design files.

• Name Cheap

  My preferred domain registrar, all my domains are through them.

• Bluehost

  The low-cost hosting provider I recommend to all my clients. [Affiliate Link]

• WP Engine

  Premium WordPress-only hosting - great security, speed and customer support. Used for this site. [Affiliate Link]

• RightSignature

  Execute contracts and other documents online.

• Docracy

  Fantastic resource for contracts and other legal documents.

Fonts

• Fontello

  Mix your own web font from a bunch of available icon web fonts.

• Lost Type Co-op

  Pay-what-you-want approach to licensing, nice if sometimes trendy fonts.

• Fontspring

  My favorite place to buy fonts, with solid, clear licensing terms & a nice selection.

• Font Squirrel

  Free-for-commercial web fonts + a great converter tool.

• Font Awesome

  An extensive icon web font, originally created for use with Twitter Bootstrap.

• Beautiful Web Type

  This site shows off some of the nicer fonts available through Google Web Fonts.

Stock – Textures, Graphics, Patterns & Icons

• The Ink Nest

  Awesome, non-cheesy clip art (high res EPS and/or PNG) from talented illustrators. A lot of it is done with bloggers in mind, and it's all beautiful.

• CG Textures

  Huge repository of photos and textures, including odd but wonderful things like paint splatters and ink-in-water images.

• Lost & Taken

  Collection of various textures, free for personal and commercial use.

• Subtle Patterns

  Repeating background patterns. Available as PSDs as well.

• The Haystack Dept.

  "A curation of usable, high resolution, found and original graphics, textures, type and patterns." Low-cost but not free.

• The Noun Project

  Large directory of icons for all sorts of concepts. Not all free, but reasonably priced and usually well done.

Dummy Content

• Placebear

  In case you get tired of using kitten photos as placeholders, this site provides bears.

• Placehold.it

  A quick and simple image placeholder service. [Thanks to Annalyn for the recommendation]

• Blank Video Placeholder

  Just what it sounds like - a blank Vimeo video that you can use as a placeholder when working on a site that doesn't have their video ready yet.

• Blind Text Generator

  One of many resources for dummy text, this is a favorite because it has more options than most.

Inspiration

• Agile Designers

  Resources collected from all over. Icons, textures, brushes, all kinds of stuff really.

• Media Queries

  Shows screenshots of responsive sites at different breakpoints.

• 52 Weeks of UX

  A series of thoughtful articles on designing for user experience.

Reference – HTML & CSS

• Clean Sticky Footer

  A CSS sticky footer demo - view the source to grab the code for your own projects.

• Learn CSS Layout

  A nice, simple, but clearly illustrated introduction to CSS layouts.

• Learn HTML & CSS

  This is the most well-done set of tutorials I've seen on HTML and CSS (there're both beginner and advanced sections, with an intro to jQuery in the advanced section), in both content and design.

Client Education

• WP101 Video Series

  This is a great free series of videos showing the basics of using WordPress. Still useful, although getting a bit outdated.

• How to give web design feedback

  An interesting article aimed at helping designers teach their clients to give useful, workable feedback that doesn't lead to a creative dead end.

• Saving Images for the Web

  Nice short intro to the differences between GIF, JPEG, and PNG and when you'd use each when saving graphics for the web.

Learning the Basics

• Learn CSS Layout

  A nice, simple, but clearly illustrated introduction to CSS layouts.

• UX Apprentice

  From the makers of wireframing tool Balsamiq, this site is fairly heavily branded but worth checking out for the solid information and great resources lists.

Reference – WordPress

• PDF WordPress User Guide

  If you're looking for a written introduction to WordPress, this guide is a great source. It seems to be updated regularly and is very thorough. Available in free and premium versions.

• List of WordPress Utility Functions

  This isn't an all-encompassing list but it's a great start for learning some of the things WordPress can help you do using built-in functions.

Reference - Miscellaneous

• Shopify Cheat Sheet

  In-browser reference for Shopify coding. Amazing.