After looking through the comments I see that several people made comments about how your code could have been done better and some were even a bit pushy and insisting that you’ve done something terribly wrong. My questions to THEM are…

1) If you think you are an expert coder then why are you doing a beginner tutorial on coding?

2) And if you insist on telling people how wrong they are then why don’t you create a tutorial yourself explaining to all of us “beginners” how to apparently do it the “correct” way?

As a designer who sub-contracts her coding work, I felt really confident that I could code a simple website layout after I went through this tutorial. THEN I read through the comments and now I have more questions than anything.

So frustrating. However, I do really appreciate your time and effort in writing up this tutorial. You have helped me quite a bit. Thanks!

Finally, I would demo style’s in shorthand e.g. “border:1px solid #d1d1d1;”

But what do I know :)
Great Article

Thanks for the great tutorial. I was looking for a tutorial on portfolio site design in Photoshop and this was what I needed. I didn’t need the coding part, but read through the explanations as I wrote my own code. Having went through Part I and II entirely, here are my comments/issues and suggestions which I hope will be helpful to others.

COMMENTS:

1. The Demo
The demo’s Welcome, Sidebar, and Footer slices are a different shade of blue than the background color in my Firefox browser. The slices don’t look like the same color as the PSD.

2. Float
- I don’t see why #top div, .separator and other elements would need to be floated.
- None of the floats are cleared.
- You have .nav-links li a {float: left;} but anchors are inline elements—float the li instead, which are block elements.
- You don’t need a {float:right} on the welcome image since the #welcome-text {float: left;} will push it to the right.

3. Size of divs
- #welcome {height: 326px;} – isn’t this smaller than your background-image?
- #sidebar div is smaller than its background-image.

4. The link tag should really include a media attribute set to “screen”.

5. (Step 15) A forward slash (/ is not backslash) WILL NOT necessarily link back to your homepage—it depends on your site’s folder structure. “../” is to get out of a folder.

6. Placing the header repeating background-image in body
I think there should be a separate div for the repeating header. If you also wanted a repeating footer you can’t use body as a selector for both so it makes semantic sense to give it it’s own div.

7. In some instances such as the title and navigation, there’s only padding-top and the height is filling the remaining space. I think padding-bottom should be added to achieve vertical center alignment.

8. I liked the hover effect in the navigation bar using a background-image.

SUGGESTIONS:

9. Slicing – the Slice tool in Photoshop is a better way to go.

10. You could have used list-style-image and margin-left for the bullet.png.

11. Sidebar
- I liked the sidebar divider as a background-image positioned at the bottom of the li.
- It looks different from the PSD mockup. 1 – The last li doesn’t fill up the space where the triangle is. I targeted it using the sibling selector li+li+li, and changed just that last li spacing. 2 – There’s no divider after the last li in your PSD. In the same rule I set background-image to “none.”

12. I would’ve liked to see styling for links!

13. Lastly, it’s good to see the markup was valid.