How to Convert a Slick PSD Design to XHTML/CSS

Setting up the Work Space.

Creating a nice development workspace for a site is very important before you get started. I always have a ready made basic file structure for when I create a site. I will show you the one we will be using now (which is the same as my template).

The Folder Structure

Here is the basic folder structure, this is what I will refer to in the document, CSS, etc. You can either choose to create your own, duplicate mine, or choose another path(not recommended for this tutorial).

The Folder Structure

  • Root Directory(Top level) –
    • This is where the index file is located.
    • This is the top level page, the same directory and other page(sub-page also) should go.
  • JavaScript –
    • This is were our local version of the latest jQuery(JavaScript Framework) will be located.
    • This is also were we will store the jQuery plugin Nivo-Slider that we will use in the featured section.
  • Styles –
    • This is were we will have all of our site styling. Our CSS files will be located in here and our images will be separated in the following groups:
    • Images: This is were we will store the images for the slider, sections, etc.
    • Template: This is were we will store the layout images, like the featured background and such.

The Files Inside

I will really quickly tell you what files I have in each folder. In the root folder will be the index.html file, this is where all of our base HTML coding will be. Inside our JavaScript folder I have 3 files, jQuery-1.4.2.min.js, HTML5-Shiv.js (To make IE understand newer attributes and layouts), and Nivo-Slider.min.js (To make our slider functional). Finally inside the Stlyes folder I have 2 CSS files named reset.css and global.css, these files will contain all the CSS to make our site look very pretty.

At this point please put your slices or the downloaded slices in the style/layout folder.

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