Total Followers 132,503
I haven’t found really good this kind of list article so I created my own. As being designer myself, coding part usually is hardest part in web development process. But there are so many great tutorials teaching how to use simple XHTML and CSS to get amazing layouts and they offer You to see what’s really happening behind the scenes explaining every step. Learn how to use CSS, how to create layouts in the right way, forget about table-layouts and enjoy CSS real power and put these 43 PSD to XHTML and CSS tutorials in good use!
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.
2. How To Create a Horizontally Scrolling Site
3. From PSD to HTML, Building a Set of Website Designs Step by Step
4. Subcide: Creating a CSS layout from scratch
5. Build a Sleek Portfolio Site from Scratch – PSD+XHTML Tutorial
6. From PSD to CSS HTML in 4 easy tutorials
7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series
Great tutorial about creating site with Illustrator, coding with Drupal, using standards compliant XHTML and CSS.
The Complete Lesson Index:
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin
Read Part 6 -Wrap Up and Additional Resources
8. How to make sexy buttons with CSS
9. Horizontal Menus That Grow on You
In this quick tutorial, I’m going to discuss how to create a neat little menu effect. I’m dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it’s a list menu.
11. CSS Gradient Text Effect Tutorial
12. How to: CSS Large Background
13. Converting a Design From PSD to HTML
16. Using CSS Sprites Tutorial
18. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
20. Photoshop tutorial+ slicing part + coding css
This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.
21. Slice a Template and Code it Using CSS
22. Coding Your 1st PSD Tutorial
23. Making Simple Work of Complex CSS Layouts
24. Making Your Footer stay put with CSS
25. How to Convert a PSD to XHTML – Video Screencast
28. Invasion of the Body Switchers – Learn how to switch styles
29. Float Tutorials – Step by Step
30. CSS Slicing Guide: Picking The Right Layout
31. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
32. CSS Sprites + Rounded corners
33. 3 Simple Steps in Coding a Rounded Corners Layout
35. Converting a Photoshop Mockup: Part Two, Episode One
36. CSS Vertical Navigation with Teaser
37. Fixed Footer Backgrounds with CSS
38. A simple introduction to 3 column layouts
41. Vertical CSS menu with a ‘behavior’ file
43. Breaking Out of the Box With CSS Layouts
Now You should have impressive foundation to create really advanced layouts using standard compliant XHTML and CSS. Put them in good use and maybe I’ll create another list article with Photoshop layout tutorials. Thanks.
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Wednesday, June 3rd, 2009 06:14
Great! These tutorials are easy to follow.
Dickys last blog post : 10 WordPress Plugins That Will Increase Your Search Engine Ranking
Thursday, April 16th, 2009 06:47
Thank you!
tjribis last blog post : يهود متطرفون يعتزمون اقتحام الحرم القدسي
Sunday, April 12th, 2009 09:00
Very nice and productive post.
Thank you!
Tuesday, April 7th, 2009 01:58
Great set of tutorials! Incredible resource – thanks!
Joe
Joe Schlossers last blog post : The Source For All Things Video
Monday, March 23rd, 2009 04:56
Great!!!!
Thank you so much!
Wednesday, March 18th, 2009 19:16
fabulous!
Tuesday, March 10th, 2009 20:24
Wow Very Good Collection
Tuesday, March 3rd, 2009 21:33
Amazing stuff!
Been checking the links for a couple of days now! :D
RaShs last blog post : India’s Shining…
Wednesday, February 25th, 2009 23:12
Awesome list of tutorials! I’ve actually seen an increase of designers coming to me for coding. :)
Wednesday, February 25th, 2009 14:52
Cheers for the great list of tutorials! I wondered if there are any more large background tutorials out there? I love those particular style sites but having a hard time finding any tutorials other than the one you’ve listed? Unless I’m missing something, that particular example doesn’t seem to walk you through the process from PSD to CSS as do the other tutorials? If you or anyone out there has any links they’d be great appreciated? Keep up the good work!
Tuesday, February 24th, 2009 01:27
Great resource. Thanks
Patternheads last blog post : Free Vector and Pixel Repeat Patterns – Leafy Set 2
Monday, February 23rd, 2009 13:38
Great resources, thanks!
Jankos last blog post : 5 simple ways to improve links
Monday, February 23rd, 2009 20:51
So cool! I have been looking for this forever! Great thanks so much.
Monday, February 23rd, 2009 18:52
Featured here: http://www.presidiacreative.com/web-picks-13/
Monday, February 23rd, 2009 18:22
Nice one Dannis ! I always wanted to do PSD to XHTML. Never got around it maybe this time I will give it a try
Monday, February 23rd, 2009 17:11
wonderful helpful tutorials thank you for selections Dainis
http://www.joyoge.com/story.php?title=43-psd-to-xhtml-css-tutorials-creating-web-layouts-and-navigation-1stwebdesigner
Monday, February 23rd, 2009 08:54
Great roundup here. I know a lot of people are dying to see some good PSDFAN to code tuts, and you’ve managed to narrow it down to the quality ones.
Tom Rosss last blog post : Design a Retro Futurism Space Scene
Monday, February 23rd, 2009 13:04
Great post, should help a lot of people looking to code their own designs!
Monday, February 23rd, 2009 04:18
Funny my girlfriend asked for these today, thanks for the perfect timing. =)
Frank Stallones last blog post : iPhone WordPress
Monday, February 23rd, 2009 09:33
@Frank really great timing :) Happy to give some help in time :))
@Tom yeah, I am thinking to create something like this on my own too, but You know better than me, how much time takes to think everything through and come out with good result :) Thanks :)
Monday, February 23rd, 2009 09:22
Awesome sharing buddy,… i learn here alot.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Eric Shafer
Monday, February 23rd, 2009 18:52
Featured here: http://www.presidiacreative.com/web-picks-13/
Dicky
Wednesday, June 3rd, 2009 06:14
Great! These tutorials are easy to follow.
Dickys last blog post : 10 WordPress Plugins That Will Increase Your Search Engine Ranking
webtechnepal
Wednesday, June 10th, 2009 09:13
useful and nice collections. thanks.
wanderson
Saturday, August 14th, 2010 15:45
very good hope it stays that way so I can improve more!
Kamal
Friday, July 2nd, 2010 08:10
Very nice Post. Keep it
Lena
Saturday, May 15th, 2010 09:18
Its pretty old lol but
thank you so much ..
:D
Master
Friday, May 14th, 2010 08:01
Great List…
i found a fantastic Website for really cool Html/CSS Tutorials
http://www.tutorials99.com
where all tutorials are Professional and Higher Page Rank
steven smith
Saturday, September 4th, 2010 07:23
Great tutorial, i have read a few and this seems to be the most descriptive, thanks for the share
Nicole
Wednesday, September 15th, 2010 16:37
Thank you so much! Helped me a lot!
Ifham khan
Friday, April 6th, 2012 05:34
Awesome tutorials, getting some problem while converting to xhtml. Hope some new clear tutorial will be available soon :)
nonStopCars
Friday, April 6th, 2012 03:21
Thanks for the tutorial, we applied design services at the company website. But the result was not as expected, I was wrong in a certain step.
sastumroebi
Thursday, September 29th, 2011 08:59
Thanks. Great Post ;)
alalex
Friday, April 29th, 2011 11:45
Great collection, thanks a lot! They are really good to start CSS learning. I’m pleased with results I can get with it.
Checker24
Thursday, April 8th, 2010 20:20
Hello, very nice tutorial collection.I liked it, my favorit it is number 33. thank you
May G.
Tuesday, April 6th, 2010 13:06
Thank you very much for sharing your knowledge. It will surely help many aspiring web designers to create beautiful webpages. God bless and keep sharing and keep receiving God’s blessings!
siamhothit
Friday, October 2nd, 2009 20:47
very nice.. i like Coding Your 1st PSD Tutorial.
Tommy
Monday, September 21st, 2009 22:02
nice, some of which are even offered for sale as a wordpress theme
John Parks
Wednesday, September 2nd, 2009 19:21
Yes. It is a very useful collection. Thanks! :)
Nico
Thursday, August 6th, 2009 11:44
Very mind refreshing list of creative web layouts! Thanks!
Sergi
Friday, October 9th, 2009 18:32
En español también existe la empresa de PSDaWEB de maquetación y conversión de diseño a cualqueir formato web.
Sandeep
Sunday, October 18th, 2009 10:35
thanks for sharing… made me 2 follow site for future…
Melo
Friday, March 26th, 2010 03:22
Great post I would like to see one about psd to wordpress coding.
Thanks.
Chandan
Thursday, March 4th, 2010 12:22
Very nice work. This compilation would be very handy for a lot of beginners out there. Great job. Keep it going….
All the best,
Chandan
geoffrey
Thursday, February 25th, 2010 12:20
your work is lovely hope one day i will be able to do what you are doing
its great i know alittle of designing and really would love to get this materials somehow ,
Jst wish we had good internet in africa(to be precise Kenya) so that i can download the tutorials and learn one or two things
Thanks anyway will try it the hardway
keep up the good work!!!
mauli
Friday, February 12th, 2010 21:27
thank you for uploading these tutorials! it’s really going to help me understand css better and finally build my first psd to xhtml website! i can’t say thank you enough!