

Ask HN: Learn JavaScript from actual websites? - jndsn402

Is there a resource that walks through the end-to-end code of actual websites to help teach Javascript? I am almost through the Codecademy courses on HTML&#x2F;CSS&#x2F;JS&#x2F;Jquery and I still have trouble understanding what is happening, or how something is achieved, just by checking out a page&#x27;s source. 
If there was a JS teaching framework that picked apart the code of several actual websites, I would  be interested.
Thanks!
======
bzalasky
If you haven't checked out the annotated source of Backbone and Underscore,
I'd recommend starting there. I've also added Backbone.Marionette. Once you've
taken a look at the first two, you'll be able to see how Marionette builds on
top of both libraries.

\-
[http://backbonejs.org/docs/backbone.html](http://backbonejs.org/docs/backbone.html)

\-
[http://underscorejs.org/docs/underscore.html](http://underscorejs.org/docs/underscore.html)

\- [http://marionettejs.com/annotated-
src/backbone.marionette](http://marionettejs.com/annotated-
src/backbone.marionette)

------
taf2
I thought you meant by viewing source and using web inspectors to learn
javascript and I thought yes that's a great way to learn how things work...
Otherwise, Mozilla provides good reference materials. I think you need to just
build something now to figure it out. - you have to learn it from solving
problems. Pick a problem and solve it.

~~~
jndsn402
That's correct - I would like to learn that way. I was wondering if there is
any code teaching resource that actually bridges the gap between the
relatively basic and abstract content on e.g. Codecademy, and actual
implementations 'in the wild'. Ideally something like the annotated Backbone
documentation linked by bzalasky, but for a complete website (although the
Backbone links are a great resource and I will be checking them out).

Your suggestion and the other commenters' are great - thanks!

------
rajacombinator
I think you're better off learning through courses. Trying to reverse engineer
other site's JS by looking at their source is usually a pain because of how JS
source is served (heavily minified) and it requires you to dig through the
entire naming structure of the site's HTML, etc. Just stick with some courses
that teach you sound principles.

------
gsands
codepen.io would be a good place to learn by example. You will see many
isolated code samples with the clearly separated HTML/CSS/JS.

As you wrap your head around 'what is happening' as you put it, you can start
to combine what you see to make new creations of your own.

For the basic timeline of when things happen, research how a website is
rendered. Here's some info to get you started:
[http://frontendbabel.info/articles/webpage-
rendering-101/](http://frontendbabel.info/articles/webpage-rendering-101/)

~~~
jndsn402
Thanks! I was not aware of codepen.io - looks very interesting and I will
check it out further. Thanks for the other link as well.

