I want to learn web programming. Mostly because I will have the full stack to express myself starting from the UI to the functionality (backend).<p>But, I don't want to start with frameworks. I want to learn vanilla HTML, CS, JS. Frameworks hide many things. I know the DOM is a structured form of data. I want full control through vanilla JS to manipulate and bend that structure at my will.<p>Where to learn that from? Also I believe learning in this way will give me more understanding about JS frameworks when I study their source code.
Any post or article where the author is like "Let's build a React" may emphasize vanilla JS. For example,<p><i>HEX: a No-Framework Approach to Building Modern Web Apps</i> (2017)<p><a href="https://medium.com/@metapgmr/hex-a-no-framework-approach-to-building-modern-web-apps-e43f74190b9c" rel="nofollow noreferrer">https://medium.com/@metapgmr/hex-a-no-framework-approach-to-...</a><p>Manning has <i>Build a Web Framework (From Scratch)</i> in its Manning Early Access Program (MEAP):<p><a href="https://www.manning.com/books/build-a-frontend-web-framework-from-scratch" rel="nofollow noreferrer">https://www.manning.com/books/build-a-frontend-web-framework...</a><p>Web Components are a neat way to have <custom-tag /> stuff controlled by CSS. But you can forego that and use (BEM-named) values in class attributes.<p>Even just `document.querySelector` and `.querySelectorAll` gives some idea of vanilla JS. There's also (tongue-in-cheek)<p><a href="http://vanilla-js.com/" rel="nofollow noreferrer">http://vanilla-js.com/</a><p>This book for writing Javascript may still be relevant:<p><i>Reliable Javascript: How to Code Safely in the World's Most Dangerous Language</i> (2015)<p>Hmm, code samples are no longer easily available. I would love to share it if Wrox Press (formerly) were cool with it.<p>And then there's places like Mozilla Developer Network (MDN):<p><a href="https://developer.mozilla.org/en-US/" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/</a><p>You mentioned backend. With just Node.js, you're technically running vanilla JS there too.
I've tried every shortcut possible only to realize the long way is the short way.<p>Sign up to a Udemy web-development bootcamp. Take it class by class by class. It won't necessarily be quick. Some things won't work, because things will have changed since the bootcamp was recorded - that's practice onto itself in how to fix things - and the Q&As on Udemy courses are very good for that.
Afterwards, sign up to an intermediate course that actually builds a project in a given framework. It doesn't matter which, because once you know one, it's a lot easier to contextualize a different one. Anyhow, the framework doesn't matter, at least not for the first year or two; being able to create and ship something does.
Your plan is solid, but I find your question a bit silly. It doesn't really matter where you learn these things. Just google it and click on the first page that isn't trying to sell you something.
HTML, CSS and at least the basics of JS can be learned for free from codeacademy. Once you have those, code a website for yourself so you get how they work. Shouldn't take more than a week to finish this if you're dedicated.