43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation

Posted in Coding, Tutorials5 years ago • Written by 47 Comments

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!

1. From PSD to XHTML Tutorial

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.

conversation-psd-to-xhtml-tutorial-css

2. How To Create a Horizontally Scrolling Site

horizontally-scrolling-site

3. From PSD to HTML, Building a Set of Website Designs Step by Step

creatif-nettuts-from-psd-to-xhtml

4. Subcide: Creating a CSS layout from scratch

subcide-web-layout-tutorial

5. Build a Sleek Portfolio Site from Scratch – PSD+XHTML Tutorial

psd-vs-net-tutorial-convert

6. From PSD to CSS HTML in 4 easy tutorials

sanke-photograph-css-tutorial

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

band-site-and-drupal-tutorial

8. How to make sexy buttons with CSS

how-to-make-sexy-button

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.

css-menu-growing-dock

10. CSS Template Tutorial

free-css-tutorial

11. CSS Gradient Text Effect Tutorial

css-gradient-text-effect

12. How to: CSS Large Background

large-background-css

13. Converting a Design From PSD to HTML

your-logo-psd-to-xhtml

14. Slice and Dice that PSD

paper-business-psd-to-xhtml

15. Blurry Background Effect

blurry-background-effect

16. Using CSS Sprites Tutorial

using-css-sprites

17. Hand-Drawn CSS Navigation

hand-drawn-css-navigation

18. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing tabledinamically-highlighted-columns

19. CSS Menu Tutorial

n-design-cssmenu

20. Photoshop tutorial+ slicing part + coding css

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.

css-menu-blue

21. Slice a Template and Code it Using CSS

slice-a-template-and-code-it-using-css

22. Coding Your 1st PSD Tutorial

code-psd-tutorial

23. Making Simple Work of Complex CSS Layouts

generico

24. Making Your Footer stay put with CSS

sticky-footers

25. How to Convert a PSD to XHTML – Video Screencast

some-event-convert-psd-to-xhtml

26. Advanced CSS navigation

advanced-css-navigation

27. Tutorial: Coding A Layout

tutorial-coding-a-layout

28. Invasion of the Body Switchers – Learn how to switch styles

invasion-to-body-switchers

29. Float Tutorials – Step by Step

float-tutorial

30. CSS Slicing Guide: Picking The Right Layout

css-slicing-guide

31. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

accordion-tutorial

32. CSS Sprites + Rounded corners

rounded-box

33. 3 Simple Steps in Coding a Rounded Corners Layout

css-globe-3simple-steps-code-rounded

34. Style master CSS tutorial

lorem-ipsum-inc

35. Converting a Photoshop Mockup: Part Two, Episode One

some-website-tutorial

36. CSS Vertical Navigation with Teaser

vertical-navigation-tutorial-teaser

37. Fixed Footer Backgrounds with CSS

footer-background-that-work-tutorial

38. A simple introduction to 3 column layouts

3-column-layouts

39. Two column CSS layout

2-column-layout

40. CSS Layout Technique – Achieving 100% Height

css-layout-tehnique-100-percent-height

41. Vertical CSS menu with a ‘behavior’ file

vertical-css-menu

42. Sleek Design Code – HTML

sleek-shiny-design-tutorial

43. Breaking Out of the Box With CSS Layouts

breaking-out-from-box

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.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

215 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

