I thought it would be helpful to some of our beginning XHTML/CSS coders (and some seasoned ones who need to brush up) to show how I code a website from beginning to end. We’ll do this in a 3 part series; Part 1: Preparing the Design, Part 2: The HTML and Part 3: The CSS. I’ll show you a quick way to code every one of your websites, including validation and slicing of the design itself.
Start With The Design
We’ll use a simple, basic web layout for our coding purposes:
As you can see (you can click it to enlarge to full size) this is a typical 2 column web layout with a basic header, logo, navigation and footer.
Figure Out Your Containers
Before we can start slicing, we need to figure out the containers (and sizes) for the website. For a layout like this, we’ll have a:
- Header
- Navigation
- Left Column
- Right Column
- Footer
The main divisions of the site will typically look like:
Time for Slicing & Sizing
Now that we’ve figured out our basic sections (this makes it easier later on when we’re coding), it’s time to slice the image up and note down on a piece of paper all the dimensions. Since this site is all flat colors, we will NOT save them as an image.
First you need to find out the entire container size of our design. Our example has a container size of 1023px:
Now, if this was an actual design, we would proceed to cut out all the needed images. For the sample, however, we’ll just figure out our sizes for all the containers we mentioned above. Also, now is the time to take note of ALL styling elements. Write down your font sizes for each div, background colors, font colors, h tags, link properties, etc. This sample site’s information would look like:
- Body Bkg: #aeaeae
- Header: 1023×162, bkg: #e7e6e6
- Logo: logo.jpg 298×90
- Nav: 1023×45 bkg: #a5a3a3 link: #FFF, 16px, uppercase, no underline
- Left Column: 780 (no height, we’ll make it fluid) bkg: #f2efef font: 12px #000 h1: 30px
- Right Column: 243 bkg: #cecdcd h2: 24px font: 12px #000
- Footer: 1023×40 bkg #515050 font: #FFF 12px
Writing all this information down may seem like a waste of time, but I’ve found it’s actually speeded up my coding quite a lot. I no longer have to switch from my code program to Photoshop multiple times, just to find the size of something; it’s all written down for quick access. Try doing it this way, and you’ll quickly notice a difference.
Now that we have all of our elements in place, we’re ready to begin the HTML! I recommend coding your HTML before your CSS as this tends to be quicker and reduces the amount of clutter (because the site skeleton is built before the style).
Stay tuned tomorrow for How To Code A Simple Website From Scratch Part Two: The HTML
All “How To Code A Simple Website From Scratch” steps:
How To Code A Simple Website From Scratch Part 1: Preparing the Design
How To Code A Simple Website From Scratch Part 2: Beginning the HTML
How To Code A Simple Website From Scratch Part 3: HTML Layouts
How To Code A Simple Website From Scratch Part 4: Fancy CSS


