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
Newer Comments →
  • Colin Hoernig

    That heading should say Chapter 2: Creating the Markup ;)

  • http://laroouse.com esranull

    very nice work thanks a lot

  • Gonzalo

    Gracias Jeffrey… muy buen tutorial como siempre lo son los que tu realizas…

  • tarek

    thank you man .. great work.

  • http://www.crackpixels.com John

    Thanks, these new HTML5 elements kick in a lot faster when I see a visual of how it’s used.

  • http://retailproof.com Alexey

    Jeffrey, great screencast! It was lightning fast – I paused a couple times to catch up :)

    Small misspell though: in content area you wrapped whole articles in h2 tags.

    PS. Can’t wait for next chapter!

  • http://www.nunomedia.com Nuno

    Uau, nice design. Well done… The last step could be, wordpress…!

    • http://hultner.se Alexander Hultner

      Yeah a finishing chapter showing how to port this stukning design to an actual working WordPress site would be the kind of great addittion which would bring this series up from great to amazing. Also it Will be interesting to se how you handle chapter 6

      • http://net.tutsplus.com Jeffrey way

        It shouldn’t require much additional effort to WordPressify the site…so I’ll plan on doing that. :)

  • ed

    cannot wait for this!
    12 days of christmas huh?

    this should be my imaginary gifts beside the christmas tree.

    :D

  • http://www.geniuzdesigns.de g3niuz

    great tutorial – already waiting for the next parts :D

  • http://www.freshclickmedia.com Shane

    An epic series Jeffrey – you deserve nothing but praise for all your hard work!

    Thanks.

  • maarcin

    Nice tut.

    There schould be Chapter 8: coding in wordpress ;D

    Have You considered it?

    Cheers

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

      Maybe… :)

      • http://hultner.se Alexander Hultner

        Sounds like we might just be getting an early christmas present this year.

  • http://westnu.wordpress.com westnu

    Jeffrey Way , thanks for sharing. U ROCK :)

  • http://www.rashanoureldin.com Rasha

    Nice Tutorial
    But use Windows its popular , and Mac users can use it too
    But If the tutorial gona be using MAC , windows users will not satisfied or understand
    as me :-)

    • http://twitter.com/tamlaand Mattias

      What is it that you don’t understand?
      All the applications Jeffrey is using is available on Windows too. The only thing that might not work is setting up your file-structure with the terminal, but you can just right-click if you don’t want to use the ‘fancy’ (Jeffrey) Way. Pun intended:)
      Everything else is exactly the same!

      • http://hultner.se Alexander Hultner

        Agreed. I’m developing on both Windows and Mac aswell as FreeBSD and various Linux distributions and I can’t honestly say that I can see where the big difference would be. Sure there might be some minor differences but nothing that should keep a developer from using Windows and still following this series of tutorials. “The web” is after all an cross-platform standard.

    • http://net.tutsplus.com Jeffrey way

      Hey Rasha –

      I’m sorry — but I’m mostly a Mac user these days. I’m only using a code editor…and particularly one that’s been around in different forms for 30 years (Vim). It’s available in every OS.

      • http://www.rashanoureldin.com Rasha

        Thanks Jeffrey
        I will search for it , sorry but i still beginner in this field i wish to be pro like you and the rest of members .
        one day i will use Mac , but its very expensive here in Egypt to buy Mac :-)

        thanks anyway
        and i am waiting the rest of this series :-)

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

        No worries, Rasha. I’ve been doing this for years…and I still feel like a beginner. It’s a very, very tough industry. :)

  • Gerard Jota

    Thanks so much! This is exactly what I need!
    Can’t wait to see the rest

  • Alberto

    Thanks!
    One question: why do you use H3 in the section element? Shouldn’t it have its own outline, starting with H1?

    Bye, Alberto

    • http://bibikova.com ben

      It is hierarchical. H1 is usually always the main title of the site, such as the site name. H2 is usually the sub heading and H3 blog titles or sections…etc

    • http://net.tutsplus.com Jeffrey way

      Hey Alberto —

      According to the HTML5 spec, sure, that would be okay. However, as I understand things, right now, it can present some issues if you do so.

      HTML5 masters – please correct me if I’m wrong about this.

  • http://www.l4u.dk/ Kasper

    Sweet stuff, great tut.

    Thanks.

  • http://www.austinwebsitesolutions.net/ Bryan

    Thanks! This is a huge help since I am bad at coding yet I love to design. I really appreciate this.

  • http://bibikova.com ben

    Very nice tutorial, I learned a lot from it today.

  • http://www.moviemusicgame.com mmgfan

    Cann’t wait to see all of those. Thanks!

  • DJ

    Multiple H1s in a single page – a REALLY REALLY bad idea from a SEO standpoint currently, whether or not they are in a different section.

  • Hassan

    Hi Jeffrey –

    Is it valid syntax to put the / before the > in empty-element tags of an HTML document? I thought they were for XHTML docs only?

    • Hassan

      By the way, great tutorial as always. Thanks.

  • http://www.macroblu.com/what_we_do.php Graphic Design Toronto

    completely agree with DJ, you cant use multiple H1 tag in single page , its really a very bad idea from SEO perspective. anyways theme is good, nice work

  • Hidd3n

    Hi,

    The tutorial was great. I have a question tho. Can someone list me a few programs fro windows like the one Jeffrey was using for the html code. Would be great if i can shorten the time for writing the html.. Thanks

  • Agustín Baratelli

    Incredible! Is such a pleasure watching your tutorials! Waiting for the next…

  • ac.web.tr

    why is image folder empty in source files?? :S

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

      Because we haven’t gotten to the slicing yet. That’s Chapter 3…coming out within the hour.

      • http://www.digitalprojects.co.za/ Sean

        It’s 21:35 already in South Africa, I’ve been checking the whole day. I can’t wait…

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

        Sean – It’s available now, above.

  • Nils Pedersen

    Hi,
    Once again you guys at NETTUTS, managed to pull up an awsome tutorial series!
    Just beginning to learn WordPress devolping, and I must say that you guys deffentley are worth spending time on : )

    Looking so much to the following chapters!

    regards from denmark ; )

  • Andres

    Thanks for the millionth time Jeffrey!
    I´ve done all this proceses before, but this series puts it all in a new light!
    by the way its december 9th already !!

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

      Yep – Chapter 3 is above. :) And thanks!

      • Al

        are the images going to be included in the download?

        and updates to the code as the series proceeds?

        Al

  • http://tay.com Tay

    wheres chapter 3

  • http://www.ClearViewDesigners.com Tim

    Good Vid!! I wasn’t too sure about the zen coding, but this demo changed my view on using it.

  • Fernando Granja

    Great Tutorial! I’m a beginner, what did you use as a template to your beginning code(HTML, CSS delcaration). Did you say BoilderPlate? What was the program that you used to manage code snippets in MAC?

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

      Fernando – For the Mac, I use this: http://www.snippetsapp.com/

      • Hidd3n

        Is there a good app for windows ? I realy love the way it can shorten programing time. Thanks

    • maarcin

      You can try Texter in windows

  • Corey

    When you have the move tool selected you’ll notice a drop down menu with the word group. If you click it and change the setting to layer along with auto select it will go to the layer and not the group. Helps me speed up my work flow in PS. Great tutorial series :).

    • Catalin

      Thanks for this tip, Corey. I used to work the same way Jeffrey did in the tut…this helps a lot.

      And thanks Jeffrey for this series. I love everything in the Envato Network… you guys are amazing.

  • http://edwinhollen.com edwinhollen

    Great series, Jeffery.

    One tip for you: I use the same slicing method (the slice tool is for chumps!). When Photoshop asks you if you want to save after you CMD+W a window, simply hit D on the keyboard. It shortcuts to ‘Dont Save’.

  • Purple

    Jeff, I love you man.

    You have singlehandedly boosted my knowledge threefold. The only problem that I have with this is that you are creating more competition for me :)

    Thanks bro!!!

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

      Thanks, Purple! Great name, by the way. :)

  • http://www.timarmstrong.me Tim Armstrong

    Nice Post. Thank for that.

  • http://aditutorials.wordpress.com Adi

    nice tuts..Thnx :)

  • Hidd3n

    After hours of googling i found http://code.google.com/p/zen-coding/ . Its the same way Jeffrey uses. Its realy nice and what i need and its free.

    Have fun with it :)

  • http://harby.me HaRbY

    Very nice tutorial! :D

  • ed

    i can’t wait for what’s next.

    btw, you said CMD (mac) = Alt (PC)

    it’s Ctrl (PC) right?

    • http://www.gameservers.com Andrew Miesner

      That is correct.

  • Ricardo Nunes

    a litle bit offtopic…

    Why not a article about the tools and pieces of code each author uses?

    I think it would be much apreciated by almost everyone.

  • ed

    hi again jeff.

    guess what. while we will be waiting for installments of this tutorial, designinstruct.com just released a tutorial same as this.

    posted today. the whole series – from psd to html/css3.

    whoa!

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

      Hey Ed,

      Looks like a great tutorial. I personally prefer videos for these types of tuts. But that’s a great alternative to this series.

  • Mohamed

    Thanks very much. It’s very useful.

  • Abhijeet

    Awesome Series

    Thanks a lot Jeffrey Way !

  • Jeremy Michel

    Great series, it starts well, even though I already know how to convert a psd to HTML, it’s always nice to see different ways of doing it. I’m eager to get to the part of converting it to wordpress theme. Only 1555 subscribers, come to think of it, I could probably get my college to subscribe.

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

      Yeah – we’ll get to 80k pretty soon. But an extra college worth of subscribers wouldn’t hurt. :)

  • http://braincube.us/ Max

    I believe you’re misusing menu tag. Not only it’s deprecated but you put ULs inside of it which is wrong. http://www.w3schools.com/tags/tag_menu.asp

  • derrick

    im having problem with adding background on the body..

    ::CSS::

    body {
    background: (“images/bg-body.jpg”) no-repeat scroll center top;
    }

    if i put color..only the color that shown up..the rest is empty…

    • http://www.gameservers.com Andrew Miesner

      Try this:

      body {
      background: url(‘images/bg-body.jpg’) no-repeat scroll center top;
      }

    • http://braincube.us/ Max

      Try

      background: transparent (‘images/bg-body.jpg’) no-repeat;

  • http://www.cornholeexpress.blogspot.com RSS #78,456

    Hey Jeff – I’m pretty new to design & development, starting with blogger and now learning to use WordPress so thanks for the tutorials. Really love all the resources your site provides.

    I’m really looking forward to that CH. 8 on WordPress so I subscribed to your RSS, but the counter at top of the page didn’t budge?…which btw I think is a neat thing the tutsnetwork sites have. What’s going on with the counter?

    Keep up the great work!

  • RSS 78,446

    oops. More like…RSS #78,446

  • kevin

    Hi Jeffrey,

    As you placed a container_24 to the wrapping divs. Would it be possible to just this container_24 on one big wrapping div or the body tag for example?

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

      Traditionally, yes – but we have to do it this way because of the background images.

  • Tafka

    Hei! Nice tutorial series once again. Thanks a million. I’ve done tons of psd to html conversions but its always good to see how ohters do it as well.

    Looks like we do the job same way. But there are two tips i can give you. I’ve noticed in Your tutorials it sometimes takes some time to find the right layer to slice. It’s because Your move tool (V) it not selecting right layer but only the group in witch the layer lays in. There is an easy way to change that behavior. When the move tool is selected you see some option for this tool on the top. Next to autoselect (you even pointed out it on chaper 3) is a dropdown menu with two options : group and layer. Change it to layer. Now next time you click on a layer it not only selects that group but also that layer as well. Additionally if you want to select a layer tha’ts behind another layer you can simply use right click to see your options.

    Second tip: I used to flattern image also before but theres a workaround for this. If you click edit menu you can see that there are two ways to copy things: Copy and copy merged. Whenever i need to copy things from different layers togeher (like that bg in video) i use copy merged option. It copys everything thats currently selected. Shortcut for this is almost the same as just copying: Shift + Ctrl + c.

    I hope you find theese tips useful.Thumbs up for the 80+ k and cant wait for the next vid. Btw the wordpress idea sounds good :)

  • judie

    More of those helpful tutorials, which converting website of photoshop into css and javascript or php…

Newer Comments →