47 Comments Best Comments First
  • S.M.Junaid

    Monday, February 23rd, 2009 09:22

    6

    Awesome sharing buddy,… i learn here alot.

    +4
  • RaSh

    Tuesday, March 3rd, 2009 21:33

    17

    Amazing stuff!
    Been checking the links for a couple of days now! :D

    RaShs last blog post : India’s Shining…

    +3
  • rariox

    Sunday, April 12th, 2009 09:00

    22

    Very nice and productive post.

    Thank you!

    +3
  • Faisal

    Tuesday, March 10th, 2009 20:24

    18

    Wow Very Good Collection

    +2
  • Sean

    Friday, February 27th, 2009 14:11

    16

    Dainis,

    Great, absolutely great!!!

    Very to point and convenient. Thank you!

    Sean
    psd to html

    +2
  • leigh

    Wednesday, March 18th, 2009 19:16

    19

    fabulous!

    +2
  • Amber Weinberg

    Wednesday, February 25th, 2009 23:12

    14

    Awesome list of tutorials! I’ve actually seen an increase of designers coming to me for coding. :)

    +2
  • tjribi

    Thursday, April 16th, 2009 06:47

    23

    Thank you!

    tjribis last blog post : يهود متطرفون يعتزمون اقتحام الحرم القدسي

    +2
  • Joe Schlosser

    Tuesday, April 7th, 2009 01:58

    21

    Great set of tutorials! Incredible resource – thanks!

    Joe

    Joe Schlossers last blog post : The Source For All Things Video

    +2
  • iDevelopThings

    Thursday, February 26th, 2009 11:54

    15

    What a great list of tutorials! Thanks.

    0
  • David Knox

    Monday, March 23rd, 2009 04:56

    20

    Great!!!!

    Thank you so much!

    0
  • Rich

    Wednesday, February 25th, 2009 14:52

    13

    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!

    0
  • Dainis Graveris

    Monday, February 23rd, 2009 09:33

    1

    @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 :)

    0
  • joyoge designers' bookmark

    Monday, February 23rd, 2009 17:11

    5
    0
  • Tom Ross

    Monday, February 23rd, 2009 08:54

    4

    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

    0
  • Tom Sinclair

    Monday, February 23rd, 2009 13:04

    3

    Great post, should help a lot of people looking to code their own designs!

    0
  • Frank Stallone

    Monday, February 23rd, 2009 04:18

    2

    Funny my girlfriend asked for these today, thanks for the perfect timing. =)

    Frank Stallones last blog post : iPhone WordPress

    0
  • Desizntech

    Monday, February 23rd, 2009 18:22

    7

    Nice one Dannis ! I always wanted to do PSD to XHTML. Never got around it maybe this time I will give it a try

    0
  • Eric Shafer

    Monday, February 23rd, 2009 18:52

    8
    0
  • Patternhead

    Tuesday, February 24th, 2009 01:27

    12

    Great resource. Thanks

    Patternheads last blog post : Free Vector and Pixel Repeat Patterns – Leafy Set 2

    0
  • Timothy

    Monday, February 23rd, 2009 20:39

    11

    Cool. Great list. Very useful. Thanks!

    0
  • Janko

    Monday, February 23rd, 2009 13:38

    10

    Great resources, thanks!

    Jankos last blog post : 5 simple ways to improve links

    0
  • Steph

    Monday, February 23rd, 2009 20:51

    9

    So cool! I have been looking for this forever! Great thanks so much.

    0
  • Dicky

    Wednesday, June 3rd, 2009 06:14

    24

    Great! These tutorials are easy to follow.

    Dickys last blog post : 10 WordPress Plugins That Will Increase Your Search Engine Ranking

    0
  • webtechnepal

    Wednesday, June 10th, 2009 09:13

    25

    useful and nice collections. thanks.

    0
  • wanderson

    Saturday, August 14th, 2010 15:45

    41

    very good hope it stays that way so I can improve more!

    0
  • Kamal

    Friday, July 2nd, 2010 08:10

    40

    Very nice Post. Keep it

    0
  • Lena

    Saturday, May 15th, 2010 09:18

    39

    Its pretty old lol but

    thank you so much ..

    :D

    0
  • Master

    Friday, May 14th, 2010 08:01

    38

    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

    0
  • steven smith

    Saturday, September 4th, 2010 07:23

    42

    Great tutorial, i have read a few and this seems to be the most descriptive, thanks for the share

    0
  • Nicole

    Wednesday, September 15th, 2010 16:37

    43

    Thank you so much! Helped me a lot!

    0
  • Ifham khan

    Friday, April 6th, 2012 05:34

    47

    Awesome tutorials, getting some problem while converting to xhtml. Hope some new clear tutorial will be available soon :)

    0
  • nonStopCars

    Friday, April 6th, 2012 03:21

    46

    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.

    0
  • sastumroebi

    Thursday, September 29th, 2011 08:59

    45

    Thanks. Great Post ;)

    0
  • alalex

    Friday, April 29th, 2011 11:45

    44

    Great collection, thanks a lot! They are really good to start CSS learning. I’m pleased with results I can get with it.

    0
  • Checker24

    Thursday, April 8th, 2010 20:20

    37

    Hello, very nice tutorial collection.I liked it, my favorit it is number 33. thank you

    0
  • May G.

    Tuesday, April 6th, 2010 13:06

    36

    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!

    0
  • siamhothit

    Friday, October 2nd, 2009 20:47

    29

    very nice.. i like Coding Your 1st PSD Tutorial.

    0
  • Tommy

    Monday, September 21st, 2009 22:02

    28

    nice, some of which are even offered for sale as a wordpress theme

    0
  • John Parks

    Wednesday, September 2nd, 2009 19:21

    27

    Yes. It is a very useful collection. Thanks! :)

    0
  • Nico

    Thursday, August 6th, 2009 11:44

    26

    Very mind refreshing list of creative web layouts! Thanks!

    0
  • Sergi

    Friday, October 9th, 2009 18:32

    30

    En español también existe la empresa de PSDaWEB de maquetación y conversión de diseño a cualqueir formato web.

    0
  • Sandeep

    Sunday, October 18th, 2009 10:35

    31

    thanks for sharing… made me 2 follow site for future…

    0
  • Melo

    Friday, March 26th, 2010 03:22

    35

    Great post I would like to see one about psd to wordpress coding.

    Thanks.

    0
  • Chandan

    Thursday, March 4th, 2010 12:22

    34

    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

    0
  • geoffrey

    Thursday, February 25th, 2010 12:20

    33

    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!!!

    0
  • mauli

    Friday, February 12th, 2010 21:27

    32

    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!

    -1
  • Ifham khan

    Friday, April 6th, 2012 05:34

    47

    Awesome tutorials, getting some problem while converting to xhtml. Hope some new clear tutorial will be available soon :)

    0
  • nonStopCars

    Friday, April 6th, 2012 03:21

    46

    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.

    0
  • sastumroebi

    Thursday, September 29th, 2011 08:59

    45

    Thanks. Great Post ;)

    0
  • alalex

    Friday, April 29th, 2011 11:45

    44

    Great collection, thanks a lot! They are really good to start CSS learning. I’m pleased with results I can get with it.

    0
  • Nicole

    Wednesday, September 15th, 2010 16:37

    43

    Thank you so much! Helped me a lot!

    0
  • steven smith

    Saturday, September 4th, 2010 07:23

    42

    Great tutorial, i have read a few and this seems to be the most descriptive, thanks for the share

    0
  • wanderson

    Saturday, August 14th, 2010 15:45

    41

    very good hope it stays that way so I can improve more!

    0
  • Kamal

    Friday, July 2nd, 2010 08:10

    40

    Very nice Post. Keep it

    0
  • Lena

    Saturday, May 15th, 2010 09:18

    39

    Its pretty old lol but

    thank you so much ..

    :D

    0
  • Master

    Friday, May 14th, 2010 08:01

    38

    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

    0
  • Checker24

    Thursday, April 8th, 2010 20:20

    37

    Hello, very nice tutorial collection.I liked it, my favorit it is number 33. thank you

    0
  • May G.

    Tuesday, April 6th, 2010 13:06

    36

    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!

    0
  • Melo

    Friday, March 26th, 2010 03:22

    35

    Great post I would like to see one about psd to wordpress coding.

    Thanks.

    0
  • Chandan

    Thursday, March 4th, 2010 12:22

    34

    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

    0
  • geoffrey

    Thursday, February 25th, 2010 12:20

    33

    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!!!

    0
  • mauli

    Friday, February 12th, 2010 21:27

    32

    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!

    -1
  • Sandeep

    Sunday, October 18th, 2009 10:35

    31

    thanks for sharing… made me 2 follow site for future…

    0
  • Sergi

    Friday, October 9th, 2009 18:32

    30

    En español también existe la empresa de PSDaWEB de maquetación y conversión de diseño a cualqueir formato web.

    0
  • siamhothit

    Friday, October 2nd, 2009 20:47

    29

    very nice.. i like Coding Your 1st PSD Tutorial.

    0
  • Tommy

    Monday, September 21st, 2009 22:02

    28

    nice, some of which are even offered for sale as a wordpress theme

    0
  • John Parks

    Wednesday, September 2nd, 2009 19:21

    27

    Yes. It is a very useful collection. Thanks! :)

    0
  • Nico

    Thursday, August 6th, 2009 11:44

    26

    Very mind refreshing list of creative web layouts! Thanks!

    0
  • webtechnepal

    Wednesday, June 10th, 2009 09:13

    25

    useful and nice collections. thanks.

    0
  • Dicky

    Wednesday, June 3rd, 2009 06:14

    24

    Great! These tutorials are easy to follow.

    Dickys last blog post : 10 WordPress Plugins That Will Increase Your Search Engine Ranking

    0
  • tjribi

    Thursday, April 16th, 2009 06:47

    23

    Thank you!

    tjribis last blog post : يهود متطرفون يعتزمون اقتحام الحرم القدسي

    +2
  • rariox

    Sunday, April 12th, 2009 09:00

    22

    Very nice and productive post.

    Thank you!

    +3
  • Joe Schlosser

    Tuesday, April 7th, 2009 01:58

    21

    Great set of tutorials! Incredible resource – thanks!

    Joe

    Joe Schlossers last blog post : The Source For All Things Video

    +2
  • David Knox

    Monday, March 23rd, 2009 04:56

    20

    Great!!!!

    Thank you so much!

    0
  • leigh

    Wednesday, March 18th, 2009 19:16

    19

    fabulous!

    +2
  • Faisal

    Tuesday, March 10th, 2009 20:24

    18

    Wow Very Good Collection

    +2
  • RaSh

    Tuesday, March 3rd, 2009 21:33

    17

    Amazing stuff!
    Been checking the links for a couple of days now! :D

    RaShs last blog post : India’s Shining…

    +3
  • Sean

    Friday, February 27th, 2009 14:11

    16

    Dainis,

    Great, absolutely great!!!

    Very to point and convenient. Thank you!

    Sean
    psd to html

    +2
  • iDevelopThings

    Thursday, February 26th, 2009 11:54

    15

    What a great list of tutorials! Thanks.

    0
  • Amber Weinberg

    Wednesday, February 25th, 2009 23:12

    14

    Awesome list of tutorials! I’ve actually seen an increase of designers coming to me for coding. :)

    +2
  • Rich

    Wednesday, February 25th, 2009 14:52

    13

    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!

    0
  • Patternhead

    Tuesday, February 24th, 2009 01:27

    12

    Great resource. Thanks

    Patternheads last blog post : Free Vector and Pixel Repeat Patterns – Leafy Set 2

    0
  • Timothy

    Monday, February 23rd, 2009 20:39

    11

    Cool. Great list. Very useful. Thanks!

    0
  • Janko

    Monday, February 23rd, 2009 13:38

    10

    Great resources, thanks!

    Jankos last blog post : 5 simple ways to improve links

    0
  • Steph

    Monday, February 23rd, 2009 20:51

    9

    So cool! I have been looking for this forever! Great thanks so much.

    0
  • Eric Shafer

    Monday, February 23rd, 2009 18:52

    8
    0
  • Desizntech

    Monday, February 23rd, 2009 18:22

    7

    Nice one Dannis ! I always wanted to do PSD to XHTML. Never got around it maybe this time I will give it a try

    0
  • S.M.Junaid

    Monday, February 23rd, 2009 09:22

    6

    Awesome sharing buddy,… i learn here alot.

    +4
  • joyoge designers' bookmark

    Monday, February 23rd, 2009 17:11

    5
    0
  • Tom Ross

    Monday, February 23rd, 2009 08:54

    4

    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

    0
  • Tom Sinclair

    Monday, February 23rd, 2009 13:04

    3

    Great post, should help a lot of people looking to code their own designs!

    0
  • Frank Stallone

    Monday, February 23rd, 2009 04:18

    2

    Funny my girlfriend asked for these today, thanks for the perfect timing. =)

    Frank Stallones last blog post : iPhone WordPress

    0
  • Dainis Graveris

    Monday, February 23rd, 2009 09:33

    1

    @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 :)

    0

Comments are closed.

50.19.74.67 - unknown - unknown - US