
Ask HN: How to learn Javascript and HTML for devs coming from C++/Java/Python? - codedivine
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?
======
tworats
I'm shocked nobody's recommended Douglas Crockford's ... well ... everything:

<http://javascript.crockford.com/>

Watch the "Javascript: The Good Parts" presentation:

[http://yuiblog.com/blog/2007/06/08/video-crockford-
goodstuff...](http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff/)

Also check out Dustin Diaz's stuff:

<http://www.dustindiaz.com/>

I found his screencasts where you watch him program to be incredibly helpful:

<http://www.dustindiaz.com/screencast-episode-01/>

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.

~~~
thetylerhayes
Absolutely Douglas Crockford. His live presentations are the single most
helpful and, more importantly, realistic/down-to-earth description of
Javascript out there.

------
patorjk
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:
<http://www.youtube.com/watch?v=hQVTIJBZook>

~~~
Legion
This book can not be recommended strongly enough. It was my "a-ha!" moment
with JavaScript. Especially for people with programming experience in other
languages, it's a gem. It's thin and easy to overlook, but every page is a,
"so _that's_ why JS behaves like that!" revelation.

~~~
leif
I have a friend who describes it exactly the same way.

------
mickeyben
For Javascript, I totally recommend the Mozilla's guides
<https://developer.mozilla.org/en/JavaScript/Guide>. Just a warning some of
this code doesn't fully work on all browsers but AFAIK they point it in the
guides.

For HTML the w3schools guides are good
<http://www.w3schools.com/html/default.asp> (the javascript one are also ok).

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.

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.

~~~
atuladhar
I'd add ExtJS (<http://www.sencha.com/products/js/>) to that list. It's a got
a very larget widget library, an active community and provides adapters to
make it easy to work at the same time with other libraries. Plus, some of the
new libraries Sencha (the company behind ExtJS) is coming up with to develop
JavaScript apps on Touch devices look very promising.

~~~
mickeyben
Thanks for adding it to the list, I've always been stopped by the Windows-ish
UI (as Google closure) but I read good feedbacks coming from it.

I also forgot GWT if you're coming from Java it could be a simple way to do
some web development. I used it a bit at Seesmic and keep a good overall
experience.

Of course GWT abstracts lot of things so you'll ended up by having a nice
final product but not really understand the roots of html and javascript.

------
malandrew
Read Zeldman's "Designing w/ Web Standards, 3rd Edition". That book will give
you direction and save you a lot of time.

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.

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.

I haven't read them yet, but Zeldman recommends the following JS books:

DOM Scripting: Web Design with Javascript and the Document Object Model

The Javascript Anthology: 101 Essential Tips, Tricks, and Hacks

For CSS, the best resources are Eric Meyer's "CSS: The Definitive Guide" and
"CSS: Pocket Reference"

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.

~~~
codedivine
Thank you! Ordered the "Designing w/Web Standards" book first.

~~~
malandrew
You'll enjoy it. It may be over 400 pages long but it's a really quick read.
You should be able to read it all in 1-3 days.

Zeldman makes tons of link references throughout to a bunch of excellent
resources, oftentimes the original sources explaining a new idea in web
design. Make sure to check those links out, they add a lot of value and
context, especially the A List Apart references.

The last chapter in the book ties everything together and walks you through
building the Agenda from NY Mag in HTML and CSS first and then using JQuery to
add behavior:

<http://nymag.com/agenda/?f=agenda>

~~~
HiroshiSan
Wonderful book recommendation, I am half way through, knowing nothing about
web-design. Reading this book puts a huge smile on my face, it is funny and an
easy read!

------
sandaru1
One of the first things you have to do is installing the firebug extension for
Firefox.

------
raganwald
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 _not_ be seduced by the ALGOL syntax.

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.

JM2C.

------
jcfrei
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.

------
endtime
If you know Python, learn CoffeeScript - that's how I learned JS.
<http://coffeescript.org>

------
shubber
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
"[http://www.slideshare.net/SlexAxton/superclassy-
inheritance-...](http://www.slideshare.net/SlexAxton/superclassy-inheritance-
in-javascript)

The Mozilla HTML reference is very good:
<https://developer.mozilla.org/en/HTML/Element> 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 :)

As for CSS, I've always just used the W3's reference:
<http://www.w3.org/TR/CSS21/> 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.)

Finally, <http://www.alistapart.com/> is a great reference for the pragmatic
state of web design. Lots of great articles, especially going back a bit.

------
erikig
I'd suggest approaching this from a slightly different perspective.

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.

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.

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.

A couple of weekends later you can add "Web Developer" to you resume : )

------
redraven
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.

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.

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.

------
ibejoeb
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.

<http://eloquentjavascript.net/>

<http://javascript.crockford.com/private.html>

Also, I'd recommend making this _the_ way you start writing software with
JavaScript.

