Coding a Complex Design into CSS and HTML
plus

Coding a Complex Design into CSS and HTML: New Premium Tutorial

on Mar 3rd 2010 with 64 comments
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


Final Product

Become a Premium Member

NETTUTS+ Screencasts and Bonus Tutorials

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!

Tags: Premium
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a University of Toronto student, majoring in philosophy. I recently took up web design as a hobby and have learned a great deal in a short time, largely thanks to the resources of the online community. I'd like to share what I've learned and contribute to the knowledge base available to new learners. Check out My Website!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://connorcrosby.me Connor Crosby

    Aw come on, my Tuts-plus just ended!

    • http://icontut.com nabeel

      lol yh worth it is worth a tuts plus.

    • http://rickbrossgraphics.com/ Rick Bross

      renew renew renew, its great!

    • Montana Flynn

      Me to

  • http://skelliewag.org Skellie

    Really looking forward to going through this. Thanks Tessa!

  • Moneyxl

    This is gonna be popular due to folks requesting it on psdtut

  • http://b.sffarlenn.net Laneth Sffarlenn

    This looks so awesome! Really looking forward to the weekend now!

  • oconn96

    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.

    • http://themeforest.net/?ref=tigerthemes tigerthemes

      Yeah.. Complex? Really?

  • Keith

    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.

  • http://www.pawelmartuszewski.co.uk Paul

    woo.. come on… it’s not complex at all. I am surprised it’s premium…

    • fish

      true, same here..

    • http://lucidprocess.com Martin

      yeah… complex for whom exactly? for a total beginner I suppose.
      I’m sure it will help somebody out there.

      • Odog4ever

        I’m a total beginner and it looks complex to me so you were right.

  • http://www.bopjodesign.com bopjo

    No screencast?

    • http://www.codealamode.net Tessa
      Author

      next time! I don’t have a microphone atm.

  • Ciwan

    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

    • http://www.thatbelinda.com Belinda

      I prefer tutorials that aren’t in screencast form, personally. So yay :-)

    • http://rickbrossgraphics.com/ Rick Bross

      SCREENCAST PLEASE!

  • Robert

    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.

    • DVR

      O.C.D

    • http://www.codealamode.net Tessa
      Author

      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.

  • Ef

    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!

  • http://sonergonul.com Soner Gönül

    Looks like good tutorial..!

    thanks!

  • Jo

    Hye is there the .js integration in this tuts plus
    Thanks
    ++

    • http://www.codealamode.net Tessa
      Author

      sorry, I didn’t get to that part, but look up the jquery cycle plugin. It shouldn’t be too hard.

      • http://www.northnexposure.com Gareth

        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?

      • http://www.codealamode.net Tessa
        Author

        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.

  • http://www.jordanwalker.net Jordan Walker

    yes, more premium content.

  • http://www.dawn-designs.fr p0ulpe

    Very lot of mistakes on the tuts !

    • http://www.dawn-designs.fr p0ulpe

      BUT nice tut.

  • Chris

    Ugh I’m quite upset that I can’t view this. It sucks being 15 and not having money. :/

    • http://sffarlenn.net/blog/ Laneth Sffarlenn

      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!

  • Ryan

    complex?

  • http://jacobbednarz.com Jacob

    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.

    • http://www.codealamode.net Tessa
      Author

      I tried it with fewer divs, but it was harder to explain that way, and tougher to make IE behave.

  • Anthony

    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!

    • oconn96

      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.

  • Ryan Turki

    How can we use the jquery cycle plugin to create te header slide effect ???

  • iamnotblack

    could someone torrent this :) please

  • http://www.mkhaled.com Mahmoud

    Awesome work, Tessa! I’m really happy to see the coding part.
    Though I just noticed it now. Hehe.

  • http://www.jennieroutley.co.uk Jen

    Thanks Tessa, this is nicely done, is always nice to see how different folk tackle a layout.
    Nice and clearly explained too, thanks!

  • Amy

    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.

    • simaem

      Just log into the premium account and then search ( How to create a Professional 2.0 layout ) under PSDtuts+ …
      ANd u,ll find it :)

  • carol Genetti

    I can’t seem to view this tutorial and I am a member. Go figure….

  • c0sie

    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

    • jleajones

      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!

  • Crif

    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?

  • Danny

    Can I just subscribe for 1 month to download this? You should have an option to simply buy the tutorial.

  • Deoxys

    Can somebody explain me what “float: rightright” does? Is that semantically correct and accepted by the rules? What’s the difference to “float: right”??

  • http://www.watchmoovie.co.cc Ajinkya

    you guys teach the jCarousel also !

  • simaem

    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 ???

    • simaem

      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,,,

  • Uzdan

    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?

    • Uzdan

      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.

  • bydj

    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.?

    • http://sffarlenn.net/blog/ Laneth Sffarlenn

      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.

  • http://sffarlenn.net/blog/ Laneth Sffarlenn

    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!

  • http://www.markrushworth.com mark rushworth

    Link to the original PSD tutorial would have been nice :/

  • http://www.wbcobb.net W.B.

    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;
    }

  • http://www.ideas4passiveincome.com San

    This is really nice..

  • mono

    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

  • Matt

    Is this tutorial no longer available?
    I just got a premium subscription to do this tutorial but the source link is broken………….

    • Matt

      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.