Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.
Just like last time, I’ll take you through the process step by step – even through the tedious parts. Enjoy!
The PSD
The 100% HTML and CSS
Thanks again to Collis for allowing me to use his design for this week’s screencast. If this screencast helped you, please do us a favor and subscribe to the RSS feed, and/or leave a comment. See you next week! 
P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
LivingDesign - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
@Patrick – Please don’t say that. Would you really be proud of the markup?
I have learned a lot here, I wanted to code my simple website, well atleast code it simply, and still have some problems but my friend wanted to code it with me so now I did a lot of work. Thank you very much!
Although I do this type of thing every day, it is still nice to watch someone else’s methods.
Took me back to when I first started out.
Well a Simple and great way to do the thing ! thanks
For the css part:
#container {
margin: auto;
width: 921px
text-align: left;
when I enter this it has no effect what so ever. What mistake could i have made on the main html? as it dosn’t recognise and “#container/header {” statements.
many thanks.
Hey Jeffrey,
Just wanted to say thanks heaps for your work and it actually did made me get registered with Tuts+ site. So keep up the good work and looking forward to more of these sort of tuts.
Cheers
So many comments… This is really a good beginners tutorial…
that is a great attempt for all designers, i really like this and requesting to you for stuff like this…
Thanks
Casper
The video is not playing…
nice keep up the good work its really good for me as a beginner
There’s some disagreement among SEO firms about whether the H1 should be your logo or the actual title of the page. FYI.
i absolutely love your tuts
thanks a lot
I’m curious, when you first started web developing how long did it take you to finish a psd to html website?
I didn’t enjoy it:/ I freaking Loved it!!
Thanks for the really nice tute!
Quick question:
How would you go about reusing common areas across different pages (such as the header, nav, footer)?
I come from a programming background so modularity and reusability is really important. If I was to just duplicate the main page and modify its content, that feels very counter-intuitive and will likely cause problems when I have to change one of these common areas.
I know you could do this with frames but apparently they’re bad news nowadays so what is the best way to go about this?
WOW Really helpful!!
muchas gracias saludos desde Aguascalientes, Mexico
Loved it! Really simple and the best things are the IE hacks
Great explanation, simply great, a lot of helpful tips and information! Yet, keeping it simple and straightforward.
Good ! I like it, very nice!
hi
this link have problame
plz re link
plain n simple! great tuts
how to
i download this tut
beacuse i canot download this tut
thnx
i cant watch this video in this site，who can help me please，im in Beijing china,
i hope webmaster can slove it ，thankyou~
so easy to follow thx. my goal is to splice and mark up my first psd (which I designed) by the end of the summer!
Very nice, thank you
great video-tut
thx!
thanks, helped me alot
Everything is fantastic, but i didn’t understand how to cut the banner to be transparent, from the .psd file. I’ve been having so much trouble with that and just can’t understand it.
Thanks for all you hard work!!!!!
Love you long time Jeff! Great Tutorial.
thank you! always been intrigued by psd to html, this one nails it. now, i need to get to know psd to html to wordpress/drupal!
cheers!
very nice and good looking
I very new to this, and This site is awesome… I got what I need
brilliant work Jeff.
now I’m always hanging around here
valuable content
Beautiful, but if it was on dreamweaver will be best.
Great! Love this kind of screencast.
A tip: Name the css id after what information they contain, instead of primary and secondary.
If, someone later on, moves the primary to the right of the secondary it wont be logical anymore.
But if the primary had a name like ’subnav’ it still makes sense.
You are just great bro love your work watched all the screencast’s and loved it
Great stuff and tips you got all tips are great
Thank you very much for this. Here in Macedonia, almost every HTML designer is using the old style with tables which aggravates me, me as PHP developer used to rarely put focus on html design, but you have given me so many ideas with your tutorials about “From PSD to HTML”, actually there is not tutorial anywhere else like this one or the others similar you have made, of course there are written ones, but this is very very helpful, don’t mind the nasty comments, those are people who don’t want to share
so thank you very much Jeffrey, it’s been pleasure watching you slicing the PSD and writing the CSS.
Great Tutorial, thank you!!
I’m sure it’s me bt i c no tutorial here there’s no css and html apart from the psd witten div header and smthng it seems to be gr8 coz everyone s tolkin abt it but..i just dnt c a thng
Gosh, I love the tutorial and everything but I always just find it strange how you pronounce “tuts” , I was thinking it would be more like “toots” (haha pardon me), as in tutorial=”too-tor-ee-al”… no?
Thanks a lot I was need it
Thanks this helped a lot!
That was the first tutorial I have ever followed from start to finish and as I have literally just begun trying to do web design and have no other knowledge or experience. It took me a full day to do. I tried to do a slightly different style and had to figure out what to add and what to take away, but I managed it just about. A few bits I need to work out how to fix but not bad for a first attempt. Now just to try and use this to make the other pages. Here goes.
Thanks very much
I am beginner and this is probably one of the most helpful tutorials about converting PSD to XHMTL I have ever watched. Ive just lernt heaps of new stuffs. Thank you very much.
No mamen culeros no se hablar ingles porque hacen esto eeee malditos uno quiere aprender y no lo dejan!!!!! xd!!! aaaaaaaa!!!!!
saludos desde mexico!!!
great tutorial!
Jeff, I watched all 53 minutes and pretty much like every minute.
Regarding to ‘Home’ navigation bar, you created ‘first’ class but you can use CSS3 selector as:
#nav ul li:nth-child(1){
padding-left:0;
}
Thanks
Hi Bractus – Right, but remember that that won’t in all browsers.
YOU ARE GOD JEFF! THANKS!
it’s good! thanks