Step 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!
- 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.
- 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
- 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.”
- 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.”
- Images folder – Collect all images into one “images” or “img” folder and rename appropriately.
- 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.
- More Specific Elements – Continue coding CSS into the more specific elements needed, logo, special images and classes, etc.
- Page Specific Elements – Working together with the XHTML for each individual page, code up page specific elements (videos, image galleries, etc) and comment appropriately.
- 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.
- Validate – Check the validity of the code on W3C’s Valid CSS Checker website. Adjust and improve code accordingly.
- 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).
- 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.
- Additional Pages – Using the template, code ALL additional pages (unless going straight into CMS). Adjust with CSS code accordingly
- Validate – Check the validity of the code on W3C’s Valid XHTML Checker website. Adjust and improve code accordingly.
- Local Install – Need to have existing CMSs locally installed in order to work with them. XAMPP is a good way to do it.
- 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.
- 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.
- 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.
- 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).
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!