How To Code A Simple Website From Scratch Part 1: Preparing the Design
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
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
This series makes a nice follow on from yesterday’s post.
I agree with writing all this info down. I like to do any coding with a small A5 notebook by my side or at the very least a sheet of A4 paper.
Interested as to why you opted for 1023px as opposed to 1024?
Honestly I just threw the mockup together and 1023 was what the container came out to be
I was only 1px off! mwhaha…normally I wouldn’t do it any larger than 950, still a lot of people using 1024 resolutions.
Well as long as it wasn’t intentional
Personally, I go for either 960px, 972px or 984px if I’m doing a fixed width site for 1024×768 and above.
The preliminary step is aim to maintain the site simple, understandable and translucent to attract visitors going in to your page and so bringing them closer to buying a product.
Nice post Amber. I am going to enjoy reading this series.
I have jotted notes to myself as I started designing a site, but not as detailed as you showed. I am going to try that next time since like you I get tired of switching back and forth to Photoshop.
I would still go as low as 800px width still for some sites because of the high use of 1024X768 and so many people do not have their browser opened full page.
@ Keith, Thanks for the comment, please let me know if you enjoyed it; I’m never sure if my tutorials explain enough – or too much
I am transitioning into webdevelopment from elearning flash course development.
I followed most of your tutorial but got lost on the css part. Not sure where which code should go (in a css file, which part, what should be commented out) It would great if you provide a finished css file so I can compare mine to. Yes, i know how to load style sheets into .html files,
but I became quite confused.