published
updated
https://fullstackopen.com/en/part0/fundamentals_of_web_apps
- HTML
- CSS
- Javascript
HTML has a tree like structure, it defines "everything" about the webpage. The tree like structure allows us to query elements of the documents quicker.
CSS is used to style the elements of the document that is outlined in the HTML
Javascript is the runtime that allows us to modify the webpage. It comes with an extensive API, also known as the browser which allows us to query and modify the HTML document, along with many other things. Javascript generally works on the basis of Callbacks due to it's asynchronous nature. Callbacks are just a fancy way of saying, the function gets called on event changes. For example, we can make a request, attach a callback to it on eventChange or whatever, and then check the status of our event, and then execute some code. Perhaps we're making a web request for some JSON data, and once we've successfully concluded the request, we can parse that data, and add it to the HTML page at a specific element.
The DOM or Document Object Model, is an API for the document we're currently using. It allows us to query HTML and make programmatic changes to the elements of the tree that makes up HTML.
SPA or Single Page Architecture is "modern" approach to building websites. Instead of each page being requested from the server, a single page loads a bunch of javascript and that changes the rest of the page as you interact with it. An older approach would simply post changes to the server, and request the page be reloaded. An SPA would prevent that, add our data to our current HTML page, and then also let the server know that hey, this is some new data for you to keep.
There are many ways to build applications and front-ends with Javascript. I'm currently learning about React. Web Components are another way I've also been learning.