Web Design (and development) Links

1. CSS & JS Examples
2. Basic tutorials
3. Design
4. Cheat Sheets
5. Tools

Examples

Most of these were developed as teaching illustrations or for specific projects:: they may need adaptation to suit particular uses. Each is a working example with description of how to use it.

• How to make "active footnotes"
• How to make pop-up tool-tips
• the @media style sheet tag - how to have a different appearance on screen vs when printed
• auto re-direct: example of how to make a web page automatically move to another page a set time after it loads.
• Using alert, confirm and prompt in JavaScript
• Using setTimeout() to control timings and reveal rendering changes.
• How to generate (pseudo) random numbers
• Reverse email - hiding your email address from spammers while showing it properly to your readers.
• JavaScript version checker.
• Image Resize - example of a mouse click or a rollover making an image expand, overlaying the surrounding text so as not to disturb the layout.
• Colour depth and file formats illustrations.
• CSS position fixed
• Event bubbling and how to stop it.

The bad stuff

• http://www.webpagesthatsuck.com/

Design

• OSWD Free design ideas for web pages
• A List Apart "for people who make web pages"
• Colours
  • Colour scheme designer (its in Polish, but you'll manage)
  • Color schemer II. You choose a colour, it shows a set of associated colours and lets to tune the brightness.
• The Lost Museum - design
• How Do Disabled People Use Computers? Old but an interesting overview of the language we use as much as the problems of accessible design.
• Assistive technology devices: How disabled people use the web from SCOPE

Tutorials and Cheat Sheets

HTML and CSS

HTML tutorial from W3C.Clear and precise. Also has one of the most comprehensive reference resources and similar material for JavaScript, CSS and more .

HTML cheat sheet. Quick reference.

Cheat Sheet Roundup - Over 30 Cheatsheets for developers lists lots