Take the idea, but don't try to learn HTML and CSS from this post.
This is bad:
<div class='header'>Basic Information</div>
Don't you ever use anything like this—HTML has a nice set of dedicated header elements.
There are the cases when you need to wrap your ULs into DIVs, but most of the time
<div id='main_menu'>
<ul class=menu'>
Can be replaced by simple <ul id="main_menu">
Some CSS tips:
a) don't specify units for zero values. 0px is the same as 0em is the same as 0pt—you get the idea. So plain 0, not 0px.
b) properties that accept four values (like margin or padding) allow some shortcuts: if the only one value is specified, it is applied to all sides. If there are two values, the first is used for the top and bottom, the second for the right and left. If there are three values, the first is for the top, the second for the right and left, the third for the bottom. This often comes handy.
E.g. "margin:15px 0px 10px 0px;" can be written as "margin: 15px 0 10px;"
The easy way to remember what is the order of the four values is mnemonic TRouBLe: Top, Right, Bottom, Left.
c) If your color values look like #xxyyzz you can use short form #xyz. So #999 instead of #999999, #abc instead of #aabbcc.
hah, "TRouBLe", haven't heard that one. That's kinda useful... most mnemonics I've seen typically mean I have to remember more rather than less. Heck, about the only other one I've found useful is "roygbiv", and that's more about being pronounceable.
Any particular reason for not specifying value types on zero? As in, is there a difference in how it's interpreted? Or is it just for code style?
I've done both this and the compass too. "TRouBLe" just feels like it's in real competition in my brain for prime spot, instead of a clock (compass died out a while ago).
Programmers never start an article about web programming with "First, we're going to need a web server. No problem, though, because we can quickly whip one up using..." (Well, maybe if they use Lisp.)
Here's my Design 101: OSS web design exists (StyleShout for nice web2.0 stuff, oswd.org for the rest). Dirt freaking cheap web design exists. (themesforest.net or any of a thousand competitors.) Spend five minutes, grab something you like, get back to solving problems for customers. If you want to do something more pretty later, you can always pay a real designer and then tweak the view layer a bit.
Most themes available seems to be for blog/CMS style sites, but most of my work are semi-internal CRUD apps. Any recommendations for themes suitable for this?
Totally not compensated for this mention: ~$15 will buy you any of a few dozen great CRUD themes from ThemeForest. Again, you're an engineer -- $15 is less time than it even takes to read the linked article. http://themeforest.net/searches?term=admin&type=files
I highly recommend The Non-Designer’s Design Book by Robin Williams for all non-designers out there.
It goes through basic stuff which is important to pay attention to when “presenting information” (designing) such as proportions, whitespace, alignment, repetition, etc. Also basic stuff about using different fonts.
Just nabbed it from my library. Excellent looking book after a quick skim-through, it explains a lot of the reasoning behind design choices and their effects, something most design books either lack or are weak in. Or assume a higher level of knowledge of art concepts / terms.
The "no defaults" rule is super important. It gets you out of the habit of just leaving stuff as-is, and into the habit of making design decisions. That's all design really is: A series of decisions. If you're not making them, you're not designing.
On the other hand your users will lose flexibility and choice if you force some property. If you are unsure of your design, why not follow the users preference then instead of forcing something you guess looks nice. Specifying serif/sans-serif is always somewhat ok, but I don't see the need to be more specific.
edit: what I meant was if you aren't going to put any thought on actually selecting some nice font then I don't see any point in specifying some generic fonts (like arial/verdana in the example) just to not use the default. You end up looking generic anyways, but when using default fonts (serif/sans-serif), then you look at least the way your users prefer.
edit2: bit unrelated; I noticed that the example specifies font-size(and other properties) in pixels (px). I'd think that's bad practice, as I try to promote resolution independence.
I'll generally agree, as I like my preferences followed, and I'll generally disagree, as truly good design hinges specifically on many minor things like that. Not that other setups wouldn't work better, or that there aren't equivalently effective styles that are entirely different, just that minutia really adds up in a really polished product. If generic / "just" functional is truly your goal, then yes, I like serif / sans-serif too, but the defaults on some systems just don't read well, and a lot of people don't know how to change them.
Yeah, I know, I'm being contradictory no matter how you look at it. There's no "happy medium" in this, though, everything sacrifices something.
@edit2: same here. Especially as it only specifies the height of the font, and different fonts could easily take up more or fewer lines, breaking rigid constructions at least as severely as different heights. I think a lot of it comes from designers largely working in pixels, and slicing images to be recreated as a relatively static website. Many artistic people are quite bound by physical medium, which can't stretch like a website can. Add to that the hideousness of earlier IE versions, and browser incompatibilities, and static, pixel-based formats make life easier for a lot of people, despite being technically inferior in a lot of cases.
edit: oh, and slightly unrelated (though on the site), I despise different colors on text links, unless ALL links are clearly links (like this site). They break up my quick-parsing of a document, and I read too much to waste more time than necessary (curse you, hacker news! You've devoured my life!). Of course, this is controllable by me through a user stylesheet, but some sites get it right, so I don't want to break those...
The point in specifying fonts that you might consider "generic" is visual consistency. Different fonts end up being very different on the screen, and, as a designer, your goal is to make your site look good across browsers and operating systems. If you have no way of knowing what fonts they're using it is very difficult to do that.
Plus, the number of people who actually change their web browser font defaults is vanishingly small.
Also, absolute font size specification used to be bad practice because browsers couldn't zoom very well. Now that all modern browsers (including IE7) have good full-page zooming it doesn't matter, and using exact pixels allow you to avoid browser rounding inconsistencies.
There are the cases when you need to wrap your ULs into DIVs, but most of the time
Can be replaced by simple <ul id="main_menu">Some CSS tips:
a) don't specify units for zero values. 0px is the same as 0em is the same as 0pt—you get the idea. So plain 0, not 0px.
b) properties that accept four values (like margin or padding) allow some shortcuts: if the only one value is specified, it is applied to all sides. If there are two values, the first is used for the top and bottom, the second for the right and left. If there are three values, the first is for the top, the second for the right and left, the third for the bottom. This often comes handy. E.g. "margin:15px 0px 10px 0px;" can be written as "margin: 15px 0 10px;"
The easy way to remember what is the order of the four values is mnemonic TRouBLe: Top, Right, Bottom, Left.
c) If your color values look like #xxyyzz you can use short form #xyz. So #999 instead of #999999, #abc instead of #aabbcc.