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 →
  • http://www.fishmemory.net fractalbit

    SUPER tutorial series. One small mistake though: The style.css in the zip file is 0 bytes, please fix it. Thanks again!

    • al

      are you talking about the chapter 6 d/l or the original at the top of the article? if at the top, then yes, that was the case. to see the code for the latest chapter, look under the screencast image for the d/l for that screencast

      Al

      chapter 6 d/l does say 5d but it is actually for chapter 6, found this was the case after unzipping it

  • Dave Allen

    Jeffrey,

    I wonder if you realise just how significant a thing you are creating here? I mean we all follow the likes of Zeldman, Keith, Malarkey, Meyer, Santa Maria etc and we go to the conferences and learn great stuff. And their books are often essential. But to actually put it ALL into a screencast so clearly, well, it is astounding. The only other screencasts to do this were Chris Coyier’s at css-tricks and I’ve watched those countless times. You are truly giving people the skills they need to create for the web, in an immediately understandable way. People will be linking to this series for a long time.

    So don’t push yourself too hard with deadlines and rush things. We’ll all be here in January I assure you. Fine work.

  • NE

    var Site= {
    init : function() {
    this.tabs();
    },

    tabs : function(){
    var tabs = $(‘#secondary > .tabs’)
    uls = tabs.find(‘> ul’),
    tabHeadings = tabs.prev(‘#tabHeadings’);

    // listen for heading clicks
    tabHeadings
    .delegate(‘li’, ‘click’, function(e){
    var li = $(this);
    hash = li.children(‘a’).attr(‘href’);

    //change the selected class to the selected one
    li
    .siblings()
    .removeClass(‘selected’)
    .end()
    .addClass(‘selected’);

    //grab the hash of the anchor
    hash = li.children(‘a’).attr(‘href’);

    //show corresponding section
    uls
    .hide()
    .filter(hash)
    .fadeIn(500);
    e.preventDefault();
    });

    }
    }

    //Let’s roll!
    Site.init();

  • http://crunchtoast.com Sangus

    Should I be using border-radius in my CSS? It’s not supported by IE7 which is my main concern.

    Thanks.

    • http://www.lastrose.com Gabriel

      The nice thing about border-radius is that it degrades nicely. In IE7, they won’t have a rounded corner, and most of the time, the viewer won’t even know what they’re missing. The trick isn’t to get the page to render perfectly and identical in every browser, but rather that it be functional in every browser, and look good in every browser. As long as you’ve covered that, you don’t have to worry that IE7 users won’t be seeing your rounded corners. If you truly feel you must have rounded corners, I’m sure you could implement it with a conditional javascript to target browsers that don’t understand rounded corners.

    • http://montanaflynn.me Montana Flynn

      Their are many techniques for rounded corners, border-radius is the easiest but comes at the cost of not being supported by IE below version 9.

    • jack

      css3 pie is the best for this

  • http://daniel-salazar.com Daniel

    I had never actually seen Jeffrey Way before until chapter 6 of this video series. I always pictured him to be an older guy with a baseball hat and mustache for some reason (not sure why its just what I pictured). Good to finally see ya Jeff… Keep up the great work.

    • frei

      Yes dude, I’m surprised too.

  • http://www.nunomedia.com Nuno

    Jeffrey, everything we can say is Thank you.

  • http://blog.smronju.com smronju

    Expecting chapter 7. I’m too much interested about last two chapter.

  • Levente Dudas

    I am pretty much an absolute beginner.

    I’m using Photoshop CS3 on Windows XP and I’m trying to slice the PSD, but got stuck at the very beginning. The “Auto Select” tool is setup as shown in the video, and when selecting the Facebook icon the “Alt” + click is not working, i.e. the Marquee-type selection do not appear, nothing gets selected and can not be copied.

    Does Photoshop needs a special setup in order to have the “Alt” keyboard work as shown in the video?

    I’d like to learn it the way shown in the video, so please help. Many thanks.

    • Levente Dudas

      I resolved it!

      Holding “Alt” + double click on the item’s thumbnail opens automatically a new document. All I need is to save it for web as a next step. Great.

  • ed

    what happens in the beginning of this tuts, jeff ended it with a bang!

    if this is a stage performance, jeff deserves a standing ovation.

    do you guys agree?

    • Levente Dudas

      ed, I surely agree!

      excellent tutorials.

      many, many thanks Jeff.

    • Wolle

      100% agree!!!

  • http://jamiebrewer.com Jamie

    First time I’ve seen you face I think. Anyway who ever signs your paycheck needs to double it. You’re awesome!

  • Unkwn

    Where is chap 7?

  • Jordan Blount

    Thank you so much for making this series.

  • Ray

    He’s probably waiting until after Christmas for Part 7.

    • SAM

      What’s up?
      This is 26th Dec!

      @Ray: Oh! maybe!

  • Alaa

    anyone knows the font type and size that jeffrey is using to code in espresso ?
    i got the same code colorings in Dreamweaver..but i dont seem to be able to get the same font and font size .

    • http://ecustom.ca/ Damon Bridges

      Most likely Monaco 9pt, that’s the standard “programming” font on Macs, i may be mistaken because I’m just using some general logic here, and not actually checking against the screencast.

      If you have a Windows comp, you can download a TrueType Monaco file, but it still won’t look the same as a Mac’s rendering due to how Windows handles it’s fonts.

      Hope I could be of service.

      • Alaa

        Thanks a million dude..
        thats a great service.. i got the font for free..
        in dreamweaver i couldnt get the same feel as espresso..but with PHPDesigner 7 its identical to the mac’s espresso .
        thaks again .

  • nehil jain

    Hi, i Loved the tutorial and tried to make a design of my own.
    I had a basic problem in the layout. The main section that i have created has two div tags blog and sidebar
    so when i applied background color to the main div tag it was not applied can you tell me why?

    Hot from the blog

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Flickr ticker

    About Me
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Michael Dixon

    This was a great Christmas and lifetime gift. Thanks Jeffrey!

  • Lakshya

    Thanks for the tutorials…They are really great…

  • Ryan Melnikas

    I am currently in school at the age of 17 and have been looking to learn how to code for the web and websites, I have used google so much and couldn’t find anything.

    Then I came across Nettuts and well my knowledge has become better, i started out knowing the basics of web design using Adobe’s Dreamweaver but this website and tut has given me soo much more knowledge.

    I’m even considering becoming a premium member the work on the Tuts+ sites are so well done.

    Jeffrey Way i thank you for the great work you do and all the hard work you put in to help us understand.

  • Emil Stenderup

    You said you wanna make the little arrow (under the breadcrumps) with just CSS. Where’s that?

  • DADE

    Hey Jeffrey,

    Small mistake @ #breakcrumbs gradient.

    background: -moz-linear-gradient(
    top,
    #298192,
    247184 /* Place “#” over here. */
    );

    Thanks for good tutorial.

  • http://luznet.com pluznet

    I hope that the Jeff do not forget on that series to allow us…. I can not wait.

  • Mike

    If I need to supply code I can, but when adding the footer background image I set the overflow to hidden and in dreamweaver it looked correct but in firefox,chrome, etc. the footer was moved to the far right of the screen and i couldn’t event scroll over to see it all. Is it an html issue or a CSS issue and any suggestions for fixing it?

  • http://ros-ka.com Peppe

    Even if this is a free series, I must say that the Premium sites are all well worth the money.

  • Luuk Bijveld

    Where are the last episodes? I want to see them!! :D

  • Robert Bailey

    He is late on Chapter 7 and he set a pretty high number of RSS feeds 80,000 and seems like every day hundreds drop off. So not sure you will see Chapter 8 (I was looking forward to that one.)

  • Miguel

    Could someone tell me some snippets tools for windows.

  • http://www.mdcalc.com Graham

    Thanks for the next one, Jeffrey! Is this your snippets repository that we can borrow from?

    • Al

      Graham,

      as well as

      snipplr Nettuts

      couple of other WP snippet repositories:

      wp-snippets.com, and
      css-tricks/snippets

      there may be more that I don’t know of

      if I recall correctly, envato bought out snipplr earlier this year

      just doodling until next screencast becomes available, hopefully this year

      Al

  • Ruana

    Hi,
    I ‘m trying to follow the tutorial but unfortunately chapter 3, 6 and 7 are seemingly not working (error message on screen, 28. 12. about 10 p.m.).
    Therefore I downloaded all chapters, hoping that I could recreate the slicing steps from looking at the final images and also learn how you styled the markup from the style.css.
    I found that the SiteName folder was empty, I only got the index.html, scripts.js and the psd file – no images, no css. I then tried to use the style.css from chapter 6 (building the tabs) and 7 (creating the form) but this didn’t work either. It destroyed the layout in IE 7 (with the exception of header and navigation/search bar). I must mention that almost all people I did Websites for, usually small companies (2-5 people), are using IE (mainly v.7).

    Am I doing something wrong? Did I misunderstand (English is not my native) something?

    Any help would be appreciated.

  • al

    Ruana:

    the source code for each chapter follows the screencast place, and each is the complete HTML/CSS code for the chapter and the web page up to that moment. you should need to download only the one that is just under the chapter 7 screenxcast. the one at the top may be the empty one.

    I have not had any problems with any of the videos, not sure what you problem is.

    Al

  • ramon caldeira

    nice videos! what about chapter 8?

  • Al

    chapter 6 alternative: Organic Tabs from css-tricks.com

    it will be interesting to compare how the two work, both seem to be doing the same function

    Jeffrey,

    when you did your version of this function, I guess this is what was brought to mind right away for me. more than one to skin a cat, as they say.

    Al

  • http://photosbyluis.net Luis Camberos

    Excellent tutorial series Jeff! I can hardly wait to see this converted to a wordpress template!

  • Luis

    Jeffrey,

    I cannot center the header with the class:”container_24″ on internet explorer, but strangely it works on firefox and chrome. I tripple checked video 1,2,3, and 4 and I followed your tutorial step by step, but no results on IE.

    Can you help me?

    Luis

  • meltz

    thanks for this awesome tutorial series .. get to learn cool new css3 tricks and html5 elements

    hope to see the last chapter … regardless rss subscribers hit 80k

  • Luigi

    Hi,

    I was just reading about TDD on nettuts+, before watching this fresh, awersome screencasts (thank You, for Your work, Jeffrey).

    So now I wonder…. is it reasonable to implement tests (QUnit alike) for js code similar to this written in chapter 6.

    And how to prepare them? I mean… I get the theory, but most of TDD examples show only how to check is 2+2 equal to 4, or other trivial stuff, wich have little common with real – live problems.

    Is it possible, that You could think about maybe making someday a screencast about TDD in practice, or use it in screencasts like from this series.

    BTW, maybe someone knows a source for painless way of learning this testing things, because i can’t google anything good. Either to simple, or to complex ;]

    Luigi

  • http://glamouriser.com Maddy

    It’s the 3rd or Jan now, and the one about compensating for IE still isn’t up (was set for the 29th).. Any idea as to when it may be put up?

    • ramon

      dude calm down

      first of all jeffrey is doing this for free when this could easy be a premium tutorial, and second at least you should be thankful.

      • ramon

        By the way thanks jeffrey for doing this

  • Kajstek

    The best tutorial I’ve ever seen. THX

  • Potado

    I think you forgot to add a # thing before the second color code of the gradient of the blue bit under the banner at 16:19 on part 5b. I also think you should change the shadow color of the featured images, you sampled in the blue area below and now the shadow is now blue in the grey area above at 14:15 on part 5b.

  • Axit Patel

    Great tutorial as always. Just a small question: How did you get the tabs in the finder?

    • http://www.angelpulido.com Angel

      It’s called TotalFinder

      You can find it at totalfinder.binaryage.com

      • Axit Patel

        Thanks a lot :)

  • ramon

    we need another 5000 rss suscribers to get video 9 come on
    we can do it

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

      Only 2000.

  • shawqi

    thank you Mr. Jeffery for your awesome and unique way of teaching , but could you please compensate for IE6 specially fixing small size png images,since ie6t still has a lot of clients.

    another help,please.
    there is download problem : I download 0 size css,js
    thank you

  • http://mimrankhan.com Imran Khan

    Again Jeffrey way… nice one … keep going Jeffrey roksx…..

  • Filipe Carrano Pacheco

    I’m looking forward for the wordpress one!

  • http://www.buttahdesign.com Barry La Vette

    Thanks for another fine tutorial.

  • Altiar

    Can you please do some tutorials that demonstrate how to convert a web design from Photoshop to HTML and CSS without using the grid system.

  • earaya

    Standing Ovation. I have only been a web designer for a short period of time and although you make me feel like an ubber rookie I wish to be you one day.

    You are a genious!!!

    Thanks!

  • Neonailol

    in tutorial you say that we don’t need to compensate for ie6 on portfolio sites
    but lot of clients using it, especially corporate . so when they go to you web page and see chaos in ie, they might thing that you bad developer…

  • Paul

    Jeffrey, you did it again.

    This is priceless. I can’t believe you are providing so much knowledge for Free.

    Thanks!

  • Wolle

    79410 subscribers!!!! hopefully we get to 80k soon!!! Great Job Jeffrey!!!

  • Ian

    80k on the way! Great job everybody.

← Older Comments
Newer Comments →