Intro to Programming & Web Dev

    I decided to write this because I see there is an increasing interest in learning web development/programming but it is almost impossible to know where to begin. There are tens of thousands of sites which proclaim to be the best way to learn or the definitive guide and it's easy to get lost in tons of technical jargon and confusing lists. The title of this blog post is "How to Learn Javascript" and you might ask why not Python or Ruby/Rails? Simply put because Javascript is the most dominant language on the web at this point by leaps and bounds. Don't believe me? Activity of Code for Different Languages, Job Trends. Popularity matters on the web as it determines how much support you can get and how often things are updated.

    Not only that with Javascript now on the Backend(NodeJS) one can make a site from front to back entirely in Javascript without having to learn the syntax of another language or deal with the mental context switching involved when one has to go from Ruby for example to Javascript and then back. An advantage of having Javascript on both the frontend and backend you can very often reuse your code. Additionally with Facebook's React Native you can create native iOS and Android applications with only Javascript, you don't need to learn Swift or Java to make apps anymore. Is IoT(Internet of Things) more your thing? You can use NodeJS on the Raspberry Pi and program drones/sensors to use NodeJS. There are even Machine Learning Libraries which can help you to develop your next artificial intelligence (I believe in you).

    My main issue with self learning was always coming across outdated fragmented code and trying to piece together tutorials/books which had bad practices or code which didn't even work. In the list of links below I have books, video tutorials (which I personally love), articles, cheatsheets, and miscellaneous links of interest along with personal guidance which can all accompany on your journey towards being a javascript wizard. Some people learn better by books others through project or practice. I suggest using every option available to ensure that your knowledge is airtight.

Anyway like I said the ecosystem is exploding, you can code anything from a drone to an iphone app.

You think you're ready now? Watch this before reading anything below, it may be a little dated but gives a good general overview. LearnCodeAcademy Web Development Career Advice

Then read this State of the JavaScript Landscape: A Map for Newcomers

Don't get overwhelmed I promise you it's not that complicated. Sit down, relax, breathe, and most importantly have some patience. Now let's begin.

Learning Sites:

Free
CodeAcademy -Tons of Guided and Interactive Tutorials for HTML/CSS/Javascript/Angular. Start here before going to any other site.
FreeCodeCamp - Online free guided bootcamp with certifications. Have not personally done it but have good things about the different curricula. I personally learn better with video screencasts such as Pluralsight, Treehouse, CodeSchool supplemented by books which are listed.
The Odin Project - Ruby Based Code Development Online Code Camp with Javascript taught for frontend. I personally would not recommend learning Ruby/Rails at this point especially as this blog post is focused on using Javascript on both the backend and the frontend. Backend Javascript is NodeJS with the accepted standard as Express(although Sails, Koa are alternatives).
Scotch.io - A website with a bunch of step by step tutorials for MEAN applications (Mongo, Express, Angular, Node), React, Sockets, Node in general, Setting up API's, Using APIs, Learning React etc.
NodeSchool - A bunch of command line tutorials for everything not only node but javascript in general such as sockets or array methods

Paid
Pluralsight - Online Video Tutorials with tons of content for not only Javascript, but design, development, etc. Highly recommended as I have used this myself and not only for software development but for everything.
CodeSchool - Website primarily focused on web development, I would suggest checking out CodeAcademy first before diving into CodeSchool as some background is required. Also highly recommended as it helped jumpstart my javascript knowledge.
TeamTreehouse - Similar to pluralsight, tons of great content, and extremely easy to use dashboard to keep track of your progress and the courses you are taking. Has everything from simple introductory courses for noobs to more advanced tutorial videos. Like pluralsight it has much more than just web development.
Egghead.io - Some Free Videos to get a taste. I would highly recommend from personal experience. Their React, functional programming, d3, and redux videos are concise yet information filled.

Javascript

