Out of curiosity after a psd image is created, where do you like to start? I haven’t done a ton of sites and I always find myself starting differently. Laying out containers, or buttons , nav bars, I guess I never start fresh it is always off of the last and start changing around. I do CSS sites but I often cheat and see the last layout as a good start for the next. But then I have tons of CSS that I don’t use and don’t want to get rid of because it might be holding something in place or something. Like I say I am new to the process.
How do most of you start ( those of you who don’t speak code as a second language)? Maybe a basic templet?
I think overall page structure is the best place to start. Look over your graphic mockup and look closely at how you can describe the areas as semantically as possible. Are you going to need a page wrap? Is there a header section? main navigation? main content area? sidebars? footer? Then try to write the HTML for those things first, then worry about the details.
I start with the absolute most basic page structure before I do anything else. I don’t do any styling at all until I have the underlying structure completely nailed down.
Start off with a very clean, defined, and organized structure, and it’ll be MUCH easier to make large-scale changes further down the road. I’ve learned this through a lot of trial and error, where my initial structure only worked within a very limited scope because I didn’t consider any future changes.
For example, say you’re designing a site and it has five main navigation items. Don’t assume that the site is only ever going to have five, and then base your site structure on that assumption. If at some point in the future you suddenly need to have eight, then you’re stuck. You’ll have two choices: attempt to rework your whole structure to fit in the extra items (which is time consuming and will make your code really messy), or scrap the whole thing and rewrite it (which is easier, but it also means you just wasted a ton of time writing code you’re not going to use anymore).
Flexibility and scalability are key! Once you’re sure your structure can handle those issues, then go ahead and start styling everything.