The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.
Please note that, even if you haven’t read the first two tutorials, you’ll be able to follow along with this video quite easily.
Update
Please note that this tutorial series was originally posted on Nettuts+ about sixty days ago. However, it’s recently come to my attention that many of you had trouble watching the screencast for Section 3. This has now been resolved. Enjoy!
Part 1: Build a Promotional iPhone App Website Wireframe in Fireworks
Part 2: Create a Promotional iPhone App Site in Photoshop
Part 3: Converting Our Design to a Nicely Coded HTML and CSS Website
- Section 1: Slicing the PSD – 0:00
- Section 2: Coding the Markup – 18:43
- Section 3: Adding the CSS – 47:11
Other Viewing Options
Series Complete!
If you followed along for this entire series, congratulations are in order! If enjoy the idea of tutorial series’ that span multiple TUTS sites, be loud and let us know! I hope you learned a bit from this third entry; and thanks again to Sean Hodge (Psdtuts+/Vectortuts+ editor) for writing the first two tutorials in this series.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Tom Elders - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great advice. Thanks for sharing with us!
I can’t see the videos, what is wrong?
Nice series, keep´em comming. Thank you !!
When will the new javascript tut come
is it just me or have i’ve seen this before? Anyway, it’s a great tutroial
This is the same tutorial that was posted ages ago but now it’s on the front page? what is going on?!
Did you guys not read the big UPDATE at the very top of this page??
oh
great tutorial
Pretty Cool
Wow. Great tutorial. Hopefully people realize the value they can get from this type of extended/spanned event. Thanks.
Haha Jeffrey, I never get tired of watching your thought process when it comes to code. You do make me want to grab your mouse and fix your typos sometimes when you can’t seem to find where you went wrong, but that’s just part of the process.
Amazing tutorial as always!
You try coding, and talking into a microphone at the same time. It’s hard!
Love the tutorials, they never cease to interest me. I have a question though, dumb, yet simple. Why do you put a space before and after each header tag text. For example, you put ” Features ” instead of “Features”. I was wondering, why? Are there benefits to it, or is it just a habit of yours?
want to learn more about gradients?http://computersight.com/software/photoshop-tips-1-gradients/
I realy realy realy need this book, please give it to me..
Long download !!
742 for this video. close to 1 GB !!!!
But where is JavaScript from Null- Chapter 4 ?
Will come either Tuesday or Wednesday. Skipped last week due to Christmas.
thanks for the update Jeffrey
now should be able to view the final part
Al
tried watching.
just as you were describing #banner p CSS code, the video shut down and quit on me, this wouldn’t be about the 72-74 min mark, would it? that is, the same problem area as before. this is the third time I have tried to watch this video and so far have been unsuccessful in doing getting past this area in the video.
any body else having problems like this? unfortunately you need to watch more that an hour to find out…
Jeffrey, I would love to be able to watch the whole video but so far have been very unsuccessful in doing so, not sure what the problem is but if you can suggest other ways to try it, I may try one more time. as I said, it takes over an hour before I find out if it is going to work or not. good lesson learned – long videos no good, short videos better to get around problems with. at least you could replace elemnts if shorter.
Al
p.s. XP SP3, IE7
jut tried again using FF
success, and I was even able to fast forward to get to the part I had not seen before
thanks jeffrey for a great video (problems notwithstanding)
Al
Great tutorial, and I haven’t been experiencing any problems viewing, unlike everyone else, and my connection speed is pretty lousy.
I wonder Jeff if it is worth highlighting to those newish to HTML/CSS that support for IE6 still needs to be factored in for most projects. I reckon you could probably acheive the same results using just JPGs and basic selectors and reduce page load time in the process. Not quite as sexy as all that CSS3 stuff though…
The idea is to promote forward thinking. For a fictional site that focuses on iPhone Apps – I’d be willing to bet that 98%+ of all visitors will not be using IE6.
This is one of the most awesome-nest complete tutorials I’ve ever followed. I’m taking a web design class and this series has become indispensable to my learning. I thank the author(s) for the lesson and hope to see more like it. The only thing I wished that was covered in steps is multiple column layouts. I know it was a little too much to add to the already long video, but if like me, you like to know how the grid is composed in CSS, it would have made this series absolutely complete.
I think it is a good habit for beginners to learn how to hand code layouts rather than copying and dumping already-made files because as we know, sometimes markup isn’t forgiving when it starts falling apart. Coding by hand helps newbies like me understand the “why’s” a lot better when the layout isn’t working.
Maybe multiple column layouts could be a suggestion for future tuts?
Hope so….
Thanks again.
I think that the vimeo video doesn’t work, or its maybe me, well anyways can somebody check it please?
i just did the whole thing. I had just basic knowledge of html and css and now i feel pretty confident. Thanks
Hi Jeffrey,
I am a graphic designer / web designer working for Third Floor Design based in Gloucester, England but do alot of design and web learning in my spare time. I have recently watched your nettuts video regarding building and coding the ilovemyapps website. Got to say it was a really good video demonstrating some features of css3, grid960 and a few other bits and bobs I had never used before. One of those being the first & last-child selectors which I had never used before. I have looked further into these now and introduced them into a site I am currently building. The only problem is that they seem to work fine in safari / firefox but when it comes to ie, it all goes to pot. I have included the following as you did:
But this seems to of not fixed the problem with the last child selectors and makes the page jump out. It’s like ie doesn’t even pick up on these. Can you explain why and if you have a work around? You can take a look at the following test address http://www.marc-antoni.marcsanders.co.uk to see the page I am working on.
This was an excellent tutorial! Im a graphic designer but have never learned web design. I was looking for a simple tut to get me started and this was perfect. The guy is very clear, calming to listen to and made the whole process a lot less daunting for me. Much appreciation!
Nice!!!!!!!
I learned more of a firebug …. and I did not know that jquery selectors were based on the css .. thanks ….
Thanks Jeffery Way for such an excellent tut. It took me more than 3 days to put together what you guys seemed to have done in 3 hours, and it came out beautiful…YourCleanBoat.com I got me a product page to be proud of.
Best to you Jeff.
Well, I had to move the frame to another site, I will leave it up there for a while so if you want to see it, it is at the address below. Thanks again.
YourFirstAttempt.com
I have officially watched this video on iTunes like almost 6 times. It’s a classic for me. Great Tutorial, liked it so much, that I’m thinking of signing up for a plus membership just to grab the other tuts you have, like the watercolor psd file to Xhtml, and grab as much more as I can, simply based on your awesome way of teaching. I have actually enjoyed writing css your way, than what I’ve learned in school.
Thank you Jeffry
Where did my comment go??
Thanks for this great tutorial! Your hard work is very appreciated
Best tutorial ever!
Thanks for great tutorial. Realy informative & usefull.
*offtop* Can anyone tell me what font in textmate was used in this tutor?