1. CodeAcademy
   • I would personally suggest doing the Javascript tracks in CodeSchool to solidify your javascript knowledge before progressing. They routinely offer free trials although I would highly suggest signing up as they have some great content although the video introductions sometimes get slightly cheesy.
2. Practical Javascript - "Free online course that get started. There's a lot of learning material out there that purports itself to be beginner level but in reality isn't made with the perspective of the student in mind. The examples in practical js are all building towards the same todo list application so the context for what you're doing is all there, and that's extremely important for beginners like us. I'd have to agree with the watchandcode.com link. It's a FREE course that is actually pretty amazing. The instructor's goal is to get you to give you a foundation so that you can easily learn other languages. You won't have the question of "what should I learn next?" anymore, since you can easily learn any language with a good base of knowledge.
   I've tried most of the resources on the sidebar and struggled through each one of them before invariably giving up . I've tried codeacademy, but it didn't get me very far into actually building something. I looked at Eloquent Javascript, and it was so confusing that did more damage to my progress than anything else. Considering that I'm a beginner, I had no idea how applicable any of the first few chapters were and it became a slog to get through. I had tried to remember all the definitions of the terms without actually doing any programming. Lots of my developer friends say that the struggle is just a part of learning how to program. I believed them at first until I ran across Practical Javascript from watchandcode.com.I like that the course is project based, and that a lot of the features in the project can be applied to building most every website out there. You learn what you need to learn in a nice sequence, building upon what you've learned. There isn't jumping around from one concept to the next. I actually feel like I'm making progress and not googling every little thing and wasting my time going down rabbit holes.Also, the instructor runs study sessions every Sunday. He gets on google hangouts and does screen shares with people who need help. I don't think I've seen that kind of feature in any other course. I'd jump on the course now, while it's still small. I don't think he'd be able to keep up these office hours with a few thousand students.Gordon has become a personal acquaintance and I can count on him to ask specific questions to help ease in learning. He's a former Google engineer....enough said. He has two courses and is always in touch if you need to contact him. Try practical JavaScript first (it's free) and will lay an appropriate foundation to continue your career development - especially in front end development. Next, I'd highly recommend looking into developing w/ angular and taking Gordon's course. - I've done both courses and pretty much use his courses everyday as reference. Check it out - I think you'll really enjoy learning from Gordon." - This was not written by myself but rather can be found in the references at the bottom of this page. I decided to include this at it was informative.
3. I found online the following suggestion once you know syntax check out Adam Khoury youtube playlist Which has a lot of small projects. There's something to achieve, and he goes through it step by step explaining how it is achieved and why he took certain steps. I feel it's a good next step if you think you understand how to use javascript to do simple things, but want to go deeper while doing something practical. I haven't checked this out so I cannot confirm whether or not this is the case but once I do I will either remove this or edit this comment.
4. You Don't Know Javascript Series. A great series of books by Kyle Simpson although may be a bit dry for a javascript novice. If these end up being too hard to digest I would head over to the Books section by the introduction.
   • You Don't Know JS: Up & Going
   • You Don't Know JS: Scope & Closures
5. Object Playground - Short video tutorials and excerpts explaining what objects are and how they "work" in Javascript. Excellent.
6. Advanced Javascript by Kyle Simpson PAID
7. You-Dont-Know-JS: This & Object Prototypes - More from Kyle Simpson in his You Don't Know Javascript series
8. Article on ES6 Class
9. Essential Javascript Links by Eric Elliot
   • The Two Pillars of JavaScript Part 1: Prototypal OO
   • The Two Pillars of JavaScript Part 2: Functional Programming
   • Classical Inheritance is Obsolete (Youtube 43min)
10. Asynchronous Programming: The End of The Loop by Jafar Husain

Node (back-end/Serverside)

Quick rundown before you begin, Javascript is able to run on the backend due to NodeJS which was created by Ryan Dahl. This lets you create Javascript code which can run on servers or perform the tasks of a server. Express is a framework built on top of Node which abstracts away some of the complexity of Node and can be seen as the Sinatra/Ruby for those familiar to the Rails world.

1. Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js LearnCode Academy Youtube Channel 15 min
2. The Art of Node - Cursory Introduction of Node and the Environment
3. NodeSchool.io - Free site with command line tutorials
4. LearnYouNode - Command Line Tutorial to introduce you to node
5. Philip Roberts: What the heck is the event loop anyway? - High Level Abstraction as to what NodeJS is and how it works (27 minutes, Youtube)
6. Paid Courses

• CodeSchool - Real Time Web with NodeJS
• Pluralsight - Intro to Node
• Codeschool - Building Blocks of Express JS
• FrontendMasters - Building Web Apps with NodeJS

7. Great Resources in comments to get Ramped up on Node
8. https://hyperdev.com/help/learn-node-js-free-beginner-course/ - Online Beginner Tutorial to learn Node

Frontend

There are tons of libraries and frameworks out there which you may come across. Names like JQuery, Ember, Knockout, Backbone, Angular, Meteor may stick out but as with anything in the web development world, things move fast and the defacto standard is now React. Built by Facebook it has been adopted by everyone from Netflix to Khan Academy. However React only deals with the "view layer" of your single page application(SPA, google it if you don't know the term) and you need something to manage your local application data flow, aka your data model. This is where Flux came in (an architecture pattern) which then became Redux (which is what you should use for many many reasons). List of sites using React if you need more convincing. Lastly why React? There's React-Native which is essentially React with some slight changes and you are able to make native applications for both Android and iOS devices. One language and you can write applications across many ecosystems.


React How-To by Pete Hunt - Written by one of the creators of React. A collection of links and steps to learn frontend development using React.

1. Tyler McGinnis React Fundamentals Course
2. The Just Enough Redux Reading List
3. Getting Started with Redux on Egghead by Dan Abramov who is the creator of redux. Extremely easy to follow and one of, if not the best redux tutorials(screencasts) I have come across. Notes to follow along.
4. Building in React with Introduction to Flux Ryan Florence 4hr course PAID
5. SurviveJS - Flux/React/Webpack/ES6 (Uses "old" implementation of Flux called Alt, Redux is now the norm as of writing) Good for seeing how the pieces fit together.
6. Crowdsourced List of React Tutorials on Github
7. Complete Intro to React
8. Learn Redux - 20(free) video series by Wes Bos and a paid React For Beginneers also by Wes Bos
9. Speed Learning React with ES6
10. https://reactjs.co/ - Great Intro to why you should learn React & Redux and a quick intro to learn them/resources to get started

Miscellaneous

1. Asynchronous Javascript FrontendMasters Jafar Husain ~9 hrs
2. Asynchronous Javascript Teaser Jafar Husain Youtube 43 min
3. Functional Programming / Observables
   • Functional Programming Exercises as an Intro to RxJS
   • RxJS Lessons on Egghead
   • Professor Frsiby's Mostly Adequate Guide to Functional Programming by Brian Lonsdorf
   • Hardcore Functional Programming in JavaScript Frontend Masters by Brian Lonsdorf 6hrs
4. Programming Javascript Applications - Eric Elliot
   • Straight to the point, learns you good patterns and also includes stuff on how to secure your js applications, which is hard to find information on. Supposedly good but requires a strong knowledge base.
5. "JavaScript: Understanding the Weird Parts" video series by Anthony Alicea on Udemy has been invaluable for some
6. CLI Tutorial
7. MDN - Mozilla Developer Network, Great Documentation which I personally use for both reference and for tutorials when I was learning.
8. ES6-in-Depth
9. http://www.sitepoint.com/preparing-ecmascript-6-let-const/ and all the links in it
10. Why do ES6 Classes Exist and Why Now - In Depth Explanation of ES6 Classes
11. Best Resources To Learn About Javascript Promises

Data Manipulation

1. Learn JS Data Data munging with Javascript using Native Array Methods, Functional Programming, D3 & Node

Machine Learning

1. Not Javascript, but advised Andrew Ng's Machine Learning Course on Coursera
2. Andrej Karpathy Neural Net Intro in JS
3. Burak Kanber Machine Learning in JS
4. http://www.datasciencecentral.com/profiles/blogs/machine-learning-in-javascript-a-compilation-of-resources
5. Deep Learning Library by Karpathy

Datasets

• https://github.com/caesar0301/awesome-public-datasets - A list of high-quality open datasets in public domains
• http://www.gapminder.org/data/

Big Data

• https://www.reddit.com/r/bigquery/wiki/datasets
• https://cloud.google.com/bigquery/public-data/
• Google Genomics

Cheatsheets

• ES6 Cheatsheet
• http://jsfeatures.in/ - Features of ES5 and ES6 in a cheatsheet format
• React & Redux Cheatsheets by Egghead, login required(free)

Cool Libraries

• DiffCam - Image Tracking, Heatmap Creation

Books

23 Free Javascript Books

General Resources:

jsBin For practicing in browser
repl.it For practicing in browser
Javascript is Sexy -"16 Javascript Concepts You Must Know Well"
Learn JavaScript Essentials (for all skill levels) by Eric Elliott
http://www.linuxmaster.me/2015/05/javascript-learning-resources/
http://sixrevisions.com/javascript/free-javascript-books/
[Awesome Web-Dev Resources][https://github.com/fahd/webdev-resources] - Nice organized collection of resources for the beginning/starting developer. Highly suggest checking it out.
Awesome React-Redux Links - Curated tutorial and resource links collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem.
Stack Overflow - Online Community/Forum where most of your google searches will come from. Check the solutions with the most upvotes/selected answers.
12 Essential Books - Essential 12 Books by Eric Elliot

Practice Problems

General Coding
Codewars
Coderbyte
CodeKata
Project Euler
Exercism.io
Code Forces

Interview Practice
HackerRank
InterviewCake
Javascript Interview Review - Great collection of resources to review for an interview in Javascript
Frontend Developer questions https://github.com/h5bp/Front-end-Developer-Interview-Questions#js-questions

Biology/Bioinformatics
Rosalind

Data Science
Kaggle

Youtube Channels

FunFunFunction Host: Mattias Petter Johansson aka mpj, Good channel to learn principles and concepts of functional programming (Beginning with Filter, Map, Reduce Array methods)
LearnCodeAcademy Host: Will Stern, Extremely well done videos covering all aspects of web design, Node, React, etc
Kyle Robinson Young- Tons of Mini Tutorial Videos Covering tons of concepts
Derek Banas - Tutorials not only limited to Javascript
Rob Merill
Max Sandelin
WebTunings - Videos for Big O notation Learning, Angular, Node(a bit outdated), Python, Java etc
BritishCode - A british chap who has begun to make introductory videos on javascript but seems to have promise
Frontend Center - Australian starting with webpack, producing high quality snippets of video

Newsletters/Sites to Follow

Echo JS
Javascript News
Pony Foo
Hot JS
Newsletters:
Front End News
Javascript Weekly
Node Weekly
2ality
r/webdev
r/javascript
r/learnjavascript
r/reactjs
Rebecca Murphey Blog - great resources/exercises

Javascript Jabber podcast - excellent shows, discussion. Over 200 now covering almost every tool chain, framework, library.
Javasript Air - live broadcast podcat all about javascript

People to Follow:

@getify, @_ericelliott, @BrendanEich, @holtbt, @jhusain, @andrestaltz, @drboolean, @cmdv

If you have any more links or comments that could help those reading this feel free to drop a line in the comments and I'll update this guide as often as possible.

Sources:

https://medium.com/javascript-scene/learn-javascript-b631a4af11f2#.4pm496sg5
https://medium.com/@cmdv/i-want-to-learn-javascript-in-2015-e96cd85ad225#.a0azbmhhr