Convert a Warm, Cheerful Web Design to HTML and CSS
videos

Convert a Warm, Cheerful Web Design to HTML and CSS

on Dec 7th 2010 with 551 comments
Tutorial Details
  • Topic: Building a Website
  • Skills Required: HTML, CSS
  • Length: 33 Minute Screencast

Final Product What You'll Be Creating

Download Source Files

Not long after our newest Tuts+ site, Webdesigntuts+, launched, they posted an excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ll take that completed design and convert it into a standards-compliant HTML and CSS web page. Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow.

Even better, when we hit 80,000 RSS subscribers, we’ll take things even further and convert the finished product into a custom WordPress theme.

Rather than overload you with a massive 4-5 part series all at once, I’ll post a new episode in this miniseries every day. It’s my hope that, if you’re at the point in your career where you can benefit from a series like this, you’ll work along with me each lesson.

The Full Series

Chapter 2: Create the Markup

Press the HD button for a clearer picture.

Chapter 3: Slice the PSD

Press the HD button for a clearer picture.

Chapter 4: Integrate the 960 Grid System

Press the HD button for a clearer picture.

Chapter 5a: Build the Header Section

Press the HD button for a clearer picture.

Chapter 5b: Build the Banner Section

Press the HD button for a clearer picture.

Chapter 5c: Styling the Main Section

Press the HD button for a clearer picture.

Chapter 5d: Styling the Footer

Press the HD button for a clearer picture.

Chapter 6: Creating the Tabbing Functionality with JavaScript

Press the HD button for a clearer picture.

Chapter 7: Style the Form Elements

Press the HD button for a clearer picture.

Chapter 8: Compensate for Internet Explorer

Press the HD button for a clearer picture.

Chapter 9: Cleanup, Typography, and Bug Searching

Press the HD button for a clearer picture.

Conclusion

In the next, final episode, we’ll validate/test our site, work on the typography, and make last-minute adjustments. Stay tuned!

 
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 the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • Fahad

    I am unable to paste the markup code

  • http://frendz4ever.in Fahad

    Please someone help me with the javascript that’s where i have stopped and want to get going so if anyone could help me out i would be very thankful.

  • http://e-mixonline.com Damion Hill

    Hey,
    after watching your video tut on “Building the Banner Section” I was wondering how you got the banner-wrap to work. I’ve been trying to apply this to my own site and it won’t work. It just stays within the confines of the container; within the 960 grid. It is not applied to my site right now. but please contact me back. i’d really like to figure this out. I also need to apply this to my footer as well.

    thank you for your time!

    • http://www.twitter.com/laantorchaweb La Antorcha

      Hey what you have to do is create a div inside the banner-wrap div with a class of container_(12,16,24)
      I mean:

      The background that ocupies the entire page is the one you give to the #banner-wrap.

      The same for the footer.

      Sorry my bad english I hope you understood.

      • http://www.twitter.com/laantorchaweb La Antorcha

        Here is the example.

        <div id="banner-wrap">
        <div id="banner" class="container_24">
        <!– The Stuff –>
        </div>
        </div>

  • Saachi Roye

    I am just wondering when will this series be complete?

  • http://carricraver.com Carri Craver

    Has this project been abandoned? Don’t want to pressure but I keep checking to see if the next video is available everyday. This series was amazing. Don’t want to miss the remainder if it is going to be released.

    • Robert Bailey

      He claims it will be finished. My membership renewal is not gonna happen till this is updated.

  • http://ns-arts.qc.cx Thredz

    thank you a lot for this long tutorial, especially for 960 grid. I will use for my webdesign’s layout gaming in the futur (need a strict framing).
    A bit difficult, cause i’m french and i used a lot my eyes to understand all.

  • alaa

    this tutorial started very well.. but right now..i feel insulted .
    i mean.. giving someone a date and breaking it several times shows no respect ..
    i know you are busy but noone would have asked you if you said that chapter 9 woul be available in 2020..
    please.. respect your community by respecting your time .

    • http://tomseaton.co.cc Tom Seaton

      Jeffrey has been in Australia for the past month. Give him a break, if you read the comment he made he said that he is in Australia and he will finish this just be patient

      • jk

        Yeah, he was in Australia back in January. This is now March. There has been over a month to finish this and this seems to be a very popular series. I know its free and all but don’t think they are not making money because of all the traffic on this site. I was kind of thinking about buying a subscription but if this is how the projects are handled by just being abandoned part way through that kind of makes me have second thoughts. Guess I check back in another month or so and see if this has been finished.

  • http://www.iameum.com Will Copeman

    Thank you Jeffery for your time and efforts in building this series. I have learned a lot and appreciate you taking time out of your day, week, month, etc., to share with others what you have learned over the years. Whether your background be of a formal or informal means, the knowledge you have passed on is invaluable to those seeking a way to expand their own horizons. I know I personally have learned a lot.

    Unfortunately however it would seem as though some have been unable to grasp the purpose in these tutorials, to learn. It seems as though they are here only to copy and mimic. The ability to venture on their own and seek their own answers is something foreign to them. I can only assume that they have learned nothing. They know not what they learned, but only how to make carbon copies. For if they understood the foundation to which this project was built, they would not wait in frustration for an answer, but instead would invent a solution to their problems via the building blocks you have provided.

    • http://www.bootcamp4me.com Lonnie

      I dont think the frustration expressed in these comments comes from people simply wanting to mimic what is being done here. Ive been coming back to this tutorial at least once a week since well before christmas and would love to finally see the conclusion.

      For someone like myself I am scared to fully try to delve into building something like this (with the 960 grid, css3 tricks, ect) without knowing the conclusion.

      Chapter 9 – cleanup and bug searching
      Chapter 10 – convert to a wordpress

      Those two tutorials are very important to someone like me who does want it to work in all browsers and then possibly convert it to a wordpress.

      Of coarse you can look else where on on the web for some answers but I fear that by using the 960 grid some of the assistance I would be looking for would not be relevant to my specific application, or would not be as knowledgeable as Jeffrey is

      Also without knowing what kind of bugs and how to fix them could create the same problems.

      I actually have a wordpress site i am using right now.. but I would love to tear it apart and recreate it using css code, sprites and other new technologies.. but am fearful of getting in over my head.

      The final two chapters would really help set my mind at ease

      • Sebastiaan

        Uhm, CSS isn’t new. And just try and do something yourself you can always revert to how it was (backups haven’t been invented without a reason!)

    • http://carricraver.com Carri Craver

      Will,

      “Unfortunately however it would seem as though..” someone is a jerk. Get over yourself buddy. You don’t have any special powers over learning and appreciation. But you do seem to have arrogance in spades.

  • Mike

    I just noticed Jeffrey created premium tutorials on feb 20th while leaving this one high and dry. I was forgiving of him not finishing this until I saw that…. Kind of leaves me feeling less then important

    • Devin

      I’m sure Jeffrey is a very busy person and he is clearly talented. However, this pattern of starting a series and not finishing is too often on Nettuts. This is why I dropped my premium membership.

      I would like to support Jeffrey and the Nettuts community but there needs to be a bit more reliability on this end.

      • Alicia

        This is exactly the type of behavior I found when trying to hire a web designer.. they say something will be done a certain day and weeks later.. nothing…. or just excuses

        This is what led me to learn web design myself so I could stop hiring “professionals” and do things myself.

        There is a lack of professionalism in the web design community, and leaving this unfinished for almost 3 months is a perfect example of what us looking to hire someone typically has to deal with.

        And spare me… “hes doing this for free” his site still gets clicks and ads pay him for that traffic… its not being done (or not done) from the bottom of his heart.

  • http://www.filcp.com/portfolio Filipe Carrano Pacheco

    I just hope we are gonna have the WordPress tutorial when we hit 80k RSS subscribers.

    • Robert Bailey

      We are going to be lucky if we could even finish anymore of this.

      Another tutorial incomplete. This is why I have canceled my subscription here.

    • Alaa

      Just forget about this >>
      he started a new series about Sass lang ..

  • Vio

    YEEY RSS Subscribers 80,115 I hope now to finish the series

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      And now we will!

      • Alaa

        congrats man :D
        do it please .. i love this Tutorial..
        and if you do it using the new Firefox 4 i’ll love you even more :P

      • Tom

        Great!
        We are over 80000 RSS!

        That would be really great, if you finish this series! :-)

      • Viorel Chitea

        Thanks Jeffrey , I check this post every day when he appeared.

  • Saachi Roye

    I wonder if he will actually complete that series as well or just leave it at #2.

  • http://www.patrickscottmusic.com Patrick

    Shouldn’t the convert to wordpress tut open now that the site as reached 80k subscribers?

    Hope so. Excited to see it!

  • http://www.rickgrossman-blog.com Allan Steinberg

    Thanks for the information but I have now hit the wall. When will you finish the project?

  • wordpress newbie

    Finally, we’ve reached 80,000 rss subscribers………………………….Somebody please let Jeff know…btw: Jeff, your already good, but by finishing this tutorial series, i’m pretty sure it will put you at rockstar status!!

  • http://www.wordpress.gr dyrer

    Now with 80k RSS subscribers we are waiting the final chapter converting to wordpress
    Thanks

  • Travis Davids

    Can u guys pls reupload chapter 3 :9 its unavailable.

  • Orlacher

    For those who seem dissatisfied with the fact that this tutorial is “incomplete”, I would recommend all to acquire From Photoshop to HTML book http://rockablepress.com/books/photoshop-to-html/ written by Jeffrey sold right here.

    What he’s trying to teach us all with this tut is what he teaches in that book. Exactly the same thing!

  • Assasain14

    Nice, you got the final video in. (Before the wordpress conversion at 80,000 RSS subscribers)
    Great tutorial Jeffrey!
    Keep up the good work.

  • meltz

    head up ppl,chapter 9 is here.
    thanks Jeffrey

  • Frank Pizzacalla

    Another great tutorial Jeffrey!

    I bought a copy of From Photoshop to HTML a while back, it’s a fantastic book! I also subscribe to the premium membership and I have to say, ITS WORTH EVERY PENNY.

    All of you that are here complaining that you had to wait for Jeffry to complete this FREE in depth tutorial need to give your heads a shake! This guy is taking you from start to finish, holding your hand the whole way, and you get to download the source files to boot! I challenge you to find a better tutorial on the subject anywhere online hosted by someone of Jeffreys skill set…. for free. Good luck!

    If you’re serious about making a living in this business and you’ve looked into what traditional academia has to offer on learning these skills, and what they charge for these courses, then you should know that what you’re getting here is a real steal, it’s almost criminal.

    Keep up the great work Jeffery, I’m happy to pay for the information… I make it back ten fold every time I complete work for a new client, and for that I say thank you sir!

    • Lonnie

      Sorry Bud..

      He isnt doing this for free. He is doing it to get more clicks on his website, so he can charge advertisers.

      Had he no “premium content” for sale or ads.. then yeah… hed be a nice guy.

      Make no mistake about it.. hes getting paid for this.

      just because YOU didn’t pay a dollar to use this tut doesn’t mean those 80k subscriber wont be featured when he goes to sell ad space on this site.

  • Alaa

    RSS = 80.232
    lets do it man

  • al

    converted the layout to WP, not that hard to do, just sliced up the index.html file BUT adding the tweet entries to the page, the last 3 posts, and the button links to the page has been an ongoing challenge. been working my way through how to execute that, cannot get the button link to work, not for now anyway, but am displaying the last 3 tweets OK and the last 3 posts OK.

    not sure where all of the links should point to, and lots of other questions still to be answered, hopefully the final chapter will appear shortly and I can see how Jeffrey would do these things.

    anyhow, an interesting exercise

    Al

  • Tom

    RSS = 90,422 -> Time for the conversion ;-)

  • Marc

    This tutorial is just awesome. Thank you Jeffrey! More please!

  • http://www.jordantwiggdesign.co.uk Ryan

    Now we have hit 90,000+ readers when is the last part of this tutorial going to be released, can’t help but feel little let down that is taking so long now!

  • http://letandoor.vn druchip

    must have tuts !^^

    ahh lolz >> 5a video >> font-size: verdana, helvatical, arial……

  • http://techblog.julianlaval.com Julian Laval

    Right, when is this last part being released?! It really is a great tutorial.

    I posted it on my blog as one of three great, inspirational tutorials on web-design, I hope you don’t mind ;)

  • Luis Fraga

    When will be realeased the last part??

  • James

    he said on march 22nd he will finish the series…..April 4th… still nothing.

    This is why web designers get a bad rap for not finishing stuff

    • james

      Sorry.. I meant May 4th

      as in 6 weeks after march 22nd

  • CrazyK5

    When are you going to continue this series? Didn’t you say when nettuts+ hit 80 000 RSS Subscribers? I would love to see how you would convert a page to a WordPress theme/template…

    peez

  • http://www.lk-webdesigns.co.uk LK Web Designs

    wow I love the design I am going to start on this tutorial now :)

  • Leigh

    In chapter 4, I cannot seem to make columns only rows. Everything also stays left aligned, not centered. I compared my html code and it is exactly the same as the source. Not really sure what else I should check. Can anyone help me?

  • Felipe

    Hi, Jeffrey,
    Your tutorials are really good. I found this serie especially useful for me.
    I wonder when you will publish the final chapter, Convert Finished Product to a WordPress Theme – (available when we hit 80k RSS subscribers).
    I hope you will do it soon.
    Thankyou for your work!
    Felipe

  • Oktay

    RSS Subscribers 82,523

    part 10 please.

  • Fred

    Hi

    just after waiting nearly 6 month i believe it wouldnt be finshed.

    So, i have to say thanks for the great tutorial and how you did it. I like the jeffrey way ;) and i have learned a lot
    And who knows, may be one day it will be finished

    Have a good time and keep going

    Greetz from germany
    Freddy

  • Fred

    Hi again

    hm looks like nettuts don’t like disapointet useres or may be my comment was missunderstood.

    I would only say thank you for that massive and first class tuts, tricks and hints you give to the community and a lot of them for free.

    I also would know that is a lot of hard work to do that all and i know most of authors are buisy and must eat and drink to.

    But i pretty new to Worpress and turn a html template to WordPress, is the thing what i want to learn, and the Templatee, wich love too, i would use for my personal site. So i’m a little disapointet.Amd when i look under Session it’s marked as “Completed”. So i asume it is finished

    Or maybe my english isn’t good enought that it must deleted

    So once again big thank you and sorry for my english

    Freddy

  • Shaii

    Hi Jeffrey,

    first of all, thanks for this series of tutorials, I have just started using MacVim and this was the perfect way to practice and get the hang of it.

    The videos so far are great, but when it comes to slicing the PSD, I personally find it easier to just hit “Command+Shift+C” and then pasting it into a new document rather than having to keep flatten the image and then un-flatten it again.

    Can’t wait for the WordPress conversion video! Keep it up! :D

  • http://www.adoration.co.za Gavin Wood

    Jeffrey, know you are a busy guy and all. but is there perhaps an ETA on when you will be finishing this tutorial series with the WordPress Build?

    There are so little decent from start to finish tutorials on building a wordpress site.

    Another random question – could you perhaps do a tutorial on the “320 and up” with html5 boiler plate. seeing that everything is going towards mobile and ipad I think this could make for an awesome tutorial.

    enjoy your stuff tremendously

    Gav

  • http://www.adoration.co.za Gavin Wood

    Jeffrey, know you are a busy guy and all. but is there perhaps an ETA on when you will be finishing this tutorial series with the WordPress Build?

    There are so little decent from start to finish tutorials on building a wordpress site.

    Another random question – could you perhaps do a tutorial on the “320 and up” with html5 boiler plate. seeing that everything is going towards mobile and ipad I think this could make for an awesome tutorial.

    enjoy your stuff tremendously

    Gav

  • Chris

    Now suddenly we are at 75,000 readers… tsk tsk… Over 5000 subscribers unsubscribe in a day?
    You must have made someone really mad. :)

    Part 10 Please :)

  • pecasso

    no way, this tutorial will not be finshed at all. I can garantie it until we become vey old man and womens.
    you know. i was kidding?§§
    i hope you will use php oriented object programmig with wordpress in the last part to show us how to use this kind of code in the reel and full project.

    thank you jeffry way you are doing a lot don’t change keep doing.. tutorials

  • Behrang

    Dear Jeffrey,
    great job thanks for your work.
    and another thing what software can I use instead of snippets and macVim in windows?

  • http://brendancoffey.ca/ Brendan

    This tutorial is fantastic. I just really hope it actually gets finished with the WordPress theme conversion. I’ve been waiting for months…

  • samir

    what about converting to the wordpress site part 10
    it seems to be cannceled
    thank’s jeff

  • samir

    chapter 10 convert a finish product to a wordpress finish theme untile wile
    we were cheated by jeffry way

  • http://espn.com Jason

    So instead of finishing what you started.. you just delete the text where you say your going to convert it to a wordpress site?

    Show some personal responsibility

  • http://www.madruk.us madrukus

    That was a great tut, I like all the tool tips you gave. Hope to see the WP conversion as well. Thanks

  • Al

    What the? Where is the WP conversion? All these months and nothing. The worst.

  • Idan

    Can you tell me how did you add the giude lines in the photoshop?

    • eddieA

      So I am looking through the comments to see if anyone has found the last tutorial (Converting into a Word Press theme) and I come across a question I can answer. (even if it was a sarcastic question) I know how it feels to ask for help and wait for a response, so here it is.

      Guidelines in photoshop: Simply drag a line from your rulers. To turn you rulers on: go to the Photoshop menu bar select: View/ Rulers. (On a MAC, command R)

      That should show your guideline. If you have turned your guides off, turn them back on by selecting View/Show/Guides. (On a MAC, command : )

      You might want to head over to: http://psd.tutsplus.com/
      to get acquainted with Photoshop.

      There, my karma is a little more balanced by helping someone via tuts. I know I have been helped a lot from you guys.

← Older Comments
Newer Comments →