Ask HN: If you didn't know it, how would you learn Front-end today?

As a developer with a bit over 5 years experience, I am sometimes asked by my friends about starting their own Front-end career. Where do you begin? What is an outdated knowledge, and what important? How do you write code that is at least close to being "production-ready" these days?

That questions asked about Java are a little simpler for me - "Take this book, this one and this. Here are the patterns, just remember these from this book. You'll learn the rest on the way." - few months later this person can be seen sitting as a Junior/Med in some software company. These languages do change, quite a lot, but Front-end is a bit more ... in a hurry - and learning from books does not work for it at all.

Even though Angular and React got most shares of the up-to-date production stack, Front-end environment is still not really settled. When I google "javascript tutorial", it takes only about 12 pages until I first hear about anything related to ES6. "Modules?" - "Not this time, mate. But we've got this cool quiz that you can finish and get a JavaScript certificate!" "When was your guide last updated?" - "1996, but javascript didn't change even a bit, trust us on that! Also, would you like to obtain a FREE JavaScript certificate?" "React, Angu..." - "Shhh, there, a certificate for your eager spirit!"

When I was learning JavaScript a bit of time ago, there was only jQuery. And RequireJS. And that was pretty much all you needed. Today, new frameworks appear daily. It is not an easy path for a newcomer, when they have to learn at least 2-3 of these frameworks to even get started. And there seems to be no single, intuitive and reliable source to learn the basics from.

tl;dr;

Do you know any quality online tutorial that provide actual introductory knowledge of the current Front-end stack, in a beginners'-friendly form? (Vanilla, React or Angular, common tools like Webpack, ESlint, transpilers, maybe a bit about handling asynchronous code)