This is a running list of my favorite web design and development resource links, a (public!) replacement for browser bookmarks.

Please verify that you acquire the appropriate license for anything you use yourself.
Licensing matters.


jQuery & JS

  • FitVids

    An easy-to-use jQuery plugin for responsive videos.

  • QuickSearch.js

    In-page live search for lists, tables, etc. In use on this very page!

  • FancySelect

    Streamlined, very pretty jQuery plugin for styling drop down menus. Very easy to use.

  • 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.

  • 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

  • Design Quips

    A searchable repository of data, original sources, and research that backs up the things designers and developers say/ hear. Things like actual data on how video impacts email click-through rates.


    A free online tool that combines video chat, instant messaging, and real-time paired coding. Perfect for teaching/learning and troubleshooting.


    Free, easy-to-use, nice looking real-time web chat.

  • Tiff

    “A type diff tool that visually contrasts the differences between two fonts.” So cool.

  • Social Kit

    A free Photoshop (CS5, CS6 and CC) plugin with editable templates for common social media graphics such as Twitter backgrounds and cover images and Facebook cover images.

  • Screenhero

    This app, currently in beta, allows you to collaboratively & simultaneously use any computer program with anyone, anywhere (across platforms, too). Like screen sharing on steroids.

  • Kirby CMS

    A simple PHP based CMS. This cms uses only FTP and a good text editor. According to Maria Esther Cuan, who submitted this resource, “the file structure and the use is seamless.”

  • Every Time Zone

    A simple visual interface for at-a-glance time zone conversion. Great for working with international clients.

  • Snazzy Maps

    Style templates for custom Google maps implementations. Super, super useful.

  • ListiFy

    This web app converts a text list to an HTML list based on the parameters you set.

  • px to em

    Simple little online tool that converts px to em or vice versa. [Hat tip to Michael for the recommendation]

  • Flatdoc

    A JS library that renders Markdown files as full pages (letting you use them as documentation for a project).

  • HEX 2 RGBA Color Calculator

    Nice little tool that converts from hex color codes into RGB(A) for use in CSS.

  • PHP Live Regex

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


    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.


  • Wistia

    Business-grade video hosting with a ton of features and flexible player styling at reasonable prices. Sold!

  • SignNow

    Another tool for sending, signing and reviewing contracts online. Lower cost than RightSignature.

  • 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]

  • Docracy

    Fantastic resource for contracts and other legal documents.

Reference – HTML & CSS

  • CSS Term Definitions

    Super helpful reference for CSS terminology, this tool shows you each term by highlighting the relevant parts of example CSS.

  • Mozilla Developer Network Web References

    Mozilla’s really well done reference site with all kinds of documentation and tutorials (basic to advanced).


    A reference for codes and entities for various characters, beautifully displayed in an easy-to-use format. Miraculous!

  • 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.


  • 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.

Dummy Content

  • WP Test

    A “fantastically exhaustive” set of importable posts, pages, and other content for testing your WordPress themes and plugins.

  • Random User Generator

    Like Lorem Ipsum, but for people, RandomUser provides you with a randomly generated user for use in web mockups. [Thanks to Angee Maree for sending this one in.]

  • Placebear

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


    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.

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.

Reference - Miscellaneous

  • Design Quips

    A searchable repository of data, original sources, and research that backs up the things designers and developers say/ hear. Things like actual data on how video impacts email click-through rates.

  • DevDocs

    Combines documentation for a whole bunch of different languages into one easy to use interface. Genius! PHP, CSS, HTML, CSS, jQuery and many many more.

  • WebAIM

    A great organization aiming to get more websites to have content accessible to people with disabilities. Excellent resources & information.

  • Usability Checklist

    An online checklist designed to help you “catch common usability problems before user testing.”

  • Web Developer Checklist

    A suggested list of things to check before calling a project finished.

Learning the Basics

  • Short (~5-7 minute) videos demonstrating CSS principles, with a lovely British accent guiding you through (hat tip Jen Hail)

  • Butterick’s Practical Typography

    A detailed, comprehensive guide to typography. With personality!

  • 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


    Super useful searchable reference for WordPress hooks, classes, functions, and so on.

  • Tidy Repo

    A selection of well maintained and reliable WordPress plugin (since we all know not everything in the main repository meets those criteria).

  • 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.


  • 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.

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.

Reference - Shopify

Reference – JS & jQuery

  • Mozilla Developer Network Web References

    Mozilla’s really well done reference site with all kinds of documentation and tutorials (basic to advanced).

  • External Scripts Loop

    This is a nice little snippet demonstrating a cleaner way to include multiple external scripts (e.g. Facebook, Twitter, Google Analytics).

Reference – PHP & MySQL

  • PHP: The Right Way

    “An easy-to-read, quick reference for PHP popular coding standards…” – also includes links to tutorials and suggestions for best practices.