Web Design Resources

A little page of web design resources.

Introductions & References

HTML

CSS

Cheats and Tools

Every serious web developer uses cheats, references, and starter files. Here are some recommended ones.

Live Coding Environments

There’s no better way to learn that writing HTML, CSS, and JavaScript, seeing the results live, and saving it for later reference. THEN check out others’ work, fork it, play with it, learn how it was done, then innovate on it. Nothing beats hands-on practice, and CodePen speeds the learning curve.

Sign up for a CodePen profile

… and use it frequently!

Alternatives:

Even more alternatives are listed at CSS-Tricks.com and DesignShack.net.

HTML5 Starter Templates

CSS3 Tools

Color Tools

  • Kuler.adobe.com – find, create, and customize color schemes, then create a free profile and save for later reference

Image Compression

  • Smush.it – online tool for uploading and compressing your images for faster loading times

Generate Favicon and Touch Icons

  • iconogen – upload a square image, it generates your icons, download them
  • iconofier – upload a square image, it generates your icons, download them

How-To

Create animated GIF’s

Responsive Web Design

As Jeffrey Zeldman has put it, “responsive web design is the new black.” He goes on to explain its relevance:

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it. — Zeldman, Responsive Web Design is the New Black

What follows are a few great resources on this topic.

Summary Articles and Roundups

Responsive Web Design, by Ethan Marcotte — A List Apart

Responsive Web Design: What It Is and How To Use It — Smashing Magazine

  • provides a very helpful introduction to the concept

The best responsive web design examples and resources — Mayfield Digital Blog

  • includes a fantastic set of links to classic and important articles and responses, books, and a number of examples of sites employing responsive designs.

 

Designer’s Toolkit

Color Tools

  • Kuler — Kuler is a web-hosted application for generating color themes that can inspire any project
  • Color Blender — Dial in a color, and it generates a scheme of corresponding colors.
  • Color Palette — Generates a color scheme from a web image.
  • Colour Selector — Free, downloadable application for developing your own color schemes

Firefox Add-Ons

Free Coding Applications

FTP Client Applications

Great Sites

Advanced Coding Articles

Domain Names

If you would like at some point to register your own domain name:

Web Hosting Articles

If you would ever like to establish your own web hosting account to set up and host your own web sites, with tons of options and tons of online spaces, WordPress.org lists some great hosting providers.