Here are 30 of the best tutorials that I have found to teach you to take your design from PSD to HTML.

Convert a Beautiful PSD to HTML and CSS

You will learn how to slice and create the HTML +CSS of my design. You’ll learn how to keep the mock-up process simple, create a custom HTML framework to put your design in, some practical CSS tricks, save images for web, and more.

Coding a Complex Design into CSS and HTML

Today, we’re going to be taking the PSD website design, from Mahmoud’s Psdtuts+ Tutorial, and coding it into valid, semantic HTML and CSS . Along the way, we’ll go over some essential CSS techniques, such as image replacement, sliding doors, and CSS sprites. This is a monster of a tutorial, as the design is a bit complex. Nevertheless, a relative beginner should be able to follow along, so put on a pot of coffee and let’s get started!

Convert Your Product Landing Page From PSD to HTML

In this article you will learn how to convert Your Product Landing Page from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

How to Code a Gorgeous Watercolor Website

This tutorial is a useful guide for both expert and noob designers/developers who wants to learn more about how to convert complex designs to standards-compliant websites. We’ll learn the basics of slicing a PSD design, how to convert it into a 100% functional HTML +CSS+JavaScript mockup, and more.

Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.

Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial

In this tutorial we will walk through the process of coding that design in HTML and CSS.

How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.

PSD to HTML

This Seven series tutorial will give you indepth knowledge of how to convert PSD to HTML. Although you have to sign up for it but the membership is free.

Converting a clean magazine-style PSD template to HTML/CSS

This tutorial will be an overview, with some tips and advices, on how to convert a psd to HTML; it won’t be a complete and specific explanation on HTML tags, CSS properties and techniques but a look to my entire process of getting from Photoshop the HTML layout.

Coding a Band Website Created in Photoshop

This two part tutorial series deal with creating a Website PSD and turn it into clean, working XHTML/CSS code.

Create a Sleek Web 2.0 Style Website Layout

Check out this tutorial for creating a Sleek Website Layout and convert it into HTML.

Design Lab TV Styled layout

Learn how to code the Design Lab TV Styled layout into xhtml and css.

Create a Comic Book Themed Web Design, Photoshop to HTML + CSS

Learn how to create a comic Book Themed Web Design and then convert the PSD to HTML.

How to Code a Stylish Portfolio Design in HTML/CSS

This two part tutorial will tell you how to code a Portfolio Design in HTML/CSS.

Code a Vibrant Professional Web Design with HTML5/CSS3

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more

Converting Dezign Folio From PSD to HTML [Very Detailed]

In this article you will learn how to convert Dezign Folio from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Code a Modern Design Studio from PSD to HTML

Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavi?ius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.

How to create a professional and clean web layout

Our passion for web stuff grow day by day, so today we’ll learn how to create a highly-professional and clean web layout. We will see that using gradients, the noise filter and some subtle 1px lines to achieve depth, we can easily create a great web design for a wide range of uses.

Create a lovely textured web design from Photoshop to HTML/CSS

In this tutorial we are going to learn how to realize a nice web site layout using a nice texture. The post is divided in two parts: first we create the web page in photoshop and then we convert the PSD in a working HTML/CSS page ready for the web. Following this step by step walkthrough of design you’ll learn, touching with your hands the entire process to make a web page, how to design and code a modern site

From PSD to HTML: Building a Set of Website Designs Step by Step

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!