Build HTML/CSS pages or components from the ground up

When building HTML/CSS pages or components, I usually follow specific steps in order to keep my code clean and concise. The trick is to start with the base foundation and then slowly drill your way down to the very smallest inline element. These steps aren’t set in stone of course, and I often mix things up due to extenuating circumstances.

1. Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
2. Start applying structural styles first to get the basic layout worked out.
3. Apply any background images on the high level structural elements and/or body.
4. Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
5. Apply final colors and finish any fine-tuning

Also, don’t forget to test in all supported browsers after each step.

Tags: Code, CSS, HTML
Filed under: CSS, Code, HTML by Erik Phipps