I personally prefer plnkr because you can add some dependencies or packages, which are libraries from well-known communities, that you can write code and test.
Best Resources Online:
For This Tutorial:
Or you can just look at this embed:
Now, I will explain each part of the code in brief and easy to understand sentences. I know you don't want to waste time on some idle chat so let's start in the sections below.
Opening Developer Console on Browser:
I'm using Chrome and FireFox, you can right-click with your mouse and open the console by inspect element or through the browser settings in more tools, then developer console.
So if you run the code and have your developer console open, you should see something like this:
I know, I intentionally didn't put it in order so that you can practice how to read which line of code is being executed where. I also left a good amount of comments, which is denoted by two forwards slashes, //, you can also do multi-line comments with /** **/ (I believe that's the way).
In the practice code, you can also see that we can include mixed variables together and print them out, you will also see the use of precedence, which is certain characters are more important than others, like PEMDAS in math. In the practice code, in the file script.js, within our function call, which is defined by declaring it as a function, naming it, and allowing parameters or not, which is similar to math like f(x), you can see that without the parentheses we output an undesired answer in the console when adding the two numbers together. That's because the string and number get concatenated together instead of doing the math operation for addition.
I forgot to mention and do an example of a while loop, but you can use the resources above for that.