Lifecode

This is a pretty basic document I coded yesterday night. Basically this is a Web Design homework and the deadline is tomorrow morning. Yes I know it’s easy, but for the sake of the people curious about it, or those who are still starting with web design, I posted this.

HTML Version

In the past few days, while thinking about this, I decided to code this in HTML5 + CSS + JS. But then, because this is just a homework, and to be passed via e-mail, JS + HTML5 won’t be good.

First, because JS won’t automatically be executed locally, which destroys the first impression. I really wanted to do this in JS to add interactivity. Like, answering the crossword puzzle before revealing the answers, or have a button that will reveal the answers right away.

Second, some HTML5 tags will not work on older browsers, and only up-to-date and modern browsers can interpret its new tags. But if you would think, I only have one audience, my instructor. Well the problem is, if the code fails, my grade will fail too. I do not want to risk that, but anyway, XHTML 1.0 works just fine.

Style

I’m a minimalist, I like things simple, and for this one I sticked to one sans font. White background color, and gray text. Here’s the body style:

body {
	font-family: Arial, Helvetica, Verdana, sans;
	font-size: 1em;
	color: #666;
	background-color: #fff;
}

And yeah, for the table and data, I used the same color scheme.

#crosstable {
	margin: 0 auto 0 auto;
	border: 3px solid #666;
}

#crosstable td {
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-spacing: 0;
	padding: 5px 5px 5x 5px;
}

The tricky part is the superscript in the cells. It took me some time to remember all about negative margins. Well anyway, it went well.

#crosstable td sup {
	padding: -5px;
	vertical-align: super;
	font-size: 0.5em;
	position: relative;
	top: -6px;
	left: -7px;
	font-weight: normal;
	margin-right: -0.5em;
}

Output

Of course I’ll show it to you. Besides, I already e-mailed my instructor with a zip archive containing the HTML file and the CSS file. See it here.

Validation

The document is valid XHTML 1.0 Strict. You can see for yourself: Click Here.