Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML

First of all, I should thank delicious, StumbleUpon, Dzone, Design
float and other major social bookmarking websites’ users for featuring
my previous posts. I received a lot of traffic after a few days after
starting this blog.

In this post, I’m going to show you the most practical tutorials on
coding a template using CSS and XHTML. Making a template has two steps.
The first step is Designing the template components and the second step
is Coding them into a valid XHTML page.

For learning designing a template from scratch in Photoshop, I suggest checking this post by dzineblog. But how to convert the designed PSD file to an XHTML document is the reason I wrote this post.

The best Tutorials on Converting PSD to XHTML

1- CSS Template Tutorials - Setting Up
- This is the part one of the complete tutorials. These series of
tutorials will teach you how to design a template in Photoshop, slice
it and convert it to a CSS layout.

CSS template  Tutorials

Other Parts:

1-1- Step 2- Coding the basics

1-2- Step 3- Slicing and Coding the Header

1-3- Step 4- CSS Horizontal Navigation

1-4- Step 5- Floating the columns

1-5- Step 6- Coding the content

1-6- Step 7- Right Column Navigation

1-7- Step 8- Finishing Off

2- From PSD to CSS/HTML in Easy Steps - Part 1
- a 4 part series tutorial on how to take a PSD file and convert it
into a fully CSS based html file. The part 2 is available at the moment.

2-1- From PSD to CSS/HTML in Easy Steps - Part 2

2-2- From PSD to CSS/HTML in Easy Steps - Part 3 [NEW!]

3- Site in an hour - Making Simple Work of Complex CSS Layouts: In this tutorial, you will be creating:

  • A flexible layout, one which is happy to contort to the requirements of its contents and surroundings
  • Decent browser support (…or support for decent browsers, at least!)
  • Graceful degradation in legacy browsers
  • Something that will make the bosses and marketing types happy while
    still allowing even access to all customers — current and potential

4- Slice and code a layout tutorial
- “In this css / xhtml tutorial I’ll show you how to slice a design in
Photoshop, and how to code it from scratch in CSS and xHTML.”

5- Advanced CSS Layouts: Step by Step - a step by step tutorial on Creating

a 3 column CSS layout.

6- Slice a Template and Code it Using CSS - A very well written tutorial on slicing a PSD file and converting it into a CSS layout

7- Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page File Video Tutorial

“In these videos tutorial, you will learn how to convert photoshop web template file in .PSD to HTML file and Css file”


8- CSS Template Layout - part 1 of 3 - A three-part article on creating a pure CSS web page

8-1- CSS Template Layout - part 2 of 3

8-2- CSS Template Layout - part 3 of 3

9- Designing a CSS based template

“This is the start of a step-by-step based tutorial about how to create
a CSS based template page. This will be a tutorial consisting of
several parts: part 1 covers the creation of the navigation buttons in
Photoshop CS*, the 2nd part will be the creation of the background,
next on the list is the header and layout of the page and finally the
implementation in CSS and XHTML.”

9-1- Designing a CSS based template - part II

9-2- Designing a CSS based template - part III

10- Creating CSS Layouts In Dreamweaver, Part 1 - 3-part video series tutorial

10-1- Creating CSS Layouts In Dreamweaver, Part 2

10-3- Creating CSS Layouts In Dreamweaver, Part 3

11- From PSD to HTML, Building a Set of Website Designs Step by Step

“Today I’m going to take you through my entire process of getting
from Photoshop to completed HTML. We’re going to build out a set of 4
PSD mockups of a website that eventually will become a WordPress theme.
It’s a massive tutorial, so if you’re going to follow through to the
end, make sure you have a few hours to spare!”


12- Creating a CSS layout from scratch - This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout


13- Coding Your 1st PSD Tutorial - Learn how to code a car sales web layout into a working website

14- Breaking Out of the Box With CSS Layouts - A grate article by sitepoint on creating beautiful grid based CSS layouts


15- Page Layout from HtmlDog - a beginner guide to float and absolute positioning CSS Layouts

16- 3 Column All CSS Layout With Fluid Center and Two Columns - This tutorial teaches you how to create a 3 column layout with a fluid center and two fixed width sidebars.

17- Liquid CSS Layouts - Design Alternative to Table Based Websites - How to transform fixed table layouts to liquid CSS based layouts


18- Rock-solid CSS Layouts
- This chapter is excerpted from SitePoint’s HTML Utopia: Designing
Without Tables Using CSS, Second Edition, which provides a complete
introduction to CSS and shows you how to build rock-solid CSS-based web
sites from scratch

19- Building a page template in CSS - A quick step-by-step demonstration of how the Web Essentials template was built using CSS

20- Two column layout using CSS and divider image
- This tutorial explains how to design two column CSS layout with a
line dividing left column from the right going through the whole length
of the page, regardless of the length of the columns.