Ask HN: Guide/Tutorial for designing a WebUI from scratch?

This doesn't exactly answer your question, but you could take the contrarian approach and spend time learning Cappuccino, which abstracts a lot of the archaic and difficult web UI principles away.<p>Web UI is difficult to define (there is no standard, but there are a bunch of competing standards) - and from a RAD perspective it's behind where the desktop was 10 years ago.<p>You may also get some benefit from looking into web frameworks such as Catalyst (if you know Perl), or Django or Rails (for Python and Ruby respectively). Examples for those frameworks really are very good walkthrus of creating a webapp.

Check <a href="http://www.smashingmagazine.com" rel="nofollow">http://www.smashingmagazine.com</a> for all things design related. They have a lot of articles, tools, and tutorials for this sort of thing..

If you you want to write HTMl code from the scratch. Go to <a href="http://projectdeploy.org/" rel="nofollow">http://projectdeploy.org/</a> and download complete Skeleton structure based on your requirements.Then head over to <a href="http://speckyboy.com/" rel="nofollow">http://speckyboy.com/</a> this has the best set of Tutorials and Showcases. Programming for web is fairly very simple.

I think the best tutorial/framework book for building a web app from scratch is Agile Development with Rails by David Heinemeier Hansson.<p>If you have a Java background, you should also look into Lift/Scala. The Lift web site is found here: <a href="http://liftweb.net/" rel="nofollow">http://liftweb.net/</a><p>There's an O'Reilly book on Scala which looks like a solid reference.

Well, do you know the basics? HTML and CSS? Pretty much all the custom buttons, menus, etc you see are just clever HTML and CSS, with some well placed images.<p>Are you asking how to design a button in, say, a graphics program? Or are you asking how to turn an anchor into a fancy looking button using CSS?

May I suggest looking at dojo <a href="http://www.dojotoolkit.org/" rel="nofollow">http://www.dojotoolkit.org/</a>.<p>It provides prestyled controls with some themeing built in. You will still need to know some html and css but you can get calendars, dialogs, tabs, accordions etc very easily.

It's all done with html, css and javascript. Web UI development is all bag of tricks; the big frameworks try to unify these disparate tools and techniques under one API .. but it's not always clean.<p>Worse than UI is data management. Data model, layout, access, searchability, performance, distribution of the underlying system and its scalability, etc.<p>Worse than both is session management.<p>There is no one HOWTO for this. You will need to get a few books on CSS, clean HTML design, and a decent javascript library. JQuery is trivial to learn and its jquery-UI library will abstract a good chunk of the difficulty, but you still have to understand how everything works underneath.<p>If you don't get the web, you might be better off playing with HTTP as a protocol. Writing a screen-scrapper for various sites and dealing with cookies, hidden forms, authentication and similar, using Perl LWP, will teach you more about HTTP than any book, though you can keep HTTP The Definitive Guide nearby.<p>You will need to <i>grok</i> HTML, get the oreilly HTML the Definitive Guide as well.<p>CSS? CSS The Difinitive Guide.<p>JavaScript? Get the Rhino book, JavaScript the Definitive Guide .. see a pattern yet?<p>The definitive guides on HTTP, HTML, CSS and JavaScript are the heavy tomes you will need on your desk(top). Nearly every other publication on the subject if frivolous and trendy. Those books are the meat; they're essentially guides to the specs themselves. You're C and C++ programmer, you will appreciate this stuff.<p>After that, get every book you can find on CSS. Buttons, menus are made with CSS and images. Buttons could be made with the &#60;button&#62; tag, but not always, there are also image buttons, along with "standard" button built into HTML forms (i.e. submit and reset.) Menus are made with lists, tabbed menus could be made with pure HTML but they are a pain, so some people use javascript for that.<p>The most important thing you will need to understand is the DOM. The DOM is what ties HTML, CSS and JavaScript together. The Rhino book actually covers all this ground.<p>Sessions tie a few loose ends together; you will learn a lot about POST and GET methods of HTTP trying to implement a shopping cart, for example. How do you persist user's shopping cart? does state stay on the server or does it go on the client side? Do you use cookie, session-side variable, do you rewrite URLs to encode the cart contents or do you put them in a hidden form input client side?<p>You wont be jumping into buttons and menus straight away; not if you want to understand <i>everything</i>. Play with web crawlers, learn to tweak websites with GreaseMonkye, get Firebug and have it open while you read the books, get the Tamper Data plugin for firefox and see what is being sent and back forth, get the YSlow plugin, etc. These tools will not help you learn all this stuff, but they allow you to peek into websites and show you how things are done. I use ColorZilla to copy nice color schemes from websites. The Firebug element inspector will highlight any screen element and show you how it's been coded in HTML, you can also inspect the CSS design and the javascript that makes it all alive. I learned most of this stuff by reverse engineering.<p>Welcome to hell my friend, it's gonna be fun.