If you’re looking to learn more about turning your PSD designs into HTML/CSS, there are plenty of good tutorials available online. In this post, we present 50 excellent tutorials that will hopefully help you improve your design skills.
walkthrough of the design and build process, right from the initial Photoshop concept, through to writing the HTML structure, styling up with CSS then adding clever functionality with the jQuery library.
This tutorial will explain the steps to take in slicing and coding the layout.
Turning Freelance Home Page PSD into a working HTML / CSS template.
Converting PSD file into a working CSS template ready for when we convert it over to wordpress.
Coding your “Digital Curriculum Vitae” into a working HTML/CSS Template.
let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant.
Build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided.
The CSS template will basically immertate the main page of our wordpress theme. Most of the styles used in the main page of our theme will be re-used over and over in other areas of the website.
So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.
This tutorial shows how to have content scrolling horizontally from left to right. The tutorial contains files for download, demos and enables users to add an unusual touch to their web design.
This Tutorial will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.
In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.
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.
In this tutorial you will learn how to code the Corporate WordPress Style Layout into xhtml and css.
This Tutorial will go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.
creating your own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.
In this 3 Part screencast tutorial you learn how to take your design from Photoshop to your browse in no time.
This tutorial is for slicing a design made in photoshop and coding it in dreamweaver. You can also access example code at various stages through the tutorial if you have any problems.
create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.
Show your love!
Some of the links on this site are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission.