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
  • Alex

    This is disappointing to say the least. While there is valuable information here, Jeffrey has not come through in the end. It says “stay tuned” but that’s probably a lost cause.

  • Behrang

    Hi Jeffrey,
    First thanks for your great tutorial,
    I created tabbing system using your code every thing is good except unfortunately the default tab with class selected don’t show content until I click on it what you think ?

  • picasso

    is there any volunter to finish up this work.
    i mean the part 10 transformining the html & css template to a wordpress theme
    thank you
    perhaps the will be one in wp.tutsplus.com

    • AlecsV

      we’ll have to wait for a long time until that happens..they said 80k subs on rss…there are merely 12.000

  • tesa

    IN_CRE_DI_BLE :) this is so helpful for beginners, THANK You!

  • RZV

    Hello ,

    can help me someone with a program for windows 7 ?
    Espresso is only for mac.

    Thank you

    • Alaa

      notepad++
      PhpDesigner 7
      Dreamweaver

      • http://theundergroundinternet.wordpress.com vimes1984

        netbeans:)
        and wamp all the way!!!

  • dmsumon

    In the first video the author used a built HTML5 snippets. Please can anyone tell me where I can find thee snippets to download? I am a windows user and basically use Aptana or Dreaweaver IDE for HTML and CSS coding

  • hoang

    At chapter 5a, I saw that you type “font-size: Verdana, helvetica,…”

  • http://www.esylhet.com ash

    chapter 02 & chapter 04 link does not work.

  • sherif

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    chapter 02 & chapter 04 link does not work.

    plz , reupload these videoes

    • http://laranzjoe.blogspot.com lawrence77

      everything works fine dude..

      check this: http://blip.tv/nettuts/rss

      and search for Convert a Warm u find all those chapters.. there are two m4v formats there, so for HD version download the second m4v(thats is higher in size)

  • JonBoy

    “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.”

    Seriously…. I have been waiting for this episode since chapter 1! I think nettuts is on the way out. No-one else except Andrew Burgess and Jeffery Way post on the site regularly either!

    Disappointing.

  • http://alexanderbratrich.jimdo.com/ AlexanderBratrich

    Ehh,… yeah. This Tutorial is awesome, I understood it, but:

    It worked with Vim on my PC, but with the domain of my provider it doesn’t work.

    Can somebody tell me, how to convert that whole stuff into 1 HTML-Code, 1-CSS Code and some pictures? (not more.)

  • http://www.macview.ca kiwi

    “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.”

    Seriously…. I have been waiting for this episode since chapter 1! I think nettuts is on the way out. No-one else except Andrew Burgess and Jeffery Way post on the site regularly either!

    Disappointing.

  • Nick_M_Blain

    This tutorial is F***ing awesome man! So can anybody tell me how long on average it takes a beginner to get anywhere close to being as skilled as Jefferey is?

  • http://www.xaifu.com xaifu

    Great, marvellous!!! Really really useful tutorial for a begginer like me, it helps me a lot to understand the whole process.
    Thanks!

  • kema

    hi guys, i’ve hit a stomp at chapter 3, can’t seem to get the 960 grid to work even though i’ve done everrything as the tutorial says. please any info would be appreciated. i’m a newbie! so pls be gentle with the replies. thanks

  • kema

    i’m using notepad++ by the way plus is it possible to get snippets working on notepad++ like the one used in this video also wanted to know if notepad++ helps you write code like dream weaver.

  • http://tinachendesign.com Tina

    Thanks for doing this! This has been the most detailed tutorial I’ve found of turning a PSD into a web design. For a newbie, this was extremely helpful. I was stumped before I found this. :)

  • Irene

    Woow, you are a very great teacher!
    Your videos really help me to understand all about this CSS thing,
    but it’s still a bit too fast for me to remember and apply it in my work..
    I hope I can catch up your speed :)

  • Patrick

    Hey Jeffrey, I just wanted to stop by and say that I really appreciate all the time you have spent creating these tutorials. You go through each step thoroughly which helps a noobie like me out tremendously and you even add in some extra tips that save me time. I was completely stumped on how to convert psd’s to html / css and these tutorials have put me on the right track. Thanks a lot Jeffrey!

  • Sonusmac

    There is some problem with video 5C :(
    Not loading…
    Please check!!

  • http://bagusfikri.com Bagus Fikri

    c’mmon about the convertin to wordpress :D

  • http://twitter.com/TahirTaous Tahir Taous

    hay jeffert when will you convert this into wordpress theme. we are waiting. Please do it. You said when there will be 80,000 subscriber but now there are more than 96000.

  • AL

    Wow, great tutorial.. got to know a lot !! Eagerly waiting for the final video for converting this into a wordpress theme. BTW, Jeffrey Way, how did you make 24 guides in photoshop… is there any particular way of making specific no. of guides in between any two guides ? =)

  • http://www.kesar.es César Rodríguez

    RSS Subscribers
    96,155 :-)))

  • chuck

    ur kind of a jack ass for using w.e tool ur using to type less…this tut is for beginners, shouldnt you be doing tuts on our level and not whats convinent for you?

  • http://maurizzzio.com Maurizzzio

    Thanks Jeffrey, everything you did here made me go into html design, thanks for all the useful snippets and plugins like zen coding, firebug, coda, espresso and so on. THANKS!! AWESOME MINDBLOWING TUTORIAL!!!

  • mnowluck

    This code works perfectly in Chrome, but not in firefox Browser as I’ve space between “ABOUT US”… so how do I fix that?

    Home
    About Us
    Products
    Gallery
    FAQs
    Contact Us

    And CSS of

    *****************HEADER***************/
    header{
    overflow: hidden;
    color: white;
    }

    header h1{
    margin: 25px 0 0 21px;

    }

    /*****************Navigation***************/

    nav{
    background:url(images/menu.jpg);
    width: 960px;
    overflow: hidden;
    float: left;
    margin-top:5px;
    height: 58px;
    line-height: 58px;
    }

    nav li{
    float: left;
    margin-left: 0;
    margin-right: 25px;
    }

    nav a{
    font-size: 16px;
    color: white;
    text-shadow: 0 1px 0 #281f1b;
    padding: 4px;
    }

    nav a:hover, nav .selected{
    background: #be5302;
    border-bottom: none;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #fccc85;
    margin-right: -2px;

    -moz-transition: background .5s;
    -webkit-transition: background .5s;
    -o-transition: background .5s;
    transition: background .5s;
    }

  • http://www.raw-events.nl/blog.html Bas

    Thanks for this amazing tutorial, I have one problem, I used this tutorial to build my comments and post section. I still don’t get it to close the first child in IE. Someone else have this problem?

  • dsd

    Jeffrey Way your way too fast, its kind of frustrating when you go so fast and expect your audience to be at advanced level…

    • http://frhetoric.com Saïd Martínez

      uh, pause button?

  • Daniel

    Wow lol half the people are pissed on here lol. What i’ve gone through so far has been good at first i was just confused and looked up everything and im glad you started to use the zen coding / whatever you used cause that has taught me how to save a bunch of time.

    When is the last part coming up? :)

  • SomeGuy

    “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.”

    You’re f***in liars…. where the f**k is that WordPress conversion tutorial?
    you made it to get subscribers…

    • lolcats

      RICKROLLED!

  • den

    RSS Subscribers 103,471 .
    your target is complete .so now please post wp conversion

  • http://www.cutevideoclub.com cute video club

    nice post i like the way that you used to explain us.

  • James

    Could you please not post my previous comment… I was obviously having a little temper tantrum trying to follow along.

    Jeffrey is a very good teacher.

    Thanks!

  • Sara

    Thank You Jeffrey!

  • http://www.facebook.com/oyvind.skjelstad Øyvind Skjelstad

    Hi!
    How do you slice when its more complexed background ?

  • http://twitter.com/thejkhc Joseph Chang

    so I along with a lot of the people below would like to see the final part that is the conversion into wordpress… =

  • J

    Amazing!

    I went from knowing very little about web design to creating my very first coded from scratch project based on your tutorials. Extremely informative and well done.

    To those who say he goes too fast…there is a pause button you know. Also, amazing how entitled people are. This guy spent a large amount of time compiling this great tutorial series for free. He owes you nothing. The hate comments are unbelievable

    Thank you so much for creating these. i can never repay the knowledge you have given me!.

    J

  • Davallen

    People, forget about the WordPress conversion part. It’s not gonna come and they don’t even bother to answer your questions and explain why the WP conversion doesn’t come.

  • D088

    Fantastic tutorials! Been on the server side of coding for years, but never really cared to know about design. This has been a fantastic help in understanding the rest of the puzzle.

  • http://www.facebook.com/shesu Sheshim Alize Shesu

    Hai you didn’t talk about the Arrow(below the banner) & calling the external font.And thanks for the great tutorial.

  • ron

    960 framework is a rosponsive site ?!

  • masterashim

    Someone in the internet does convert your PSD to HTML just for $5 in only 1 day. Believe it or not ..

    http://fiverr.com/idesignyou/convert-your-psd-to-html ..

    http://fiverr.com/psd2html_css/convert-your-psd-into-htmlcss-within-1-day

  • CJ

    The grates web design video tutorial on whole wide web :) I’m a Web Designer/Developer my self and I needed to get brushed up with latest buzz. And you did it really well, not much people has talents & time to compose this kind of video tutorials. Thank you very much.

    PS: I’m also interested to know how much one should charge for this kind of PSD to HTML page.

  • Badar

    Many thanks

  • http://www.peoplesinnovation.com/ DiptiInnovation

    Thnks for sharing this information, Its very useful.
    We also convert your design PSD to HTML and XHTML / CSS.

  • http://www.facebook.com/kiander Timo Kiander

    This is awesome stuff! Just makes me wonder … why are the h6 tags and other stuff inside of h2?

  • http://twitter.com/FRchris92 Chris de Ronde

    Where’s the WordPress part? Really need that :(

  • Kayla

    I’m a junior in Miami Valley Career Tech Center and to me coding is very hard.. Do you have any tips on trying to get a better understanding?

  • Arthur Weiss

    Great titorial! Thank you.
    I work with intelligencestorm.com to convert my photoshop mockup to html

← Older Comments