After recently finishing HTML and CSS and briefly looking into JavaScript, I followed a tutorial and built the page below. (This is the original design.)

I encountered some problems; for example, some rounded-corner buttons in the tutorial were implemented using a three-layer nested structure like <ahref=''><strong><span>HOME</span></strong></a>, with a background image set for each tag. This felt like more trouble than it was worth, when it could be achieved entirely with border-radius and a tiled background, resulting in simpler, cleaner code that also adheres to HTML’s semantic principles: Just <a>HOME</a>, and then simply setting a{border-radius:5px} in CSS. The implementation looks like this:

Another problem was the background of the main content area of the page, which was a white image with rounded corners and a shadow effect. The tutorial again used three sliced images combined with a three-layer HTML nesting to achieve this. In reality, this could also be done much more simply by using a rounded border, a white background, and then setting a shadow effect.

#Content{
background:#fff;
box-shadow:0 3px 5px#e4e4e4;
border-radius:25px25px 0 0;
}

The result is shown below:

However, there’s one problem with these solutions mentioned above: they all utilize new features from CSS3. Their effectiveness will be significantly reduced in older browsers, so it’s important to consider the requirements before deciding which method to use. Finally, here’s the screenshot of the finished page. Compared to the very first image, I think it looks pretty good.