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.

Comments:

From: Naomi Oak, Sun Nov 11 11:58 2012
Thank you for having such a useful page. I'm a tutor and one of my students and I came across your Eco Consulting web site's training resources page when we were researching graphic and web design resources, a topic she's interested in, while practicing and improving her researching skills. Your page has great resources that my student will learn a lot from while exploring the page.

I also want to recommend an article that we found with information and resources about graphic design. My student thinks that the article would be a great additional design related resource on your web site's training resources page and asked me to send it to you. I thought this could also be a great opportunity to teach her, and some of the other students I tutor, about the importance of sharing information with others.

Add a comment…

Comments (2000 characters/300 word limit) appear after approval. Add your email if you'd like a reply (it can be entered safely and won't be published, stored or spammed).

Name:
Email (optional):
Comment: