Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.
Just like last time, I’ll take you through the process step by step – even through the tedious parts. Enjoy!
The PSD
The 100% HTML and CSS
Thanks again to Collis for allowing me to use his design for this week’s screencast. If this screencast helped you, please do us a favor and subscribe to the RSS feed, and/or leave a comment. See you next week! :)
P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
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
I want more download able tutorials
nice post, thanks for sharing use full information….
why post is not given
Thanks for this tuto! Great job! :D
very nice article…thanks.
thank uuuuuuuuuuuuuuuuuu very very much
Thanks for share tip :)
Great tutorials. All tips is helpful. Thanks a lot.
very nice …thanks.
thank you – my first dive into this subject – great overview!
thanks bro
nice post……very explanatory..!!!
THANKS!! GREAT
Great tutorial J. Way,
I enjoyed the whole 53 minutes spent watching your tutorial. Keep up the good work, and you will always have me coming back as an avid reader of your articles.
Thanks, Diego!
This is a really good & quite descriptive. thank u :)
Wonderful cool. Great concept and execution. Love the popular principles you incorporated into the dexterity creation.Regards, JoshuahCheck up on my place as understandably
Thnkx fr d info… net tuts rox…
Your tutorial was very helpful … you are very thorough. The only thing I saw was in the IE6 version, the tagline at the top next to the logo was not showing. What do we have to do in the IE.css to make that show?
This is very awesome work that you are doing, thank you so much for sharing your knowledge with beginners like me. Great work!
Very helpful – thank you very much.
Haha, watched this ~3 years ago and still remembered it. Had to dig it up to give myself a refresher on html and css. Many many thanks for your excellent resource! Hope your still making more!
This is the best site for anyone who desires to find out about this topic. You notice so much its almost onerous to argue with you (not that I truly would want…HaHa). You undoubtedly put a brand new spin on a subject thats been wrote about for years. Nice stuff, simply nice!
I think one page only have one h1 tag. or you will be pulished by search engine.
why there is two h1 tag Your Logo About?
Hi ! Great tutorial. I have downloaded this tutorial. I am sure if any body follow this tutorial, he will get much more idea from here. Appreciate your tutorial.