Coding a Complex Design into CSS and HTML: New Premium Tutorial
Download Source Files
Today, we’re going to be taking the PSD website design, from Mahmoud’s Psdtuts+ Tutorial ,and coding it into valid, semantic HTML and CSS. Along the way, we’ll go over some essential CSS techniques, such as image replacement, sliding doors, and CSS sprites. This is a monster of a tutorial, as the design is a bit complex. Nevertheless, a relative beginner should be able to follow along, so put on a pot of coffee and let’s get started!
Help give back to Nettuts+ by becoming a Premium Member!
Final Product
Become a Premium Member
For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- 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 Tessa Thornton
Join our newsletter!
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
Aw come on, my Tuts-plus just ended!
lol yh worth it is worth a tuts plus.
renew renew renew, its great!
Me to
Really looking forward to going through this. Thanks Tessa!
This is gonna be popular due to folks requesting it on psdtut
This looks so awesome! Really looking forward to the weekend now!
It’s not too complex. Especially when you have the PSD from the original tutorial. The welcome images are the only things requiring anything special.
Yeah.. Complex? Really?
Hmm … I just might have to pay to become a plus member! I’ve been looking for a more complex tutorial such as this one.
woo.. come on… it’s not complex at all. I am surprised it’s premium…
true, same here..
yeah… complex for whom exactly? for a total beginner I suppose.
I’m sure it will help somebody out there.
I’m a total beginner and it looks complex to me so you were right.
No screencast?
next time! I don’t have a microphone atm.
I would have loved a Screencast !
It is so time consuming going through all that text ! Honesty I think all tuts should be in Screencast form, from today onwards :D
By the way why is it that in so many tutorials I see them three guidelines repeated ? why is that ?
Thanks
I prefer tutorials that aren’t in screencast form, personally. So yay :-)
SCREENCAST PLEASE!
I hate listening to people talk. I begin to focus on their grammar and lose my concentration on what’s going on. No screencasts for me, thanks.
O.C.D
lol I know what you mean. Personally I don’t have the patience for screencasts, but I understand why some people find them useful. Next time I think I’ll try it, once I get a microphone. I promise my grammar is impeccable.
It’s not really complex HTML or CSS, only the big green box at the top can be a bit hard to do. Nevertheless it’s great for you Tessa that it’s a Plus! Good job!
Looks like good tutorial..!
thanks!
Hye is there the .js integration in this tuts plus
Thanks
++
sorry, I didn’t get to that part, but look up the jquery cycle plugin. It shouldn’t be too hard.
I would really like to see the js integration, maybe in a seperate tutorial. Using the cycle plugin how would you get the images in the background to rotate and change and the nice reflection, how would that work?
I wasn’t thinking of anything that complex, I was just thinking about fading out the images into another set of images. That kind of animation is usually done with flash, it’s probably doable with javascript, but I’m no pro.
yes, more premium content.
Very lot of mistakes on the tuts !
BUT nice tut.
Ugh I’m quite upset that I can’t view this. It sucks being 15 and not having money. :/
I’m a little late in replying, but could your parents spot you $9? If so, you can download every premium tutorial from the Tuts+ range in that one month. $22 for 3 months and you can space the downloads out if you have a limit.
Good luck!
complex?
Only thing I have a issue with is your case of divitis. :p
Apart from that, this is a very useful tutorial for those who are looking at coding a PSD.
I tried it with fewer divs, but it was harder to explain that way, and tougher to make IE behave.
Thanks for taking the time to put this together! Not that another person needs to say it, buuuut I would like to have seen this in a screencast! Great tutorial though!
I think the advantages to having tutorials outlined rather than in video is that you don’t have to wait for the video to load to scan the part you want to do. There have been many times where I accidentally refreshed or went back on the video page by mistake and had to watch all over again. I read code better than I do listening to someone talk about it. I think the balance right now is perfect for video:written tutorials.
How can we use the jquery cycle plugin to create te header slide effect ???
could someone torrent this :) please
Awesome work, Tessa! I’m really happy to see the coding part.
Though I just noticed it now. Hehe.
Thanks Tessa, this is nicely done, is always nice to see how different folk tackle a layout.
Nice and clearly explained too, thanks!
Ok, I’m still getting used to this latest redesign and changes. I am logged into my Plus account and this particular tutorial, doesn’t have a link to view the tutorial nor can I download any of the files. When I click on the tutorial, it takes me right back to this page that’s asking me to sign up for a “Premium” membership. Is that different than my old Plus membership? Or am I just stupid and missing something simple.
Just log into the premium account and then search ( How to create a Professional 2.0 layout ) under PSDtuts+ …
ANd u,ll find it :)
I can’t seem to view this tutorial and I am a member. Go figure….
All you “complex, how?” haters, give Tessa a break. This might be easy for some to code but it isnt easy for all and tuts like this are great for people like me.
Tessa, I joined up to “Plus” just for this tut so huge thanks :)
Now…can I get a reply to my post on your homepage Chrome Tabs tut please :D
word…i joined for this tut too, but i was hoping it would include how to code the new work part, but this is great tut none the less!
I just became a member for this tutorial but I’m see any content for it. You can click the link for the PSD tutorial but I don’t see any thing for the CSS+HTML side of it. Anyone know why?
Can I just subscribe for 1 month to download this? You should have an option to simply buy the tutorial.
Can somebody explain me what “float: rightright” does? Is that semantically correct and accepted by the rules? What’s the difference to “float: right”??
you guys teach the jCarousel also !
Really Nice Theme..
I just Became a Premium Member to get this Theme and Try coding it..
But there is a Problem..
cant i get the .Psd file of it in Source files ???
OMG :| i am so lame :P
ok guys all of u Premium members u need to go to the Mahmoods PSDtuts+ link to get the .psd files :)
i got them..
And BTW awesome work Tessa…
U just missed the HOME button Effect a lil bit…
But overall Brilliant work,,,
For some reason my nav-right.jpg won’t show up on the li.active a{ but it will on the li.active { any help?
Had to set the list-style-position to outside. That fixed the problem for firefox, although it still doesn’t show in my dreamweaver preview window.
what is the format, is this screencast?
screencasts are best format at least for my opinion!
one more question, are premium memebers allowed to download video tut.?
This isn’t in screencast format – it’s text. Also, what do you mean “video tut” – Anything in the Plus Members area is available for download – you should see the different sites on the right side of the screen to search their different tuts.
Hey Tessa,
Just wanted to stop by and thank you for this tutorial. Amending the layout a little, I’ve used this tutorial with Jeffrey’s PSD to HTML to WordPress tutorial screencasts to make up my blog site: http://sffarlenn.net – thanks so much for this!
Link to the original PSD tutorial would have been nice :/
Love this tutorial, thanks! I noticed that you are using floats to make the navigation links align horizontally. CSS actually has an attribute that can do this without using floats, like so:
#header ul li {
display: inline;
}
This is really nice..
Hi.
I have to say is a nice tutorial but it has some problems, the index.html source file doesn´t work in ie 9 and ie7simply doesn´t show a thing!, I´ve followed step by step the tutorial and my index.html working file has this issues too. What can be wrong? Also I´ve putted the jquery code to show a nice header pics, it works nice in modern browsers but it crashed on ie5 and ie6, the same old ancient problem of ie, is there any kind of hack to make this jquery and jquery-cycle scripts work fine on those browsers?
I just need this to work in all browsers, it has to be a cross-browser page!
Please help
Thanks
Is this tutorial no longer available?
I just got a premium subscription to do this tutorial but the source link is broken………….
Is there any other tuts like this?
I went through Marko Prljic’s tut but I need more explanations to go with the code.
I went through Tessa’s ‘First Website’ tut, I like her style of explaining things.