Learning standards-based HTML & CSS

November 20, 2009 FILED TO: Web Design

istock_000004333554xsmall A couple of people have asked me recently how I create clean markup so quickly. I don’t find it particularly hard, I do it by hand in a systematic manner. But I have a lot of learning behind me that I apply. So, in this blog I reveal my process as well as a few of the resources I have learned from along the way.

My markup is far from perfect but I strive to create HTML & CSS that:

passes validation (using the Strict DOCTYPE whenever possible);
completely separates markup from styling;
Is table-free (except for proper tables of data)
reuses styles as much as possible;
gracefully degrades in older browsers / without a stylesheet / without images;
matches the graphic design as closely as possible (I’ve had some very fussy clients!)
works in all modern browsers

So, what do you need to learn and what steps do you need to follow to be able to do this? I learned the basics of HTML and javascript at University in the late 90’s as part of a Computer Science course. Things have changed a lot since then, thankfully you can now learn a lot of this online if you have the motivation and basic understanding of computers.

Here’s what you need to learn:

HTML 4.0 markup – the best place to start is W3Schools. Make sure you learn what conforms to the Strict (or at least the Transitional) DOCTYPE
CSS – again, start with W3Schools
Once you know the syntax of HTML and CSS, learn how to apply them to modern designs – read Bulletproof Web Design, The Zen of CSS Design and The Principles of Beautiful Web Design for starters
Learn about the browser bugs and deficiencies you will have to work around and the standard work-arounds for these – start with Position is Everything and A List Apart
Learn how to use Photoshop or similar graphical tool (though it is expensive, Photoshop is the best and most widely-used design tool) – in particular turning layers on and off, cutting out certain areas, exporting images for the web
Learn how to “debug” your design. I use Firebug, which is a Firefox plugin, to see why things are going wrong, which styles are being applied, etc.
If you want to learn Javascript for interactivity, again begin with the W3Schools but also check out Javascript libraries such as Prototype, JQuery, and MooTools. DynamicDrive has some handy scripts you can learn from.

Forget using Frontpage or any other such tool; good, clean markup can only be written by hand. Software that allows you to write code by hand but gives you handy tools like auto-completion, built-in browser, extended search and replace and file management is ideal. Graphical tools will only destroy your carefully crafted markup. I use Coda, which is perfect for my needs.

You may like to explore using a reset stylesheet. These provide a neutral base for all browsers for all the styles by removing annoying default styles such as borders, padding and margin. There are a number of reset.css files available online for free download.

Here is a rough order in which I begin building a site:

I start with my own template – which already has header markup, basic css files (reset.css, styles.css and iebugfix.css), and a basic structure – and open it up in Coda
Then I open the design in Photoshop (usually provided to me by designers, sometimes created by me) and decide on how I am going to structure the page, what I need to cut out as backgrounds, what can be done with CSS, etc.
I move back to Coda and start marking up the page, starting with the basic structure and then moving from top to bottom, cutting out images and styling the CSS as I go. I frequently check how I’m going using Coda’s built-in browser and if something isn’t going right, I then move to Firefox and use Firebug to help me fix it.
Once the HTML and CSS (and often, Javascript) are completed, I then check the page in Internet Explorer 7. IE7 is less forgiving than Firefox so anything you fix here (except for known bugs) will help with other browsers.
When the site works in Safari, Firefox and Internet Explorer 7, I then move to testing it in Internet Explorer 6 (if I’ve been asked to support IE6, which is not always). Usually this is a matter of addressing which IE6 bug I’ve triggered and then applying the known fix to the ie6bugfix.css file. Sometimes, unfortunately, it’s much harder than this.
If I then need to create additional pages in the same style, I take a copy of the first page and reuse whatever styles I can, creating new styles where necessary, and occasionally checking back that I haven’t broken anything in the first page. And so on…
As a final check on pages, I run them through the W3C validators. This usually picks up semantic typos.

What then happens depends on who or what I’m creating the markup for. Sometimes I add SEO (Search Engine Optimisation) and publish the site, other times I turn it into a Wordpress template, still other I send to developers to have programming code inserted into them.

I keep as up-to-date as I can with new browsers, changes to standards, new methods and bugfixes by reading a variety of blogs and e-zines. Here is a small sample of these:

If you’re a budding young web developer, I hope this post is of help. Feel free to post questions as comments.