Web developer resources

7   |  

Web development is complex and multi-faceted, therefore a large amount of tools exist to help developers make the most of their time. You’ll find some of these below.

The background resources listed below will help you find or generate backgrounds for your sites. Subtle Patterns is a fine example - it’s a list of many beautiful minimalist patterns.

The icon resources are either great sources of many icons, or icon fonts. Icon fonts have many advantages, like scalability, and the ability to colour or add shadows without editing an image.

Generate colour themes for your site based on colour theory or mathematically-derived compatibility. Font resources simply provide large amounts of either free or paid fonts. CSS generators let you produce a variety of effects without writing the CSS yourself.

Please feel free to post more if you find something unlisted.

Website background resources

Decent sized set of pure CSS backgrounds presented in a great UI

Great site offering free textures of a very subtle nature.

Classy minimalist backgrounds in a great interface.

Create your own tileable background image by choosing colours, a canvas, and an image.

Simple process that results in an attractive free background

Icon resources

Beautiful open-source site with a wealth of icon fonts

Great collection of icons - the focus is on visual communication symbols rather than application icons

A search engine for icon images. Very effective and very fast.

A famous and arguably overused set of icons for applications or websites

Colour theme generators

Attractive, social colour theme generator from Adobe

A simple, functional generator

Font resources

Handpicked fonts, free for commercial use

A large collection of open source fonts, provided as a free of charge service by the big G

Plenty of fonts, many of which are freeware or public domain

Interface looks a decade old, but still functional

CSS generators

Generate styles for sections of your site to easily choose things like drop shadow, background, border, and inner shadow

Duplicates the Photoshop layer style interface, so graphic designers shouldn’t have any trouble finding their way around

Choose gradient options in a Photoshop-like way and this tool outputs the corresponding CSS for you

Generates CSS buttons, allowing the user to choose things like size, colours, curvature and so on

Web design blogs

News for web designers and developers from a large editorial team based in Germany

Something of an institution in the web design world

Extensive coverage of coding, design, UX, and Wordpress related topics

Web design and development blog. News, tutorials, and the latest trends in web design

Web design, tutorials and modern design trends