Harry is a self-taught web developer located in the UK. Senior UI Developer for BSkyB, he specializes in Usability, UI, UX, HTML, CSS, accessibility, web-standards and more. Besides being the author of Web Design+ and the creator of inuit.css, Harry is the owner of the industry-recognised blog CSS Wizardry, where he writes articles about best practices, progressive enhancement and typography. Harry is a member of Smashing Magazine’s Experts Panel, and proudly describes himself as a "type nerd".
You can follow his tweets @csswizardry.
Get a jsFiddle account, seriously. Since getting that ability to try things out instantly I have tinkered way, way more and built so many more cool things. If you want to get better, always tinker; if you want to tinker, make it easy to do. jsfiddle is to a front-end developer what a sketchbook is to an artist.
A PSD/PNG should be nothing more than an idea of a website. It should give clues and a direction to the build, but ultimately should not be treated as a final design. Following PSDs to the pixel will lead to ill-considered code, and code is your final product, not an image. For example, if your PSD uses three shades of very similar blue, the build should pick and honour just one. There is no point repeating similar declarations in your CSS when a happy middle-ground is more efficient, easier and quicker. A PSD is a clue, not a contract.
Classes are not semantic or unsemantic, merely sensible or insensible.
I tend to bug fix solely in Firebug and then port any changes over to my actual CSS file once I deem a bug fixed. Quite often, however, I get so far into the work that I totally forget I actually need to move the Firebug code over. I’ve actually marked bugs as complete and committed code without realising my ‘fixes’ were not actually in there. Firebug is a gift and a curse for me…
Arbitrary design changes lead to arbitrary code changes; this is how code, notably CSS, becomes heavily sprawled and messy. Make sure everything is designed for a reason and in a structured, non-arbitrary manner to ensure your code follows suit.
With the exception of STDs, things are better when shared. Get making, sharing and contributing to things; it’s the best way to learn and the best way to get yourself out there!
Always be explicit in your code. Don’t use
margin:0 if you really mean
margin-bottom:0. Every time you use shorthand you need to check that it’s not inadvertently setting (or unsetting) another value at the same time.
The pixel is no longer relevant in web design in 2012. It's all about ems, percentages and proportions. A two column layout is no longer a content and sidebar 'div' that are 600 and 200 pixels wide; it's now a two column layout where the content area is three times wider than the sidebar.
It's not always about reducing lines of code, it's often about reducing lines of repeated code...
If you can look at code you wrote 6 months ago and shudder it means you're doing something right. To learn that much in that little time is great!
Pragmatism and power > perfectionism and prettiness. Code is there to do a job, the only person who cares how pretty it is is usually, 99% of the time, you.
Every time you hard code a width or height you're making a commitment you might not necessarily want to be making. Keep things fluid and make sure a component can be picked up and dropped anywhere else on the site without having to change a thing.