You seem to be at the pont where beginner tutorials dip down and advanced tutorials pick up (and are currently experiencing the general lack of intermediate level tutorials), so I think what I'd recommend doing actually is just "building stuff". I know that's an unsatisfying answer though, so maybe I can point you towards some specific things that are necessary in most web applications, that way as you're "building stuff" you have some specific goals to work towards learning.

In no particular order:

• AJAX (Asynchronous Javascript And XML)

  • To quote MDN (which, by the way, is a fantastic resource: https://developer.mozilla.org/en-US/) "In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files."
  • Basically if you want to talk to other severs (such as with APIs, detailed below), you'll need to use AJAX

• APIs (Application Programming Interfaces)

  • Pick your favorite site (Twitter/Instagram/Google/etc. (Google has a great API for pretty much all of its stuff)), and make an app that posts tweets/posts pictures/finds restaurants/finds pictures near restaurants/makes you a sandwich/etc.
  • Almost all APIs should be free, or at least have a free tier
  • Twitter: https://dev.twitter.com/rest/public
  • Instagram: https://www.instagram.com/developer/
  • Google: https://developers.google.com/
    • Or more specifically: https://developers.google.com/places/javascript/
  • CitySDK: https://uscensusbureau.github.io/citysdk/ and https://github.com/uscensusbureau/citysdk/blob/master/src/api/README.md
  • Turns out IMDB doesn't have one, but there is this: https://www.omdbapi.com/

• Having a backend with a database of some sort

  • Backend languages: Node.js (this is just Javascript, but on the server instead of the client) (Also you might find that using Express (another library) with Node.js makes things easier. I personally have never used Express and Node, but that's next on my list of things to learn.), Python (you'll have an easier time if you use something like Flask or Django, which are both Python libraries that makes running a backend easier), PHP (you may have heard bad things about PHP, but the latest version is muuuch better than the older versions, and since it's been around a while there are many many libraries and frameworks such as Laravel, Cake, and other things that are more specific to certain tasks like SwiftMailer for email)
  • Database languages: PostgreSQL (my favorite) and MySQL are both good relational db languages, I have heard good (and bad) things about MongoDB, which is a non-relational JS-based db language

• Tying into the backend thing, if you go with PHP and/or PostgreSQL or MySQL, then XAMPP (https://www.apachefriends.org/index.html - make sure to get the PHP 7.x version) will let you easily run all of that stuff locally. Otherwise Node.js and Python (with Flask/Django) should have ther own servers.

• Completely forgot to mention package managers, these let you manage dependencies for your projects super easily

  • Essentially you tell the package manager "I want library A, B, and X" and it downloads the latest version of each for you.
  • The popular JS one is npm (Node Package Manager): https://www.npmjs.com/
  • The only other one I've used is Composer (for PHP): https://getcomposer.org/

• As far as frameworks go, I'd recommend taking a look at Vue.js: https://vuejs.org/v2/guide/

  • Vue is the hip new thang, and I'm into it
  • I've been developing in AngularJS (1.x, not 2 or 3 or whatever they're on now) for the last year and I really like it, and Vue is similar to Angular while also taking all the nice parts of React (which you may also have heard of).

• Webpack (https://webpack.js.org/concepts/)

  • This is a biiiiiig timesaver, but it's also a bit of a bear to learn.
  • You might want to put webpack a bit further down on your list, just because it's not super clear to learn and I wouldn't want you to get frustrated and gve up.
  • Webpack is a "module bundler". What this means in practice is that you can tell Webpack "I have a bunch of little HTML, CSS, and Javascript files" and it'll put them all together into one big HTML file, one big CSS file, and one big JS file, all while putting all of the things you need for each (e.g. all your JS libraries) in those files as well. You can also tell Webpack to run other commands for you, such as if you're writing in Pug/SCSS/ES6/Typescript/Coffeescript/or some other language(s), it'll compile them all to regular ol' HTML/CSS/JS and bundle that, too.

I'll let you know more stuff as I think of it, but I hope this gives you some stuff to do in the meantime!