Bookmarks

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.

bookmarks

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.

  • Hackhands.io

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

  • tlk.io

    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.

  • 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

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

  • Character-Code.com

    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.

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.

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.

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

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

  • Hookr.io

    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.

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.

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.