Articles & resources

Eco Consulting likes to spread good practice in web design and code, and can deliver training in web technologies, complemented by general overviews and guides. We combine patience for the beginner's learning curve (or anyone upgrading their skills) with specialist expertise.

These public articles and examples aim to help anyone wanting to code (client-side) more intelligently, as well as experienced web designers making the transition to code or looking for a simple example. Please respect authorship by providing a reference if you quote or link to anything here.

CSS demos and examples

Make a menu with pure CSS circles: The CSS3 border-radius property can be given a 50% value to make perfect resizable circles. Add a subtle CSS3 glow transition to complete the effect.
Pure CSS tooltips: The CSS :before and :after pseudo-elements, with some sneaky border hacking, can be used to generate nice-looking tooltips.
Animated perspective in pure CSS: With the CSS3 properties perspective, transition and transform, smooth perspective transitions are possible.
Flicker-free CSS rollovers: For non-flicker CSS rollover, don't swap images on :hover - it can cause problems with Internet Explorer and forces an image load. Use this 'conceal and reveal' technique instead.

Articles/examples on web coding

Tetris for mobile: Made from a tutorial, using web technologies for mobile development. If you have an iOS device, save to home screen and use like an app.
Javascript wrinkles: Notes made on the Javascript journey—at least, things I think will be useful to others on the same journey.
JQuery+javascript show/hide toggle with changing link text: You often see 'show article' links using JQuery .toggle, but without changing the link to 'hide', so this (imperfect) version does that.
Build a website using nanoc on OS X: Several mini-frameworks exist that enable you to create websites from templates and text files, and nanoc is one of the best.
Install MongoDB on OS X: A clearer, minimal version of the MongoDB 'quickstart' for OS X.
An HTML5 example page: Here's a page using HTML5 elements styled with CSS. Not rocket science (or brain surgery), but useful as a starting point.
Use SSI to create CSS variables: Apache's Server-Side Includes mean you can (e.g.) store all your CSS colours in one file and change every instance throughout all your stylesheets.
Introducing semantic HTML markup (needs updating for HTML5): learn how to make well-structured and semantically marked-up body text, and improve the structure of your pages for accessibility, search engines and data harvesting.

A book, some websites and software

Currently, these are a few resources I would recommend for learning to actually build websites with HTML, CSS and Javascript:

Transcending CSS: The Fine Art of Web Design: This book stops you worrying about how sites appear in various browsers and eases you into using well-structured, semantic HTML and the full range of CSS possibilities. It outlines the kind of web code we should all be implementing now.
Team TreeHouse: An excellent UK-based site with just about everything you need to know about building websites, and an intro to mobile coding for iOS. I used to recommend Web Design From Scratch but it seems a little cluttered now, although there are still some good tutorials there.
Code Academy: 2012 is Code Year, and Code Academy offers step-by-step tutorials based on Javascript, a great introduction to learning such things as variables, functions, conditional statements and the like.
Basic guide to web design: This page of useful links was kindly suggested by a visitor. One or two links have outdated information on tables and some of the tutorials use capital HTML tags (which developers now avoid), and the font links don't mention @font-face or Google web fonts, but it's not too bad as a starting point.
Coda: Hand-coding is the best way to learn (fewer frustrations and more control than visual editors), and Coda fits the job. Everything is in one place: advanced text editor, visual style sheet editor, page previews, ftp, command-line shell, plus online reference works. You can store all your sites' settings and code/upload from one application; you don't need much else (see this review). Sadly Mac OS X-only, but for Windows there's the excellent EditPlus.

Other resources

Free and open source tools: Some of the best software and online resources remain free (or free at a usable entry level), and there are excellent and compatible alternatives to the big software names. These selected links were used in a workshop Tools for online collaboration and management at the Cii conference, Leicester, 6 Dec 2007.
Getting started with Django (old version): Django is a Python web framework (like Ruby on Rails or Perl's Catalyst). If MVC or framework mean nothing to you, read this article on web frameworks.
Web designers and web developers: An article written for PerlBuzz that asks 'Why do designers fail to adopt Perl?' but goes into the 'designers v developers' issue, frameworks, templates, and why things should - and sometimes aren't - separated.