Advertisment
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
40. CSS Layout Technique – Achieving 100% Height
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.
Hey, Nice Tut list guys really good couple of examples here
Nice one :D
very good hope it stays that way so I can improve more!
Nice tutorials………….for startup guys in web
Very nice Post. Keep it
Old but very good collection. your 10 tutorial was My first tutorial made from 0 when i was an newbie
Its pretty old lol but
thank you so much ..
:D
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
Hello, very nice tutorial collection.I liked it, my favorit it is number 33. thank you
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!
Great post I would like to see one about psd to wordpress coding.
Thanks.
[...] 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | Graphic and Web Design Blog. [...]
Very nice work. This compilation would be very handy for a lot of new web designers out there. Great job. Keep it going….
All the best,
3TurtleStudios
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
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!!!
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!
its very nice. Great post
Excellent post. Thanks
[...] 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation [...]
[...] 英文原文:43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation 翻译原文:43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程(暴风彬彬) VN:F [1.8.0_1031]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.8.0_1031]Rating: 0 (from 0 votes)AKPC_IDS += "1299,";Popularity: unranked [?] 相关日记99款高质量免费(X)HTML/CSS模板 (0)无需图片css实现三角气泡提示效果 (0)常被遗忘但非常有用的10个CSS属性 (0)页面网格布局辅助工具 (0)如何编写兼容多浏览器的CSS代码 (0)18个CSS精简压缩工具和技巧 (0)CSS盒模型详解 (0)8个CSS图表数据制作实例 (0)CSS背景属性Background详解 (0)CSS网页布局中易犯的10个小错误 (0) AKPC_IDS += "1299,";Popularity: unranked [?] [...]
[...] 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation [...]
[...] -提供一些伟大的菜单选项，为每个指令。 43私营部门司XHTML的CSS教程创建Web布局和导航 -大量的教程列表变成有效的CSS您的Photoshop设计/ XHTML文件。CSS图像映射 [...]
[...] nije problem, preporucijem ovu genijalnu kompilaciju resursa za Photoshop i HTML/CSS – 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation – sa sajta [...]
[...] 43 PSD to XHTML, CSS Tutorials Creating Web Layouts & Menus [...]