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!
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.<p>- <a href="http://backbonejs.org/docs/backbone.html" rel="nofollow">http://backbonejs.org/docs/backbone.html</a><p>- <a href="http://underscorejs.org/docs/underscore.html" rel="nofollow">http://underscorejs.org/docs/underscore.html</a><p>- <a href="http://marionettejs.com/annotated-src/backbone.marionette" rel="nofollow">http://marionettejs.com/annotated-src/backbone.marionette</a>
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.
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.
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.<p>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.<p>For the basic timeline of when things happen, research how a website is rendered. Here's some info to get you started:
<a href="http://frontendbabel.info/articles/webpage-rendering-101/" rel="nofollow">http://frontendbabel.info/articles/webpage-rendering-101/</a>