[http://www.adequatelygood.com/2010/3/JavaScript-Module-
Patte...](http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-
Depth)

------
codedivine
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?

~~~
grayrest
CSS is actually the tweakiest part of the frontend triumvirate. The syntax
isn't hard (selector + bag of key/value pairs) but putting it together so it
reliably renders on all browsers takes weeks/months.

I'd recommend doing sass/compass instead which both provides an abstraction
layer and a library of working code. If you're starting from nothing, the SASS
syntax will probably be easier to work with than the default SCSS syntax. You
can dig into the libraries if you really care about how things work, but it's
always easier to start from something that works than to try to figure out
stuff from scratch.

~~~
malandrew
I second this suggestion to work with Compass/SASS. I use SASS and HAML
together.

Avoid the desire to work with one of popular grid frameworks like Blueprint or
960.gs unless you are sure that your project really needs something like that.

------
tocomment
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.

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?

~~~
malandrew
Given that the author is interested in HTML as well, I imagine that he
probably is more interested in JS resources that focus on the DOM and not on
using JS as a general purpose programming language. However, I may be wrong
about this.

~~~
codedivine
You are correct. More interested in front-end stuff for now.

~~~
malandrew
Given the state of things today, I would definite focus on web standards and
semantic HTML. The reason being that any front end HTML you write today is
likely to be used both on the desktop and via mobile devices.

Writing good clean semantic HTML will help ensure that you need only write one
HTML document that is then styled by one CSS document for the desktop and one
for mobile devices. Plus writing semantic HTML will give you basic SEO for
free.

I honestly wouldn't worry about the JS frameworks just yet unless you have
something specific in mind that you want to build. There's so much other basic
stuff to learn. I would tackle javascript after you have a good grasp of HTML
and CSS.

------
sharvil
This class at UW, teaches all that. Here is the website:
<http://www.cs.washington.edu/education/courses/cse190m/10su/>

They have some great resources there.

------
d0m
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.

Don't get me wrong, the world wide web is a totally different beast.. however,
the basic stuff still stay the same :)

------
S_A_P
besides by "doing it" I say bulletproof web design is a good book to start
with. [http://www.amazon.com/Bulletproof-Web-Design-flexibility-
pro...](http://www.amazon.com/Bulletproof-Web-Design-flexibility-
protecting/dp/0321509021/ref=sr_1_1?s=books&ie=UTF8&qid=1287681593&sr=1-1)

javascript- the good parts could also be helpful
[http://www.amazon.com/JavaScript-Good-Parts-Douglas-
Crockfor...](http://www.amazon.com/JavaScript-Good-Parts-Douglas-
Crockford/dp/0596517742/ref=sr_1_1?s=books&ie=UTF8&qid=1287681662&sr=1-1)

www.jquery.com smashingmagazine.com ajaxian.com

all helpful

------
sahillavingia
Man, I'm the complete opposite way. How would you recommend learning Python?

~~~
japherwocky
The official python tutorials are pretty good actually:

<http://docs.python.org/tutorial/>

------
julietteculver
This Javascript tutorial is aimed at Python programmers:

[http://bitbucket.org/jfine/javascript-for-python-
programmers...](http://bitbucket.org/jfine/javascript-for-python-
programmers/downloads)

------
redliner
<http://www.w3schools.com/>

Seriously.

~~~
ronnieCA
Coming from a similar background, I second a lot of the links pointed out so
far (w3schools and JQuery have been a huge help in particular). It's a great
start. After that, just dive in. I started writing a chess game using canvas
(part of HTML5) and javascript. It's just been a matter of figuring it out
piece by piece from there. Writing lots of awful code, figuring out why it's
awful, tearing it up and doing it again (Javascript: The Good Parts has been a
great help).

I've managed to learn just enough html/css/javascript to be dangerous, now I'm
moving on to server-side programming. What I like to do is this: Take an
11"x17" piece of paper, and write whatever it is I'm trying to learn in the
centre and circle it. As I figure out what I don't know know about this
technology, but need to, I draw a branch off the centre circle, for that piece
of knowledge. And I continue to break it down as I go. This gives me a good
visual of things I should start focussing on.

As a more concrete example, I'm using python as the backe end to my current
side project. So in the centre of the page is a bubble for python. Off that I
have different things I want to explore, so there is a bubble for Security,
WSGI, templating engines, and SQLAlchemy. Off of security, there are bubbles
for server hardening, XSS, etc..

Best of luck, there's lots of confussing technologies and non-sensical
gotchas, but eventually it does start to make sense.

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

------
kilian
Skip w3schools (seriously). Skip websites on specific stuff. There is, right
now, really only one good resource to get your started:

 _The Opera Web Standards Curriculum._ It is the only thing that takes you
from A to Z with 100% up to date correct information.

<http://dev.opera.com/articles/wsc/>

