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