I can totally relate to your sort of unsure approach and inquiry about learning JS for Web Dev Front End, I felt similar when I first started learning. The thing about the tech sector, is that things become improved/invented so quickly, and there’s so many similar, but divergent sections and stacks of tech, from languages, frameworks, build tools, IDE’s, Extensions for your IDE’s, API’s for your extensions for your IDE’s, API’s for your website, API’s for your mobile app, and that’s just one language. And JS is easily one of, and definitely is one of the top two most diverse languages for those factors. You can do JavaScript in a ton of different ways, through a ton of different avenues, and each one will have a somewhat different scope and emphasis on what you need to learn and why. If you’re going to definitely be involved with Web Development, then you probably should at the very least, familarize yourself with React. The bottom line, as a JavaScript powered Industry, is that JS is the lifeblood of all the coding, and all the potential softwares and applications and web components are going to ultimately derive from either vanilla JS, or something that was built out of, or from vanilla JS at some point. But there’s a lot to learn to really get any sort of mastery in JS, it’s a big language with a lot of different venues, and has a tremendous amount of flexibility. This is great for coding, but makes learning a lot more confusing and difficult to have a definitive structure of and for which route to take, or which route is the fastest/most efficient/most important or necessary.
But there are some fundamentals, and there are some things you can do, since you know your goals and ambitions personally, to narrow that down quite a bit. So, first off, you need to think about how SPECIFICALLY, you want to implement JS, and why. Do you want to teach JS? Learning Vanilla JS is mandatory for you to have those skills. Are you trying to get a front end dev job? The jobs that you apply for, and get, are going to have whatever their required framework, or system in place, and you’re going to have to learn how to do it with their system. This can be really difficult to know before hand, obviously, but learning vanilla JS, and React will help you a lot. React is the most popular Framework/Library that exists on top of Vanilla JS, and it has a ton of modularity, and some pretty signficant different implementation methods and strategies. At it’s core, it’s still JS, but it’s JSX, where you convert JS into a JS/HTML hybrid language that has a tremendous amount of modularity, using a system called Components and Leveraging Context (data, behaviors, and context(aka state/effects/memory) through a concept called Hooks, which are similar to Functions, but also very different. If you learn React, you will get very familiar with Hooks very quickly, Hooks and Components are the bricks and mortar of React. There’s also a bunch of other Frameworks, that are similar to React, like Angular, NextJS, Vue, Gatsby, Remix, the list goes on and on, but learning React will help you sort of translate those opinionated framework styles contextually, because they’re quite similar in a lot of ways.
If you want to code games with JS, then Kaboom or whatever the rebrand is, I forget, but it was KaboomJS until recently, and other framework packages are great for that, if you want to learn 3D video and Gaming, then Three JS is world class. If you want to learn JS in the back end, it’s going to be a lot more limited, and you’re going to learn another language as well, like Python, or Ruby, etc. but you’ll use stuff like Node.js and Rest API’s., Express used to be synonymous with the back end, and still is somewhat, but it’s getting replaced by newer stuff… If you want to make mobile apps with JS, and don’t want to learn Kotlin or Swift, then Expo is probably the easiest, most popular framework, if you’re working with Databases, then SQL, Mongo, FireBase, SupaBase, stuff like that is going to be your bread and butter.
So if all that sounds like martian, don’t worry, you can refine it further. If you know that all you know, is that you want to learn JS for web dev, then HOW for web dev? Making websites? Making apps? Making API’s? What do you want to DO with that JS? JS is all about DOING STUFF, so if you figure out specifically what stuff you want to do with it, you can learn what stuff will enable you to do that.
Your questions and approach are very solid, tutorials and answering questions to the gaps in your knowledge are going to help you learn a ton. Briefly, the major major things to know and understand about vanilla JS to be able to practically apply your JS to your web projects is something like : How to attach your JS with a Script tag, and what that means. How to make your script modular, or not, and what that means, how to implement and in what order you put that JS in as, in your JS files, which means learning the differences and how to differentiate between the scopes. Local scope and global scope are super important for implementing your code, and making intelligent, elegant effective code for projects and software. Along those lines, you need to learn about functions, and their parameters/arguments, how and why to apply them, how to call the functions, and when and why, how to make an array, take apart an array, reconstruct an array, and so on, how to implement an API (waaaaaay easier than it sounds, trust me) how to implement an event listener, like an addEventListener with an event, like a “click” with your mouse, and how to attach that event listener to your elements, like your buttons, and divs, etc. You also need to know how to do similar things with JS and your CSS, so that you can change styles and layout with your CSS, through your dynamic JS, using things like querySelectorAll, and what the difference is between the different versions, and when and why they are or aren’t applicable. And then probably lastly, how and what rendering is, uploading, creating, and changing the content on a page, with things like .innerText and .innerHTML. When you get comfortable with those core concepts, you can do a lot with JS and HTML and CSS. There’s still a TOOOONn of things to learn, like async coding, which is part of authorizations, or how your code verifies someone is a valid username, or a certain age, or a certain level of status for your program, json schema’s, or the code for your code, the instructions that tell your build tools, and servers that run and host your code how to behave, and why, and in what way, and of course the other building blocks like conditionals, if/else and ternary operators, what the DOM is, what the Call Stack is, how and why those do what they do, and how to change it, and what you can and can’t change, and why.
Lastly, the game has changed dramatically, very quickly for developers today, with the emergence of AI. AI Chat assistants are ENORMOUSLY helpful, and you should definitely check them out. Kirupa, the AI of this site, will be glad (I’m sure, hi Kirupa!) to help you learn about those options if you need guidance, but for learning the basics, it’s like talking to a living encyclopedia, that you can ask your very specific questions in your very specific context, and get an accurate answer most the time, and a somewhat accurate answer, or an outdated question, some of the time. But it’s the same as talking with a human. IT’s not that their advice is infallible, you still need to think and check, and verify, but it’s so much faster and efficient. I’ve learned so much from, and enjoy discussing tech with Claude, and Gemini, and ChatGPT and Mixtral, etc. every day. You can integrate them right into your IDE with like vsCode, there’s a ton of extensions, some free, others premium, but that will help you enormously. If you want to find something professional to teach you, Udemy has a ton of great resources, tons of videos about all kinds of things for JS, as well as Python, and all the languages. Codecademy has a very hands on, very direct style. It’s very helpful, but it’s also frustrating at times. Scrimba has a great program, as well as Coursera, YouTube videos, here on Kirupa, and lots more. event listeners, functions, and how to call and attach those things, will get you really far in basic JS. The other stuff will pick up as you use them over time.
Best of luck! And happy coding,
Jer
