Eco Consulting likes to spread good practice in web design and code, and delivers training in (X)HTML and CSS, complemented by general web technology 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-radiusproperty 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
:afterpseudo-elements, with some sneaky border hacking, can be used to generate nice-looking tooltips.
- Animated perspective in pure CSS
- With the CSS3 properties
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
- 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
- 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
- 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.
- 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.
- 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.
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).