Website Creation: STEP 2 – Code

JekkilekkiStep 2 – Code

This is the 3rd part of a 4-part look at my website creation process. Here I will present a list of the Code steps I generally take as I progress through any website creation effort. Hope you enjoy my list!


  1. Gather Information – If not already done so in the steps leading up to this point, make note of everything used in the website design. Record typography, colors, backgrounds, sizes, links, headings, body text, and so on -> into a text file for future (quick) reference.
  2. Site Details – Collect details for the site in another (client) file (probably Spreadsheet). Things like site address, username, password, contact info, and so on -> if not already done so.

2. Image Slicing

  1. Slice and Optimize JPGs – Open PSDs in Photoshop and use the Slice tool to slice up the main images to use. Do this for ALL pages in the web design. Save and “Optimize for Web.”
  2. Create PNGs – Some images require transparency, so copy those into a new file, crop the image size appropriately (for each individual image), then Save and “Optimize for Web.”
  3. Images folder – Collect all images into one “images” or “img” folder and rename appropriately.

3. CSS

  1. Layout – Begin with laying out the most basic and largest elements first, declaring widths and styles for page elements, columns, and all text, links, images, and so on.
  2. More Specific Elements – Continue coding CSS into the more specific elements needed, logo, special images and classes, etc.
  3. Page Specific Elements – Working together with the XHTML for each individual page, code up page specific elements (videos, image galleries, etc) and comment appropriately.
  4. Form Specifics – I generally leave form style for last after the majority of the other necessary parts are finished. Code all form styles and comment.
  5. Validate – Check the validity of the code on W3C’s Valid CSS Checker website. Adjust and improve code accordingly.


  1. Header – Code the header, DOCTYPE, JavaScript, CSS, and other imports -> all header code goes first especially CSS unless elements are added later.
  2. Home Page – Code the home page, menus, all text on the page (mostly copy and paste the text -> but code the classes and IDs for CSS to use when styling).
  3. Make Template – To save time for additional pages, I can delete (or simply not add) the body text for the Home Page, and save the file with all the divs, classes, and IDs coded as a “template page” for later use.
  4. Additional Pages – Using the template, code ALL additional pages (unless going straight into CMS). Adjust with CSS code accordingly
  5. Validate – Check the validity of the code on W3C’s Valid XHTML Checker website. Adjust and improve code accordingly.

5. JavaScript

  1. Search – If any additional JavaScript is needed for menus, galleries, etc, find, download and utilize what is needed if possible.
  2. Code – If I can’t find pre-existing JavaScript I need, I’ll probably have to code it by hand, or adjust a similar piece of code to fit my needs.

6. CMS

  1. Local Install – Need to have existing CMSs locally installed in order to work with them. XAMPP is a good way to do it.
  2. WordPress – If needed for a blog site, WordPress is a great idea, simple yet versatile for a blog. In order to fit the website theme, adjustments will be needed. Find a pre-existing similar theme, download it and customize the CSS using my currently coded site’s theme and CSS.
  3. Joomla – For a larger site, I’m familiar with Joomla. Same idea, download, install, and customize a theme according to a similar pre-existing theme.
  4. Code by Hand – Another (more time-consuming) option is to code it all by hand. Of course, assuming the CSS and XHTML pages already exist for some of the site, coding by hand should take a lot less time -> mostly just adjustments need to be made to change XHTML to PHP and adjust the CSS accordingly.
  5. Validate – Check the validity of the code on W3C’s Valid XHTML Checker website and W3C’s Valid CSS Checker website. Adjust and improve code accordingly.

Finally 2/3 of the way there. This part of the process also usually takes a minimum of one week (sometimes even up to one month).

<– Go back to part 2:Design

Continue to part 4: Testing and Maintenance –>

What about you?

I’m still learning, and working to improve my speed and skills with web design. Is there anything here you particularly agreed with or found helpful? Or anything you disagreed with? Or perhaps you have additional tips to help improve the website creation process as a whole? Please leave me a comment!

6 Responses to “Website Creation: STEP 2 – Code”

  1. And Here I Thought IE 6 was Broken « Aaron Snowberger’s Home Abroad Says:

    […] over these past few months. Every time I make a website, I have a process: from design, to code, and finally to fixing my code (particularly for IE). Wouldn’t it be great if just for once […]

  2. Web Design Nepal Says:

    The IE6 is really annoying for us because it creates many problems without any cause.

  3. Web Designer Hong Kong Says:

    IE are different than Firefox. We have to check own sites more with IE than with Firefox.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: