Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!
Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.
Hope you enjoy the instance!
Rules
Follow the wormhole through a path of communities !webdev@programming.dev
The Odin Project has a whole section dedicated to only front end js. But that might be a bit of overkill but they will cover everything you requested.
If you’re mainly interested in how communication between the front end and the backend works using JavaScript, I would look into rest APIs and the browser’s fetch API specifically.
not a course but a book Eloquent Javascript, especially chapters 13 to 19.
The Book is about plain JavaScript and a big chunk of it is about javascript in Websites.
I'm not totally sure if this is accurate but it sounds like you're wanting to learn front end dev basics?
If so, MDN might be a reasonable place to start. https://developer.mozilla.org/en-US/docs/Learn_web_development
MDN is great, especially for finding current best practice, but I've always found their material much more useful for reference once I'm already familiar with the general usage of whatever I'm trying to use. I often find it difficult to get to grips with something new just with MDN.
I usually go read W3Schools first. It's mostly a bit out of date, but not so much that it's useless, and I find the tutorials much easier to digest. Once I'm comfortable with the basics, I switch to MDN to get up to speed.
And OP, it sounds like you're already wary of this, but don't let yourself be tricked into using a hodge-podge of libraries for every little thing. A lot of JS programmers will tell you that you "need" some library or other to provide a function that you can often replicate with just two or three lines of raw JS, if you know what you're doing.
I think the JS library addiction stems from the bad old days of browser incompatibility, when almost everything had to be wrapped in layers of complex compatibility shims.
Honestly, if you're having trouble finding stuff for vanilla JS, I'd recommend looking at jQuery. Not that you should USE jQuery, necessarily, but the library is basically a giant wrapper around all the native JS APIs, so the approach to building stuff is essentially the same: it all focuses on tracking and manipulation of DOM elements.
I do vanilla JS (actually TypeScript) dev at work, daily, and that was my big takeaway from spearheding our team's migration from jQuery to vanilla TypeScript: I honestly don't know what benefit jQuery provides, over vanilla, because all the most-common jQuery APIs that we were using have a 1:1 native equivalent.
We do also use 2 third-party libraries alongside vanilla, so I'l mention those: require.js and rx.js. Require you probably don't need, with modern JS having bundling and module support built-in but we still use it for legacy reasons. But rx.js is a huge recommend, for me. Reactive programming is the IDEAL way to build GUIs, in my opinion.
Not a frontend dev but whenever I need to make something web, I just use Bootstrap. I believe that was the way to do web UIs after jQuery and before all the big frameworks.
So, maybe look into bootstrap guides? It's basically html+css+js with premade goodies (at least it was last time I had to do web stuff).
I did the front-end program on freecodecamp.org a bunch of years ago, it was decent. The challenging part about finding what you're looking for is that Javascript is used in both the front and back ends (and in a number of other places). Courses in JS will usually focus on backend (node.js is common), but it sounds like you're looking for a basic front-end course.
Also note that "integrating front end with back end" is complicated and depends largely on the backend itself. In the free code camp course, I did some calls to APIs from the frontend, which I think is what you're asking.
In any case, check out the Full Stack course on freecodecamp.org (specifically what you're asking about is covered in the "DOM Manipulation and Events" section).
jQuery
