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

Placeholder Images

Placehold.it – Image placeholders that you can size by altering the URL
Lorempixel – Creative Commons dummy stock images that you can size by altering the URL
Unsplash Source – You can load random images and change the image dimensions by altering the URL.

CSS Resources

CSS Media Queries for Standard Devices
CSS to SASS/SCSS Converter – Just paste your vanilla CSS code here and click a button to convert it.

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