I think I will answer in a different order, because “what I used to learn” the tools largely dictated what tools I learnt.
Mostly, freeCodeCamp. Majority of my learning came from contributing to the platforms, though, and not necessarily from doing the curriculum. The fun thing about freeCodeCamp is it teaches the main tools it is built on. So, after completing the curriculum, you have everything you need to be able to contribute to it.
As mentioned above, I learnt what freeCodeCamp teaches, which is the MERN stack. Along the way, I also threw in TypeScript and GraphQL.
Well, this is programming, and web development at that. So, I am still wrapping my head around all of the technologies; it takes more than HTML, CSS, and JS to make a website/app - you need so many other things like Babel to transpile, Webpack to bundle, WASM to compile (or Node), and then there are the infrastructure-based tools related to devops, and Git (in my mind, Git is just Git…).
To try to answer your question: After about 1 year, I felt quite comfortable with JS and React.
Just fun and interesting. It feels useful to be able to contribute to production/commercial code, and it really helped solidify the concepts learnt in the curriculum.
Projects. Personal, and open-source. Do them.
Challenge yourself with something interesting, and requiring more than you have needed before. It is nice to have a curriculum like fCC where the tools are taught one-by-one, but it is a new ballpark to learn how to use the tools together.
I hope you find some of this interesting and/or helpful.
My first advice is not to compare your learning exerience with others. How long it takes someone to feel like they “get it” depends on so many wildly different things, from their prior experience to their baseline self-confidence, that comparisons are truly meaningless. Just keep working and have fun with it.
I agree that you can’t compare different learning experiences (to quote Shakespeare, comparisons are odorous), but sometimes an analogy is helpful …
I taught guitar lessons for years: rock, jazz, classical, etc. I would get asked “how long until I’m good” all the time. I hated that question because it’s impossible to answer. What does “good” mean? Even if we could establish that, your concept of “good” is going to change drastically as you learn. Some of the best players in the world don’t think of themselves as “good” - that’s why they keep practicing. Pablo Casals, considered by some to be the greatest cellist of all time, was still practicing hours a day in his 90s. Once asked why he still practices so hard, he humbly replied, “I think I’m making progress.”
But that’s OK, because that isn’t our goal. Our goal is to have a solid understanding of JS and get a stack of framework and/or libraries that work well together. Don’t worry about “understanding everything”. Just learn and build things. Follow the already great advice here.