A little page of web design resources.

Introductions & References

HTML

• HTML Dog – HTML Basics
• W3Schools – HTML Intro and Reference
• HTML5 Doctor – detailed, helpful reference articles on HTML5 elements

CSS

• HTML Dog – CSS Basics
• CSS-Tricks.com – fantastic short tuts and demos on the ins and outs of CSS

JavaScript

• JavaScript Cheatsheet – a hand resource for working with JavaScript

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:

• jsFiddle.net
• CSSDesk

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

HTML5 Starter Templates

• A bare-bones basic HTML5 markup template (posted as a Gist on GitHub)
• A roundup of other highly recommended starter templates
  • HTML5 Bones
  • The HTML5 Boilerplate
  • Initializr

CSS3 Tools

• CSS3 Click Chart – from border radius to box shadows to background clip and beyond
• Ultimate CSS Gradient Generator by ColorZilla – a photoshop-like interface for mixing CSS3 gradients

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

• How to Make Animated GIFs – PC Mag
• How to Create Animated GIFs Using Photoshop – WikiHow

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

• XHTML & CSS Cheatsheets — Handy references for coding reminders
• Lorem Ipsum — Free easy source of filler text for your design mockups.
• lorempixum — Filler IMAGES for your design mockups. Just insert a simple bit of code.
• Special Characters in HTML — Find the right HTML code for special characters.
• Stock.xchng — Stock photography (for FREE).
• Icon Finder — Find great icons for your designs.

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

• Download Firefox here
• Add the Firebug add-on — See how to install add-ons here.
• The Measure-It add-on — Add to measure elements in your browser.
• The ColorZilla add-on — Add to capture color codes.
• Web Developer’s Toolbar @ ChrisPederick.com
• EditCSS
• You might also like other add-ons from this collection.

Free Coding Applications

• Textwrangler (for the Mac)
• Notepad++ (for Windows)
• PSpad (for Windows) — choose the “Installer”

FTP Client Applications

• Cyberduck (for the Mac) — free for academic use
• Filezilla (for Windows) — choose the “Client”

Great Sites

• SmashingMagazine.com
• NETtuts.com
• PSDtuts.com
• CSSbeauty.com
• 24ways.org
• AListApart.com
• Web Design at AllTop.com
• WebDesignerDepot.com
• IloveTopography.com

Advanced Coding Articles

• Push Your Web Design with CSS3

Domain Names

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

• NameCheap.com

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.