You: “May I use a framework such as React or Vue for this prompt?”
This tongue-in-cheek website is a humorous repackaging of vanilla JS into a sleek new framework. Developers love shiny new frameworks, and truthfully if vanilla JS was sentient and had any interest in "rebranding itself" this would be an excellent strategy.
If you have coding experience, especially web development experience, odds are the following tutorial will be way too slow for you. No quick tricks here; this is more of a methodical walkthrough for absolute beginners to DOM manipulation trying to learn basics.
You also need to have a code editor installed or some sort of development environment that you have some competence with; my weapon of choice is VSC (Visual Studio Code), but any code editor will do the trick.
The focus in this tutorial will be JS (obviously), so we will be doing all of our coding in a SINGLE JS file; no HTML or CSS at all!*
*…Except for a boilerplate HTML with a script tag linking to our JS file.
I know, I lied, but this HTML file is really only to make the browser happy. Browsers like HTML code, and even though we humans are reading this article to learn to make HTML with JS, web browsers don’t have the same willingness to learn as you do. So, kudos to you for being a better student than your browser!
There will be opportunities throughout the tutorial for you to code along. You really should do this; have a file open in your text editor of choice and code along. It will help reinforce the knowledge, trust me (or don’t trust me and code along anyway).
Thanks for bearing with me through the [admittedly somewhat boring] details and background. It is important to make sure you are at the right starting point so you will understand the content. Not understanding this stuff now will lead to you having a bad time when things get more complex (and they will DEFINITELY get more complex).
In the following article, our vanilla JS tutorial begins!
Attributions: Panic reaction (sweating) GIF by Billy Budgen, linked from giphy.com