May 6, 2016

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.

Before start reading this post, don’t forget to subscribe to our RSS feed to not miss any 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. See it in action: Demo

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

  1. I’ve been searching google for a couple of hours now, looking for such tutorials and I must say this is the best list i’ve come upon.

    The new theme rocks by the way.
    Keep up the nice work !

  2. This is a very good and informative site, well done. Your attention to detail is most appreciated since it covers some of the gaps I been missing in my work process and have gained great value from the information you have made the effort to provide. Thank you.
    John R

  3. I’ve made a layout in Photoshop CS3. It does not have the option of exporting the html with css styles. I learnt that PS CS3 comes with imageready features. But in imageready the CSS export functionality was available, Could anyone help me how to export with CSS styles with PS CS3?

  4. Thank you…..

    I have been looking for a good tutorial on how to convert my PSD designs into CSS ready sites. Very little info on the web or in published form.

    Thank you for helping me understand how to do this.


  5. You mention all step converting PSD to XHTML in your tutorials, it is very helpful those person who is fresher in this field and want to know more about conversion thanks for sharing useful tips about conversion

  6. This may just be the best collection of CSS tuts I have seen on the Internet ANYWHERE. And believe me, I have been looking!! You’re the best for this! Thanks so much.

  7. I have been immensely benefitted by the tutorials you have provided. Please let me know if I could use the PSD template and some part of the code of the first tutorial for my students with mentioning your site address and that of the author. Please send me author’s e-mail address, so that I can directly send a request for the same.

    Piyali Sengupta

  8. Very nice work. This compilation would be very handy for a lot of beginners out there. Great job. Keep it going….

    All the best,

Leave a Reply

Your email address will not be published.



Please enter the CAPTCHA text