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

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.

Can I Use – Find out what browsers support the CSS you want to use.

CSS Frameworks

Skeleton – A lightweight grid framework.



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.