Web Design Tools and Resources

Web Design Tutorials

Michael Locke




TutsPlus Parallax Tutorial

Brad Hussey’s Bootstrap to WordPress Course


Web Design Inspiration



Best Web Gallery

Web Design Ledger

Moat – Search engine for banner ads


Web Design Icons

Flat UI Pro’s Social Media Icons


Web Design Blogs

Design Reviver

Smashing Magazine


CSS Tutorials

Box Sizing Tutorial – How to add padding and a border to a block element and keep the same width

How to Make a Zig Zag Border


Navigation Menus

Suckerfish Dropdown Menu

CSS Resources

CSS Media Queries for Standard Devices

Web Design Tools

Adobe Kuler – You can get some color scheme inspiration here or create your own color scheme.

COLOURlovers – Another place where you can get color scheme inspiration in addition to pattern inspiration.

Subtle Patterns

BreakpointTester – If your website is responsive, you can see how your website looks at every breakpoint by installing this on your bookmarks toolbar.

Emmet – An awesome tool that will speed up the workflow for HTML coders.

QuirkTools Screenfly – Use this to check how responsive websites look on different devices.

jQuery Resources

Official jQuery Website – Download jQuery versions here.

W3Schools jQuery Selector Tester – Use this to see what elements are affected by each jQuery selector.

SSL Resources

Why No Padlock? – If you’re not seeing the padlock in the URL box after you’ve converted your website to the https protocol, this website will let you know what’s causing the problem.

Version Control

Bitbucket – A Git repository.

GitHub – A Git repository.

Git Tutorials

DeployHQ – Used to deploy changes to Git repositories to staging and/or production servers.