Ask HN: Learn JavaScript from actual websites?

3 points by jndsn402 11y ago ↗ HN

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/CSS/JS/Jquery and I still have trouble understanding what is happening, or how something is achieved, just by checking out a page's source. If there was a JS teaching framework that picked apart the code of several actual websites, I would be interested. Thanks!

6 comments

[ 1.1 ms ] story [ 24.2 ms ] thread

gsands 11y ago ↗

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/

jndsn402 11y ago ↗

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.

rajacombinator 11y ago ↗

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.

bzalasky 11y ago ↗

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://underscorejs.org/docs/underscore.html

- http://marionettejs.com/annotated-src/backbone.marionette

taf2 11y ago ↗

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 11y ago ↗

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!