These resources are good for people who have had some experience in programming. The list of resources has a strong focus on the client-side (browser) programming but some bits cover the server-side (NodeJS) programming too.
These resources can be used concurrently. There is no need to do the online course first or start with the books only.
The other notable reference sites are Web Platform, Can I use and DevDocs.
All modern browsers have built-in debuggers that show currently loaded resources (scripts, css, images, cookies fonts, etc), network requests, console output, script errors etc. It is essential to learn to use the debugger as soon as possible so you can inspect script errors and not waste time trying to guess them (as it was in the development process on IE7 in the darker times). Further references for Chrome can be found from here and for Firefox from here.