Web Design Tools and Resources

Web Design Tutorials

Michael Locke

Codeacademy

Treehouse

Lynda

TutsPlus Parallax Tutorial

Brad Hussey’s Bootstrap to WordPress Course

Web Design Inspiration

PatternTap

Dribbble

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

Placeholder Images

Placehold.it – Image placeholders that you can size by altering hte URL

Lorempixel – Creative Commons dummy stock images that you can size by altering the URL

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.