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

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, you can use names like blue, green red, etc. There’s 140 color names that you can use in your stylesheet.

Browser Supported Color Names – Instead of remembering the hex code

CSS Frameworks

Skeleton – A lightweight grid framework.

Bootstrap

Foundation

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.