Web Design & Development Links

Web Development Sites & Magazines

• A List Apart Magazine — web design, standards & best practices
• BrainJar.com — technical articles, tutorials and examples of programming for the web
• Elated.com — web design and development tutorials, articles, templates and forums
• Elizabeth Castro’s Web Site — author of HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide
• HTML Dog — a best practice guide to XHTML and CSS
• MSDN Library — information for developers using Microsoft tools & products
• The Non-Designer’s Design Book — design help from design instructor Robin Williams
• Quackit.com — complete list of HTML tags and CSS properties, tutorials
• Speckyboy — web & graphic design resource magazine
• Stopdesign — on web design & typography, from Douglas Bowman
• W3Schools — free tutorials in all web development technologies
• Web Standards Project — grassroots coalition fighting for standards
• Web-Source.net — guide to professional web site design and development
• World Wide Web Consortium (W3C) —  web standards & documentation

Coding

(X)HTML

• XHTML Basic 1.1 Cheat Sheet — W3C, with elements and attributes table
• Absolute vs. Relative Paths/Links — Coffee Cup

CSS

• CSS Id and Class — W3 Schools
• CSS Syntax — W3 Schools
• CSS-Tricks — Chris Coyier
• css Zen Garden The Beauty in CSS Design — examples of style sheet design
• Horizontal Drop Down Menu with CSS — dreamweavertutorial.co.uk
• Three Ways to Insert CSS — W3 Schools
• What’s new in CSS3 — CSS3.info
• WC3 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
• WWW3 Full property table

Layout & Design

Layout

• The Box Model — W3 Schools

Fonts & Typography

• Common fonts to all versions of Windows & Mac equivalents — AMPsoft
• Font guide for webmasters — includes a useful table
• Lorem Ipsum — place holder text for testing layouts/fonts
• Typography of the Web — one of several similar blog posts by Andy Mangold

Software

FTP Clients

• FileZilla (Mac)
• FireFTP: FireFox add-on
• FUGU (Mac)

Image Editors

• GIMP — downloadable multi-OS image editor
• iZoom — free downloadable image editor for Mac OS
• Picnik — online browser-based image editor
• Pixenate — online browser-based image editor
• Snipshot — online browser-based image editor
• Splashup — online browser-based image editor

Text Editors

• BBEdit — professional HTML and text editor for Mac
• HTML Kit — full-featured website editor for Windows
• NotePad ++ (PC)
• Text Wrangler (Mac)
• TextMate (Mac)
• TextPad (PC)

Colours

• Adobe Kuler — try out, create, save and share colour schemes
• cloford.com 500+ named colours
• color-hex.com — generates a simple css code for the selected color
• ColorSchemer Gallery — browse, create & share colour schemes
• Color Scheme Designer — create colour schemes
• Hexidecimal Color Chart — W3 Schools
• MSDN Colors by Lightness — the named colors, sorted by lightness
• VisCheck – colour blindness check
• WC3 HTML Colour Names — the 147 named colours
• WebSource.net color chart, codes, hexadecimal rgb values — 216 colours
• Wikipedia List of Colors — comprehensive list of colors with names & hex values
• Yaelf Names of Colours — 191 named colours with full page interactive examples

Images

• CMotion Image Gallery
• Issuu – Magazine Flip Tool
• Javascfript Kit – Animated Slide Show
• Photos as Web Content — Jakob Nielsen
• ShadowBox

Image Sources

• 18 More Free Stock Photo Sites – Digital Image Magazine
• 25 Free Stock Photo Sites – Digital Image Magazine
• Big Stock Photos
• ClipArt.com
• EveryStockPhoto
• flickr
• Google Images
• iStockPhoto
• Photos.com
• Pics4Learning
• Multimedia Library
• Stock.XCHNG
• Wikimedia Commons

Tools

Code Validators

• Unicorn – W3C’s Unified Validator — for CSS and (X)HTML
• W3C Markup Validation Service — check the markup (HTML, XHTML, …) of Web documents
• WC3 CSS Validation Service — check CSS and (X)HTML documents with style sheets

Data Storage

• Dropbox.com
• SugarSync

Favicons

• www.getfavicon.org — get the favicon from any web page
• favicon.ico Generator — browse, make and share favicons

Optimization & Analysis

• Google Analytics — web traffic analysis tool
• Google Website Optimizer

Proposal Writing

• Useful Web Design Proposal Resources, Tools and Apps — Speckyboy
• Bidsketch —  web design proposal software & customer relationship management tool

Scripts

• CMotion Image Gallery
• Cut & Paste Random Transitions Slideshow — JavaScript Kit
• ECM – Anti-span mailto generator
• Javascfript Kit – Animated Slide Show

Web Browsers & Search Engines

• Apple Safari
• Google Chrome
• Microsoft Internet Explorer
• Mozilla FireFox
• Opera
• Search Engine Relationship Chart

Advertisement

---