Colored boxes - Introduction
We will start with a basic graphic mockup and convert it into a working (x)html page. The aim is not to focus on this particular example, but the overall process used.
Some guidelines before starting:
Build one step at a time and test each step across a range of browsers
It is quite easy to start building a layout and come to a problem half way through. To avoid this, try building your layout in small steps and test each step across a range of browsers. This means you can see exactly how the layout is progressing and there is no need for backtracking if you run into problems.
Build for modern browsers then work backwards
It is better to start by building for standards-compliant browsers and then do work-arounds such as hiding (via @import) for older browsers.
When building and testing, use CSS in the head of the document
It is much easier to start building your layouts with the CSS in the head of the document - it is faster, and avoids caching issues. When you have completely finished the layout, the CSS can be removed and placed into external style sheets.
Validate your HTML code and CSS
Validate your HTML and CSS frequently. Many layouts problems can be fixed with a quick validation check.
