Line25

25 Detailed Tutorials for Coding Up Your Web Designs

Read the full post

One of the best ways to get into web design is to learn the process of transforming your Photoshop concept into a fully working coded website. Luckily there are various handy tutorials from across the web that document the process of writing a site with HTML and CSS in a step by step guide. This post pulls together the best PSD to HTML conversion tutorials to help you along your way to becoming a CSS master.

Coding a Web Layout in XHTML and CSS

View the PSD to HTML tutorial

Webtint show you how to build this awesome web concept, great practice for anyone who doesn’t really know XHTML and CSS, and a great introduction for beginners.

Web Design Layout Tutorial

View the PSD to HTML tutorial

Richard Carpenter from HV Designs documents the process of coding a single page web page from a clean and fresh design.

Build a Sleek Portfolio Site from Scratch

View the PSD to HTML tutorial

Collis Ta’eed shows us how to transform a PSD website design into a complete site build with clean HTML and CSS.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

View the PSD to HTML tutorial

This excellent introduction from NETTUTS shows some handy tips for building a website with next generation HTML5 and CSS3 techniques.

Design and Code Your First Website in Easy to Understand Steps

View the PSD to HTML tutorial

Design and code your first website in simple, easy steps with this tutorial from NETTUTS. Written for the beginner with top notch standards compliant code.

How To Build Your Own Single Page Portfolio Website

View the PSD to HTML tutorial

This tutorial I wrote for NET Magazine shows the process of building a simple single page portfolio site from visual concepts to complete working design.

Coding a Corporate WordPress Style Layout

View the PSD to HTML tutorial

This tutorial from PSDVibe shows us how to code a corporate WordPress style design into XHTML and CSS.

How to Create a Dark and Sleek Web Design from Photoshop

View the PSD to HTML tutorial

Learn how to design and build an awesome dark and sleek website concept with this tutorial from web design blog, Six Revisions.

Coding a Clean Web 2.0 Style Web Design from Photoshop

View the PSD to HTML tutorial

Develop a bright and fresh website design, and code the concept into XHTML and CSS with this step by step guide.

Coding a Design Lab TV Styled Layout

View the PSD to HTML tutorial

See the process of converting a Design Lab TV styled website layout into XHTML and CSS with this tutorial from PSDVibe.

The Design Lab: PSD Conversion

View the PSD to HTML tutorial

Create a fictional web design studio website with another great tutorial from HV Designs.

Create a Killer Band Site with Drupal: A 6-part Tutorial Series

View the PSD to HTML tutorial

Follow this extensive tutorial by Sean Hodge to see the whole process of not only creating a site in XHTML and CSS, but continuing on to building into the Drupal platform.

Coding a Layout

View the PSD to HTML tutorial

Learn how to analyse a website layout to find the best way of coding it with this tutorial from Erratic Wisdom.

Converting a Photoshop Mockup

View the PSD to HTML tutorial

Follow Chris Coyier’s excellent three part video screencast tutorial to discover how to convert a Photoshop website concept into a fully functioning website.

Converting a Design From PSD to HTML

View the PSD to HTML tutorial

Jeffrey Way offers great advice in this easy to follow video series on how to convert a design from PSD to HTML.

From PSD to CSS/HTML in Easy Steps

View the PSD to HTML tutorial

Create a site from scratch with this four part series on how to convert a website from PSD to fully CSS based HTML pages.

Creating a CSS layout from scratch

View the PSD to HTML tutorial

Learn some handy tips and techniques for developing websites with CSS with this step by step guide from Subcide.

Converting a Photoshop Mockup: Part Two

View the PSD to HTML tutorial

Chris Coyier offers more quality advice and covers the process of creating another complete website in this video tutorial series.

Encoding a Photoshop Mockup into XHTML & CSS

View the PSD to HTML tutorial

Export images from your PSD document and learn how to put them into practice along with some HTML and CSS coding with this tutorial from Blog.SpoonGraphics.

How to Convert a PSD to XHTML

View the PSD to HTML tutorial

Jeffrey Way offers more helpful insights with another quality video tutorial. This time build an events website template with CSS and XHTML.

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

View the PSD to HTML tutorial

See the entire process of getting from PSD to completed HTML website in this awesome tutorial from Collis Ta’eed. Spare a few hours for this massive tutorial!


How to Convert a Photoshop Mockup to XHTML/CSS

View the PSD to HTML tutorial

Don’t forget the Photoshop mockup to XHTML/CSS tutorial right here on Line25. Follow the steps to building a website for a fictional design studio.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.dzinepress.com Dzinepress

    these of all best techniques of coding for web designs. thanks

  • http://all-for-design.com All for Design

    Great article !
    Thanks for sharing these amazing tuts

  • http://www.offshoring.com/ Website Design Services

    Nice and clean designs! :)

  • http://twitter.com/tomaslau Tomas Laurinavicius

    Useful article, thanks.

  • http://www.relativelyfixed.com Matt

    Great stuff, Chris!

  • http://www.webtint.net/ Johnny

    Hey! Thanks for putting one of my tutorials on your list. Makes me feel great. Thanks :)

  • http://drawne.com Andy Feliciotti

    great post and some great links

  • Digitaluscious

    Thanks so much for sharing such a great list of tutorials, much appreciated!

  • http://www.nopun.com Noel Wiggins

    I believe that each designer has their own unique approach to designing websites, but I think we would all benefit from sharing a similar approach, why reinvent the wheel right?

    This collection is a great way to try and standardize the process, so we can get in and out, leaving the creativity on how the design looks opposed to how we do the design…


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  • http://creativefeed.nardyello.com Nardyello

    So much great information! HTML 5!?!? It looks much simpler and much like XML actually.

    Will love to learn about this new technology. Thank you for sharing these great articles!

  • http://www.getcarwallpapers.com Car Wallpapers

    They are so many Great Tutorial, Really Thanks.

  • http://www.jubranz.com Jubranz

    thanks chris that was awesome!

  • http://www.rossmagichoward.com ross

    This is a lovely list, but am I the ONLY person using Fireworks these days?

    To me its far more fluid than using photoshop and its bloody marquee select to outline objects and create graphics.

    Fireworks + Photoshop is a wicked combination for workflow, with both pieces of software complimenting each other when used for their specific functions.

  • http://www.lojatour.com Jorge

    Muy Buena recopilación de tutoriales…gracias.

  • http://tutorijali.hdonweb.com/ Ivan Mišić

    Great stuff. thx

  • http://umeshportfolio.wordpress.com/ Umesh

    Awesome stuff, I really need these type of help from you.

    thanks

  • http://www.bruceslogos.com/quote/ logodesigner

    Thanks for the list of tutorials for web design. I will be try this

  • http://www.soumyasm.com Soumya

    Just what i was looking for! Great compilation! thanks a lot Chris! :)

  • http://link JXL15

    Let me give you several examples: When you are sports fan you are united to that team. ,

  • http://www.imago-visual.com Tarquin

    Brilliant selection of tutorials! Most useful. Thanks for sharing.

  • http://www.xhtml-css-code.com R Aflec

    “Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

    http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

    Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

  • Kellie

    Thank you for linking to these tuts.

  • http://soultravelmultimedia.com/ http://SOULTRAVELMULTIMEDIA.COM/

    Awesome compilation! I'm putting a link from my site http://SOULTRAVELMULTIMEDIA.COM/ to this article. Thanks for the great work you do here and on Blog.SpoonGraphics. You're a great inspiration..
    Just a minor note, I noticed there are actually 22 tutorials listed as opposed to 25. Perhaps a couple got deleted somehow?

    Thanks again and keep up the great work! :-)