I am a programmer who has good knowledge of C++, Java, Python and even some Common Lisp and looking to learning a bit of HTML, CSS and Javascript. What resources will you recommend for learning these to a developer who is experienced in other languages?
I'm shocked nobody's recommended Douglas Crockford's ... well ... everything:<p><a href="http://javascript.crockford.com/" rel="nofollow">http://javascript.crockford.com/</a><p>Watch the "Javascript: The Good Parts" presentation:<p><a href="http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff/" rel="nofollow">http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff...</a><p>Also check out Dustin Diaz's stuff:<p><a href="http://www.dustindiaz.com/" rel="nofollow">http://www.dustindiaz.com/</a><p>I found his screencasts where you watch him program to be incredibly helpful:<p><a href="http://www.dustindiaz.com/screencast-episode-01/" rel="nofollow">http://www.dustindiaz.com/screencast-episode-01/</a><p>Start your javascript programming with jQuery. Good javascript style is not at all like Java, so forget everything you know about Java and see how jQuery does it.
I found the book "JavaScript: The Good Parts" by Douglas Crockford to be very helpful in understanding the language. It's short and covers the main things you'll need to know. It's a good starting place. In fact, he gave a tech talk on the main topics of his book which you can find here: <a href="http://www.youtube.com/watch?v=hQVTIJBZook" rel="nofollow">http://www.youtube.com/watch?v=hQVTIJBZook</a>
For Javascript, I totally recommend the Mozilla's guides <a href="https://developer.mozilla.org/en/JavaScript/Guide" rel="nofollow">https://developer.mozilla.org/en/JavaScript/Guide</a>.
Just a warning some of this code doesn't fully work on all browsers but AFAIK they point it in the guides.<p>For HTML the w3schools guides are good <a href="http://www.w3schools.com/html/default.asp" rel="nofollow">http://www.w3schools.com/html/default.asp</a> (the javascript one are also ok).<p>Once you get the basics of Javascript I'll recommend to go with one of this frameworks : JQuery, Prototype/scriptaculous, Mootools, Dojo, Google closure or Yahoo YUI.<p>There's no better ones, it's a matter of preference, I personally currently use JQuery but for some projects I used Mootools (great piece of code) and Prototype/scriptaculous. I heard a lot of goods for YUI also.
Read Zeldman's "Designing w/ Web Standards, 3rd Edition". That book will give you direction and save you a lot of time.<p>The problem with HTML is that it is a pretty loose language and you can do a lot with it without getting your syntax right. On top of that you have a lot of confusion because of HTML 4.01, HTML5 and XHTML 1.0.<p>Because of all that you will find tons of HTML resources all over the web that may appear decent, but actually teach you bad habits and old hacks that are no longer best practice. Zeldman's book will give you some direction so you don't waste too much time and develop good habits from the beginning. If it's not the first book you read, it should at least be the second book you read.<p>I haven't read them yet, but Zeldman recommends the following JS books:<p>DOM Scripting: Web Design with Javascript and the Document Object Model<p>The Javascript Anthology: 101 Essential Tips, Tricks, and Hacks<p>For CSS, the best resources are Eric Meyer's "CSS: The Definitive Guide" and "CSS: Pocket Reference"<p>The current edition of The Definitive Guide is a 2006 edition. I asked Eric about a new edition and although there isn't a date set, he expects a new edition covering CSS3 sometime in 2011.
Not a resource, but speaking as someone who is not a Javascript or Python expert, but used to know his way around C++ and java, my suggestion is to ignore everything you think you know about C++ and Java when learning Javascript. Do <i>not</i> be seduced by the ALGOL syntax.<p>When learning a new language we often think in an existing language and then "translate." Until you start "Thinking in Javascript,' I beg you to "Think in Python," not C++ or Java.<p>JM2C.
If you're going into some frontend development with javascript make sure you also get familiar with at least one of the common javascript libraries like jquery. they're very powerful.
I'd actual advise you to "Think in Lisp" while learning Javascript - I'd just read "The Structure and Interpretation of Computer Programs" when I started getting deeper in the JS, and it made a world of difference. The Javascript type system is a little like Python and a little insane - check out "<a href="http://www.slideshare.net/SlexAxton/superclassy-inheritance-in-javascript" rel="nofollow">http://www.slideshare.net/SlexAxton/superclassy-inheritance-...</a><p>The Mozilla HTML reference is very good: <a href="https://developer.mozilla.org/en/HTML/Element" rel="nofollow">https://developer.mozilla.org/en/HTML/Element</a> and between it and just viewing the source on decent websites you can learn a lot - coming from Java, you must know XML pretty well already :)<p>As for CSS, I've always just used the W3's reference: <a href="http://www.w3.org/TR/CSS21/" rel="nofollow">http://www.w3.org/TR/CSS21/</a> which is a little dense but followable. (The W3 for HTML isn't bad either, but they will use the schema definitions for everything, which are slightly opaque.)<p>Finally, <a href="http://www.alistapart.com/" rel="nofollow">http://www.alistapart.com/</a> is a great reference for the pragmatic state of web design. Lots of great articles, especially going back a bit.
I'd suggest approaching this from a slightly different perspective.<p>Find a simple problem - say and ajax driven to do list for instance - and mock up a simple HTML front end preferably from scratch, hand-coding the HTML. Reference sites abound but I keep finding myself at w3schools.com which was previously mentioned. As you solve individual UX problems you'll quickly get the hang of how HTML does its thing. Pay attention to standards and validate you code using the W3 validator. A good HTML editor like Dreamweaver (free trial available from Adobe) will do you wonders.<p>For user interactivity (alerts, browser validation, submitting data asynchronously etc) you roll out some Javascript and try solving the problem with plain vanilla javascript and then with a library like jQuery or ExtJS. I think this is the only way to grasp the utility of these libraries.<p>Then on the server end a web dev framework (Django if you love Python...) will get you done. Again, try solving the problem without the framework and then phase it in.<p>A couple of weekends later you can add "Web Developer" to you resume : )
I started javascript programming just a few months back, and I think a really quickly picked it up due to my relatively good programming background as yourself. I've primarily written in Java and Perl before.<p>Javascript is dynamic language, and I think a lot of it will have some familiarity of python (...well, I think so - I do not know python...). I would recommend to start with "Object Oriented Javascript" (Stefanov) from Packt Publishing, rather than the Javascript brick from Oreilly. You get through this book relatively quickly. One quirk of JS is the use of the "this" keyword, which you might find being used in a bit oddly ways.<p>HTML will you understand relatively easily as well. You might need to pick up some CSS layout techniques which I sometimes finds a bit baffling from time to time.
I have a similar background, and I found these two excellent reads removed a lot of the ambiguity that I think comes with JavaScript. For me, I was constantly having an internal argument around designing functionally--encapsulation and messaging via closures--vs designing in an object-oriented paradigm.<p><a href="http://eloquentjavascript.net/" rel="nofollow">http://eloquentjavascript.net/</a><p><a href="http://javascript.crockford.com/private.html" rel="nofollow">http://javascript.crockford.com/private.html</a><p>Also, I'd recommend making this <i>the</i> way you start writing software with JavaScript.<p><a href="http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth" rel="nofollow">http://www.adequatelygood.com/2010/3/JavaScript-Module-Patte...</a>
Thanks for all the responses so far! Any recommendations about CSS? And recommendations for good books apart from "Javascript the good parts" mentioned so far?
Somewhat unrelated: I heard that learning NodeJS(right name?) for the server side is useful because then you can program in JS on both the server and client side.<p>But I can't imagine any cases where this is useful? Is it just the benefit that you don't have to think in two different languages or is there something more to it?
This class at UW, teaches all that. Here is the website: <a href="http://www.cs.washington.edu/education/courses/cse190m/10su/" rel="nofollow">http://www.cs.washington.edu/education/courses/cse190m/10su/</a><p>They have some great resources there.
Been there, done that. The most useful tip I could give you is to have trust in your guts that you can do it and just start.<p>Don't get me wrong, the world wide web is a totally different beast.. however, the basic stuff still stay the same :)
besides by "doing it" I say bulletproof web design is a good book to start with.
<a href="http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=sr_1_1?s=books&ie=UTF8&qid=1287681593&sr=1-1" rel="nofollow">http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...</a><p>javascript- the good parts could also be helpful
<a href="http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?s=books&ie=UTF8&qid=1287681662&sr=1-1" rel="nofollow">http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockfor...</a><p>www.jquery.com
smashingmagazine.com
ajaxian.com<p>all helpful
This Javascript tutorial is aimed at Python programmers:<p><a href="http://bitbucket.org/jfine/javascript-for-python-programmers/downloads" rel="nofollow">http://bitbucket.org/jfine/javascript-for-python-programmers...</a>
Might not be exactly what you're looking for in terms of learning Javascript, but I found the Javascript Koans to be pretty cool.. github.com/mrdavidlaing/functional-koans
Skip w3schools (seriously). Skip websites on specific stuff. There is, right now, really only one good resource to get your started:<p><i>The Opera Web Standards Curriculum.</i> It is the only thing that takes you from A to Z with 100% up to date correct information.<p><a href="http://dev.opera.com/articles/wsc/" rel="nofollow">http://dev.opera.com/articles/wsc/</a>