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 →
  • dini

    Jeffrey…

    Hope you had touched Modernizer too… to implement fall off for CSS3
    As it was already on html 5 Boilerplate , it was a bit easy…
    No Prob..AWESOME!!! t hats what to say

  • ramon caldeira

    almost hitting!

  • http://www.sms2follow.me hruhsikesh

    Hello Sir,
    Thank u so much i am always searching for such great learning content.
    As we are new to development in web technology.

    Thank u sir..!

  • Robert Bailey

    I think his numbering system is messed up 79410 subscribers yesterday 77,688 today. It seems to go up and down by 2000 every day.

  • Al

    if you know you are going to convert the HTML code version to WordPress, could you not start off with a structure like this in your SiteName container folder

    css/
    images/
    js/
    index.html
    style.css

    or is this considered bad form for an HTML template?

    Al

  • Sam

    I just want to say thanks for a great site and a great tut. Believe it or not I am a web designer because of this site I do work for a company now and all from this site (no school for web design at all).

    I watched a few videos here and followed the instructions and now I have designed some of the best sites on the net. I would like to thank tutsplus for the time they send making these videos because it is just amazing that someone would even spend all that time for us the users. Thanks!

  • Steve

    Excited for chapter 9! This series has definitely expanded my knowledge of css3 and html5, thank you Jeff!

  • White

    Hi Jeff,

    Did you try the final work (Chapter 8) in IE 8 in Windows OS.
    The head nav is not rendering horizontally, no styling at all and there is some other mess too.

    Anyway thank you very much for your amazing tutorials extended with lots of other very useful hints as always.

    Greets’
    White

    • Tom

      Hi White,

      did you allow scripts or activeX to be executed? IE will ask you to when opening a locally stored page with scripts…

      Tom

      • White

        Hi Tom,

        Hey Tom, thank you for your help.
        I have a windows in French language, and I don’t speak French, I was clicking the warning message in IE and thought I’m clicking correct submenu to allow activeX.
        Your message made me check in details and translate word by word what am I clicking and indeed I was wrong before.
        Now I allow activeX and everything is fine.

        Thanks a lot again,

        Cheers,
        White

  • Raimonds

    Great work.

    Looking up to see final tutorial for this project.

    P.S. Isn’t RSS counter messed up? Every day it changes for about 2k.

  • Ramon Caldeira

    what’s up? it’s over? ‘-’

  • http://www.fix-computers.net laptop_repairs_manchester

    great article this is just what i needed, many thanks

  • Robert

    Are you going to finish this project. Chapter 9 says Jan. 5 now its the 11th I understand a day or two Maybe this is why 2000 people drop off the RSS feed a day

    • wolle

      how dare you pressure him that way … this is premium quality content for FREE!!! and if he needs some time to creat it he damn well deserves it. creating a website takes a lot time and recording it takes even longer.

      this site and especially jeffreys tutorials are the best source on the web and i cant imagine that not even 1 person would unsubscribe the rss feed because the FREE content is late ….

      you should learn to be patient and thankful for what you get here!!!

      fyi: as already previously mentioned: the changing subscriber count is a problem with their rss tool and also is only an approximate number.

      …

      • al

        we are not putting any pressure on Jeffrey obviously, he did that himself when he published dates that he would put out the various chapters in this series. I think it is because we cannot wait for each chapter to get here and read that there has been so much comment about the missed dates. that is a complement to Jeffrey and the quality of the series, but he has fallen down in not keeping to the chapter dates published. there has been no explanation for the delays so how else should we react to something that we want to see end successfully?

        Al

      • raztine

        It’s not a personnal attack on Jeffrey, he’s the main reason i progress so rapidly in my learning of html and css, but as Al said he did put pressure on himself by putting up a date and i’m certain he knows it, that’s the way to keep us (freelancer) from falling asleep on the starting line. Nonetheless, i can wait to see the and learn from the next chapter. Keep up the good work Jeffrey. :)

  • Alaa

    488 rss subs to go :D

  • Rijad

    Very nice Tut, thax alo jeffrey.

    have one question, what kind of plugin do you use for that ff command to test run your project in Firefox?

    Thax alot.

    • Rijad

      Hi, found it on your github.

      thax slot for the tutorials, you’r good teacher.

  • jk

    It’s now 478 RSS left. Maybe will be 80k as sun rises at Down under.

  • abhijeet

    hey jeff where r u ?

    where is January 5th part ! !????

  • La Antorcha

    Give the guy a break, this series it’s awesome. I know i can wait a little longer for more of this content.

    Sorry my english.

  • http://ywww.yahoo.com lonnie

    When his dock comes up.. i see an Internet explorer icon

    Does that mean he has that browser on his mac?

    If anyone knows how to use IE on a mac i would appreciate it

    • Raimonds

      I think he explained it on video about IE.

      Raimonds

    • pixelBender67

      Wine Bottler , I think is the name of the program that I saw Jeffery using, but I think there are several different ways to test IE on the mac…Google is your friend =)

      • http://yahoo.com Lonnie

        I have googled the question before and from what i found was that they stopped developing IE for mac around IE6..

        And since im new to macs i didnt want to start downloading programs that are of unknown quality to me and my new 27″ i7 Imac, so i stayed away form questionable looking sites and programs.

        But i will look into the program you suggested…

        Thank you

    • http://www.celticshadows.co.uk Rob

      You can use something like VMWare Fusion and it’s Unity mode I think. At least you can on Windows and the functionality is pretty much the same across platforms.

      Just run a number of virtual machines for Windows for the IE version. Vanilla XP comes with IE 6.

      There is also Parallels and Virtuabox which you can use if you don’t want to pony up for VMWare.

    • Ben

      Lonnie,

      I think that is as shortcut to his virtualized Windows install. I believe that he is using VMware Fusion. It is a Mac only application for running virtual environments.

      When Fusion is running, you can put it into “Unity” mode. This will make allow the programs running it to become detached from the environment.

      You can do similar things with VMware Workstation/Player, Virtualbox, etc.

      Ben

  • Gürkan Lokman

    Hi ..
    Could you tell us which programs do you have on your mac. i will install them and i want to learn how to use.

    Could you send us a list of this programs thank you very much.

  • http://chrisblackwell.me Chris Blackwell

    Oh no. Yesterday 79,000+ and today 76,000. We are heading in the wrong direction to get this tutorial finished off.

    I love your work Jeff, but let’s get this one out the door, or at least throw us Premium members the last two videos.

  • http://www.looksawesome.net Stevo

    Would it be possible to download all these videos? Some of the links are broken. Viewing internet is expensive especially HD. Nice Tutorial, probs the best web tutorial starting how to make a website from scratch. But why is the psd template a wordpress. Would it be really possible to convert from psd to html and css THEN to WORDPRESS?

  • al

    see from Twitter that Jeffrey is now in Melbourne, Australia visiting Envato so probably the end to this series will be extended even further

    Melbourne – been there many years ago to visit relatives in Australia, nice part of the world, wasn’t rainy then and would never have thought flooding would even be possible in Australia, sure helps destroy the image you have of a dry Australia

    Al

  • http://www.creative-end.com Hugo

    Can’t wait for the last 2 parts to this tutorial. Quick question, is there a way to have a facebook feed, instead of the latest articles feed on the home page?

  • pixelBender67

    From what I understand is that there are some serious flooding going on in Australia right now, I hope that all is well with the guys from Envato !

    • al

      Envato is in Melbourne, the flooding is up north around Brisbane area

      Al

  • http://www.drivvedwebbyra.se Fredrik

    This tut is getting really long now, but i like it! GOOD WORK on this one… think i might have learned a trick or two!

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

    Am i assuming that when jeff said launch of next chapter is 5th Jan he actually ment to write 5th of Feb haha :-) Nice tutorial :-)

  • austin

    The RSS counter ironically increases 1k, and decreases just as fast every day. It’s been in this margin for the past 2 weeks.

  • al

    still waiting for the final instalment here as well

    another topic:
    has anyone else here converted the site to WordPress and can show us his results?

    Al

    • Robert Bailey

      I have not and was hoping for that segment. I guess with 74,000 RSS feeds we won’t see it here either. I will be shocked if he finishes the last chapter. I’ll have to put this one down as another tutorial he didn’t finish.

      • Sean Albers

        That seems a little unduly harsh. =(

        Unfortunately, it seems the RSS feed count sways back and forth between 74k and 79k, but never quite peaks at 80k. So you’re likely correct in that we’re not going to see the WordPress conversion.

        That said, I have started to make the conversion but haven’t had much time to dedicate to it unfortunately. It doesn’t look too hard, just plugging in specific WP hooks in the right places. The trick is adapting this design for pages/posts. I’ll keep you posted on how it works out.

  • pixelBender67

    Well on the upside, I learned a lot from this series, and if Jeff doesn’t finish it, well that would be a shame,
    although converting it to a WordPress theme is not too difficult, I don’t know what is up with the RSS feed.

    This is hands down the best tutorial I have come across for a site build, I was hoping to see the rest..

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

      It’ll be finished guys. Things are just a bit hectic, as I’m down in Australia for the month. As soon as I have some free time, I’ll wrap a bow on the series.

      • White

        Hi Jeff,

        I think we deserved an answer like this.
        It’s never late.

        Your tuts and work is always awesome and appreciated (at least by me), I know it’s really worth waiting for it. Many thanks by me!

        Good luck and have fun in Australia!

        White

      • al

        thanks jeff for the update

        enjoy your time in Australia, great place to visit, was down there years ago to see some of my relatives before they passed on. loved the trip but will probably never get back there

        was to the zoo in melbourne (featured elsewhere) as well

        Al

      • Mohamed El-Araby

        Thanks Jeff you are the best.

      • http://www.liamjaydesigns.com/ Liam

        Thanks for keeping everyone updated Jeff, and a big thanks for creating such a great series in the first place! :)

      • pixelBender67

        That sounds great Jeff, :D

  • Alaa

    if its ok.. i can convert this to Joomla 1.6

  • Max

    Hey, any ideas why i cant give a style to article and section tags? everything else works just fine, only these two. help please

  • Apple

    When’s the next few parts coming out!? I am really looking forward to the conversion to WordPress.
    Thank you!

  • Matt

    Hello, Can anyone tell me if i will jump in to the premium mebership option will i be able to see Chapter 9 ? Thank you in advance

  • Prax

    this has been a great series, what is the timeframe on chapter 9 coming out. Keep up the good work guys and thanks again for making this available.

  • Maciek

    speechless.. what a great project and the result is by far the best ‘site building’ tut i have ever seen. Cant wait for chapter 9

  • al

    see the comments above from Jeffrey Way regarding the last chapter, he is/was in Austalia and indicates that the series will be completed after he gets back to the USA, above he does promise that it will be completed, just no date for doing it, I guess we need to be very patient

    Al

  • Rijad

    Hi, i have a question for anyone that know if there is a way to solw the question.

    im trying to add images to the tab funtion. i would like to have a gallery that way, is there a way to do that ? any help would be great.

    thax.

  • jawad

    Hi Jeffery and Net.tutsplus.com.
    Thank you so much for this wonderful and helpful content for us new learners.
    Please keep up the good work.

  • http://vivekipedia.tumblr.com kaizer1v

    Will you be uploading Chapters 9 and 10 anytime soon?? We’ve got to finish the movie right!? :)

  • meltz

    waiting for chapter 9 and 10

  • Rasha

    where is chapter 9 and 10
    waitinggggggggggggggggggggggg

  • Lonnie

    Ahh… ive been checking back here since weeks before christmas…. cant wait to see the rest.

  • gavin

    All excited, been building my version on this tutorial….. 15 january..??. It kinda is 15 Feb already and no chapter 9… Whassuuuppp??

    no im hanging in anticipation…… :-(

  • Magnus

    This tutorial is absolutely amazing.

    I’m using it to make a website for my dad’s company but I’m having a few problems
    The first one is that my header background doesn’t show up at all.
    My main background color also doesn’t show up.
    And my footer doesn’t extend past the 960gs.

    This is really frustrating me.

    If anyone has an answer or suggestion to help please reply.

    • gavin

      you just referencing something wrong… post your code hera and ill have a look or mail me

      • Magnus

        What’s your email since my other comment won’t show up and if your not comfortable posting your email address send me an email to magnus_soccer_13@hotmail.com

  • mounir

    hope you will continue this tutorial very soon
    goood job. continue

  • Maciek

    probably we didnt hit 80k thats why chapters 9 and 10 didnt show up :)

  • Sonja

    aren’t you able to read?

    —————-
    Jeffrey Way says: January 24, 2011 at 4:17 pm Author
    It’ll be finished guys. Things are just a bit hectic, as I’m down in Australia for the month. As soon as I have some free time, I’ll wrap a bow on the series.
    —————-

    maybe, he just too busy at the moment. i’m also waiting for the stuff like you and update the page every few hours again. but he said, that he’s going to finish this chapter. he really does great work and we should give him the time, that he needs to finish it for us. so don’t put him in too much stress.

  • GunduzYuruyen

    (available when we hit 80k RSS

    ??

    How are videous 5 JANUARY ?=0==

    17 FEB

  • Rich

    Does anyone have a download link for the video of Chapter 2: Create the Markup

  • Fahad

    Here is the markup and sorry for previous comment

    Comments
    Catagories
    Archives

    Welcome To Our Site Welcome To Our Site Welcome To Our Site.
    Welcome To Our Site Welcome To Our Site Welcome To Our Site.

    POSTED BY: Someone On Photoshop Tutorial

    Welcome To Our Site Welcome To Our Site Welcome To Our Site.
    Welcome To Our Site Welcome To Our Site Welcome To Our Site.

    POSTED BY: Someone On Photoshop Tutorial

    Categories

    Catagory
    Catagory
    Catagory
    Catagory

    archives

    archive
    archive
    archive
    archive

← Older Comments
Newer Comments →