Convert a Warm, Cheerful Web Design to HTML and CSS
Tutorial Details
- Topic: Building a Website
- Skills Required: HTML, CSS
- Length: 33 Minute Screencast
Final Product What You'll Be Creating
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 1: Design the Site
- Chapter 2: Create the Markup
- Chapter 3: Slice the PSD
- Chapter 4: Integrate the 960 Grid System
- Chapter 5a: Build the CSS – Header Section
- Chapter 5b: Build the CSS – Banner Section
- Chapter 5c: Build the CSS – Main Section
- Chapter 5d: Build the CSS – Footer Section
- Chapter 6: Build the Tabbing System with JavaScript
- Chapter 7: Style the Form Elements
- Chapter 8: Compensate for IE
- Chapter 9: Cleanup, Typography, and Bug Searching
Chapter 2: Create the Markup
Chapter 3: Slice the PSD
Chapter 4: Integrate the 960 Grid System
Chapter 5a: Build the Header Section
Chapter 5b: Build the Banner Section
Chapter 5c: Styling the Main Section
Chapter 5d: Styling the Footer
Chapter 6: Creating the Tabbing Functionality with JavaScript
Chapter 7: Style the Form Elements
Chapter 8: Compensate for Internet Explorer
Chapter 9: Cleanup, Typography, and Bug Searching
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!
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.
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 ?
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
we’ll have to wait for a long time until that happens..they said 80k subs on rss…there are merely 12.000
IN_CRE_DI_BLE :) this is so helpful for beginners, THANK You!
Hello ,
can help me someone with a program for windows 7 ?
Espresso is only for mac.
Thank you
notepad++
PhpDesigner 7
Dreamweaver
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
At chapter 5a, I saw that you type “font-size: Verdana, helvetica,…”
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.
chapter 02 & chapter 04 link does not work.
plz , reupload these videoes
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)
“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.
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.)
“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.
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?
Great, marvellous!!! Really really useful tutorial for a begginer like me, it helps me a lot to understand the whole process.
Thanks!
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
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.
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. :)
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 :)
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!
There is some problem with video 5C :(
Not loading…
Please check!!
c’mmon about the convertin to wordpress :D
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.
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 ? =)
RSS Subscribers
96,155 :-)))
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?
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!!!
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;
}
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?
Jeffrey Way your way too fast, its kind of frustrating when you go so fast and expect your audience to be at advanced level…