WebDevTraining
Web developer training resources.
Design
The Principles of Beautiful Web Design by Jason Beaird
This is an excellent, short and, easy-to-read book covering the basic design skills necessary to be a web designer. It covers layout (including the basics of the Golden Ratio and using rule-of-thirds grids), color, texture, typography and, imagery.
The Non-Designer's Design Book by Robin Williams
This is a good, straightforward introduction to basic design techniques. It is not specifically about web pages but, the general concepts are applicable to the web. This is primarily about visual design but, touches on usability.
Designing Web Usability by Jacob Nielsen
Homepage Usability: 50 Websites Deconstructed by Jacob Nielsen
These two books cover a lot of the basics of usability. Usability is about making web sites easier for people to use. Since web sites are fundamentally communication tools, usability is one of the keys to building successful web sites.
Probably the most important part of Homepage Usability is the homepage design statistics section near the beginning.
Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville
This books is about how to organize web sites and why it is important to organize web sites well.
A practical guide to Designing for the Web by Mark Boulton
An excellent introduction to web design from talented UK designer Mark Boulton. He covers the creative process, color, composition, typography, etc.
Five Simple Steps to Designing Grid Systems
Mark Boulton has a series of excellent articles that cover designing layouts with grids. Don't be put off by the technical-sounding terminology. The concepts are not especially difficult and, can serve you well in many related endeavors (like photography).
There are several other excellent short articles on the site, including Feeling your way around grids, Design and the Divine Proportion and, a series on typography.
ColorJack Sphere
This is an excellent free visual tool for developing color palettes based on color theory. there is a JavaScript version that works in most browsers and, a Dashboard Widget for MacOS X. You don't need to understand color theory to play with it. In fact, it might help you start to get some of the core principles of color theory.
Kuler
Adobe's Flash-based (browser) color scheme development tool.
Photoshop Etiquette
This site has a concise list of recommendations for best practices in creating website design composites in Photoshop.
URL Design
A discussion of URL design, namespacing in your site structure and related topics.
HTML and CSS Implementation
Opera Web Standards Curriculum
Opera, the company that produces the web browser of the same name, has produced an extensive and detailed online program for learning standards-oriented web development skills. If you want to learn to be a web developer, it would be difficult to go wrong with this. If you want to jump right in, start here.
World Wide Web Consortium (W3C)
The W3C is the standards body for HTML and CSS. We prefer to deploy sites that are fully standards-compliant with the HTML 4.01 or XHTML and CSS 2 standards. You can test pages for compliance with the HTML validator and CSS validator on the site. There are also some other tools (listed below) that can help with this. Here is an article on the CSS box model.
CSS Reference at MDN
This is a nice, concise CSS reference provided by the Mozilla Developer Network.
Opera Developer Site
The Opera developer site has a collection of articles about the specifics of various areas of web development.
Web Browser CSS Support
The Web Devout site provides charts showing which versions of which browsers support which specific CSS declarations.
Yahoo User Interface Library
Yahoo's User Interface Library includes a CSS grid layout system. There is a tool for generating layouts but, it would be good to get a feel for how it works at the code level. It's a lot simpler than it looks at first glance. Used in combination with various hacks to compensate for IE's deficiencies, this is a very efficient way to create layouts that work in all modern browsers and degrade gracefully.
Smarty
Smarty is the templating system incorporated into our ECMS2 system. You will need to be a little familiar with templating and Smarty to build custom templates for ECMS2. It's worth looking at the short Crash Course on the site to get an idea of how it works. In developing templates, you would only be developing the .tpl (HTML template) files, not coding the PHP. In short, you will mostly be placing Smarty tags into your HTML files where you want specific content from ECMS2 to appear - for example, the main content area of the page will have a {content} tag where the content goes.
High Performance Web Sites by Steve Souders
This is a nice presentation of the current thinking on how to optimize the performance of web pages. This is about the front end - HTML, CSS, and JavaScript and how it is served to the user - rather than about the back end (the code on the server that assembles and processes the content). There are some articles around that cover much of the same ground (i.e., this Yahoo Developer page). The book does a nice, orderly job of presenting the material. There is some useful info on the author's web site, too.
HTML5 for Web Designers
Short survey of how you can use HTML5 now (c. Feb. 2011). From the same people as the CSS3 book below.
CSS3 for Web Designers
Short survey of how you can use CSS3 now (c. Feb. 2011). From the same people as the HTML5 book above.
Responsive Web Design by Ethan Marcotte
Another excellent book from A. Book Apart covering progressive enhancement using flexible grids and typography with media queries.
Some of the same material is covered in the author's articles at A List Apart: Fluid Grids, Responsive Web Design, Fluid Images
Note, though, that the book is more concise and current.
Development Environment and Tools
Firebug
Firebug is a plugin for the Firefox web browser that lets you review a web page's structure (the Document Object Model or DOM), HTML and CSS. You can also use Firebug to modify the HTML and CSS of a loaded page to immediately see what effect any changes would have. It is a really useful tool both for learning how it all works and, for debugging and tweaking pages.
Firefox Web Developer Plugin
This Firefox plugin provides additional tools that are useful for debugging and testing site designs.
MAMP
The Mac Apache Mysql and PHP project provides an easy-to-install and easy-to-use self-contained development environment for MacOS X systems. It provides an instant-on local web server where you can test.
JEdit
JEdit is an open source (free) programmers' editor that runs on Windows, MacOS X, and Linux systems. It's what we use internally for our development environment. It does syntax highlighting and has various tools for making it easier to work on HTML and CSS documents (for example, it can auto-close HTML tags for you when you just type </ and it can automatically indent your HTML code).
We have also developed some macros for it (scripts that automate tedious tasks). For example, we have a JEdit macro that converts text pasted from Microsoft Word documents into HTML (including transforming special characters into HTML entities).
You are not required to use JEdit. It's just a suggestion.
Aptana Studio
Based on the Open Source Eclipse IDE (Integrated Development Environment), Aptana Studio comes in two versions, a (free) community version and a commercial version. It has plugin support for most major programming languages, including PHP, JavaScript and, even some of the popular JavaScript libraries. It seems to be a pretty good IDE for LAMP web development.
BrowserShots.org
BrowserShots.org is a free service that provides screenshots of what any given web page looks like in any one of a vast array of browsers. While it is often slow, it can be useful if you don't have appropriate facilities to test your HTML and CSS designs in all of your target browsers (all of the browsers where the design is expected to work). Keep in mind that, when you use this service, they will post screenshots of your design where anyone can see them.
WebPageTest.org
WebPageTest.org provides basic performance testing (mainly load times) for web pages. An open source PageTest desktop application is also available.
Google Labs Page Speed
Page Speed Online analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.