Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

I am a beginning programmer and I really want to have good habits and practices. I have yet to slice up a PSD and code it. Is this a bad practice? I have heard it creates bad code that had to be fixed anyway so why do it? I want to create clean code even if it takes longer. Just wondering if it is as bad as I have heard. Are there advantages to doing it this way? Thanks.

share|improve this question
It would take you all of 5 minutes to slice up an image and draw your own conclusions. –  Joe Internet Nov 30 '11 at 4:07

2 Answers 2

I think you may be remembering that slicing it and auto-generating the code for it will make bad code. Slicing an image is no problem, though you will be better off just using the images and coding the main template yourself.

Over time, you may find that you work with many images, slicing bits and pieces as needed, and integrate them into the site, rather than making it from one large image. This will be a natural progression as you begin to "think" in terms of web development/design rather than graphical design programs (if you go that way), and the graphical software will become only part of your toolset.

That said, plan to spend a lot of time learning HTML/CSS as you begin coding your images into a site, and be sure to read up on best practices for design.

share|improve this answer
Do you slice and code? Is this what pros do? –  Midtone Nov 30 '11 at 0:53
@Graham - The "pros" do what is most effective for them. If I have an image to start from I will slice it up (usually several times as I try different things looking for the best effect). If I have a page to start from I will get it formatted generally how I think I want then take a screen shot and build the images inside that screen shot. This method takes longer but usually I get what I wanted the first time. –  Chad Nov 30 '11 at 15:49

Slicing out images and coding the HTML/CSS should be done as separate things. You just get more fine grained control by producing web pages this way, and it makes more sense for following good standards for web coding. You don't have to wait until every last line of code is complete to start adding images, but at least get a rough (lacking finer details) layout finished.

Starting out by coding the page comes with practice, and you should get familiar with the CSS box model. Then it's easier to visualize almost any page design in terms of content blocks with specific margins and padded areas.

Box model

There are some exceptions where padding and margins won't help much in image-heavy designs such as busy landing pages, but organizing the parts of the page still require you to think within the restrictions of CSS and getting the look right with the least amount of complexity.

When I get a PSD from a designer, if it has guides for slicing, I simply use the guides to help me "rough out" the larger details of the layout. If there are no guides, I figure out how it can be divided into logical areas and pre-fill a CSS file with selectors for those areas. Smaller details get added in later, after the larger elements are in place.

Using Photoshop's ruler or selection tool helps me get the dimensions of an area from the Info box, and I enter those attributes into the CSS file. So it's very possible to write HTML and CSS code long before the first image is introduced into the page. It's all a matter of knowing how to visualize page elements, and more importantly using the best CSS approaches to aligning and organizing the elements.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.