How to Convert a Slick PSD Design to XHTML/CSS

The first step of converting the PSD – Creating The Base Index HTML File

The first step in actually converting the PSD to HTML is the HTML, not CSS, not JavaScript. You want to do all the HTML before any other part comes into play. So we are going to start off by creating our basic document in HTML. The CSS (style sheet file) and JavaScript will follow.

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Site Title -->
		<title>PSD to HTML: A Photography Site</title>

		<!-- Meta Data -->
		<meta charset="UTF-8" />
	</head>
	<body>

	</body>
</html>

Setting Up The Page Head

The next part of coding up the index.html file will be to add details to the head of this document. The first thing we want to do is add more meta data for SEO and Search engines. We are going to add keywords, authors, description, copyright, and allowed robots. Just add the following under the line and customize it to your will: <meta charset="UTF-8" />.

<meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
<meta name="description" content="Your company description.">
<meta name="author" content="TutToaster.com/authors/CodyRobertson">
<meta name="copyright" content="Copyright 2010 TutToaster.com">
<meta name="robots" content="follow, index">

Now it is time to import our JavaScript files and blank CSS files. Both our CSS files will be located in the head of the document along with HTML5-Shiv.js so that the page renders right. Then we will include jQuery-1.4.2.min.js and Nivo-Slider.min.js right before the closing body tag to import page load times.

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Site Title -->
		<title>PSD to HTML: A Photography Site</title>

		<!-- Meta Data -->
		<meta charset="UTF-8" />
		<meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
		<meta name="description" content="Your company description.">
		<meta name="author" content="TutToaster.com/authors/CodyRobertson">
		<meta name="copyright" content="Copyright 2010 TutToaster.com">
		<meta name="robots" content="follow, index">

		<!-- Site Theme Styling -->
		<link rel="stylesheet" href="style/reset.css" />
		<link rel="stylesheet" href="style/global.css" />

		<!--[if lt IE 9]>
		<script type="text/javascript" src="javascript/HTML5-Shiv.js"></script>
		<![endif] -->
	</head>
	<body>

		<!-- jQuery and Nivo Slider -->
		<script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script>
		<script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script>
	</body>
</html>

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Live demo View it online Download Take the source files

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

    Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

    Very good tutorial, It covered a lot of things, thanks

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

    i’m going to have to take time on this one.thanks for sharing

    Reply to this comment