HTML - STRUCTURE CSS - STYLING JS - DATA INTERACTION
When you browser the internet, you're viewing web documents (generally called webpages) and basically move from one to another.
Say, you open a browser and enter the address: google.com, you are redirected to the website google.com. Google is a search engine through which you can search texts (and even images). When you submit the query, you're presented with a webpage with a list of links that you can click and be redirected to it's location. Within that page, say you clicked on facebook.com, there are other links, media (images, videos) and so on. This is your typical browsing.
Underneath, a lot is going on. I'll attempt to break this down.
First off, most of the web is built around three foundational parts; HTML (HyperText Markup language), CSS (Cascading Style Sheets) and JS (JavaScript).
Define programming Define programming language
A webpage is mostly written in a programming language; HTML (HyperText Markup language). A .html file is a text file in which you use HTML syntax to structure web page elements. Such elements include; paragraphs, buttons, images, etc.
CSS (Cascading Style Sheets) is another language that is can be written within a .html file or in a separate file with the extension .css. CSS adds styling to a webpage's element. Do you want a button to be a specific color? Do you want the text center-aligned? CSS helps you do this.
On a high level, JS (JavaScript) interacts and modifies data on a web page.
Let's go deeper on JS (JavaScript), the third leg of this three-legged stool, that is the web.
Model: Document Object Model
A web page has two formats; as the HTML source or as a document-oriented format like when it's viewed through a web browser window. This second format is called the DOM (Document Object Model) format. It's the same document but when it is in DOM format, it can be modified by a scripting language like JS.
A browser is therefore a program capable of understanding the DOM. The DOM (Document Object Model) is a data representation of the objects that compromise the structure and content of a document on the web, like a webpage.
JS is a programming (scripting) language that you can used to modify the DOM, interact and modify data on the web. The DOM is not a language, but rather a web API that allows JS to access the documents and their elements.
Define API - Application Programming Interface - two or more programs/ systems Biology analogy - membrane <-> Contrast with UI - User interface WEB API -> program - browser <-> https://developer.mozilla.org/en-US/docs/Web/API
The internet is a network of devices. The web pages you're viewing are hosted in other servers on the internet. Collectively, all documents accessible via the internet are called the World Wide Web.
Model: OSI model
IP - internet protocol, is a protocol (a way of doing something) that defines how devices in the internet connect to one another.
Model: Client-Server model
Since these documents are transferred from their host servers to your browser, another protocol was invented to tell everyone how to do this transfer. Enter, HTTP - Hypertext Transfer protocol. Hyper comes from hyperlink, a "hyper" link is a type of link that connects two documents. Hence HTTP defines the rules of transfer for these linked documents.
https - secure http
Client-Server model:
- CLIENT (Frontend) - request => DATA (Headers, Request Methods)
- SERVER (Backend) - response => DATA (Headers, Status Response Codes)
HTTP Headers https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
- AUTH
- CACHING
- COOKIES
- CORS
HTTP Request Methods
- POST
- GET
- PUT
- DELETE
Backend systems do CRUD on data. CRUD - Create, Read, Update, Delete
HTTP Status Response Codes https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
Runs on the server
- Python
- JS (NodeJS)
- C
- Go
Runs on the client. No need of interacting w/ the server.
- HTML
- JS
- VBScript
- TypeScript
- Elm
- JQuery
- React
- Vue
- Angular
- Swift
React, Vue
- signal based reactivity
- reactivity is made possible by Virtual DOM
- devtools (you install them)
vite - great Dev-Ex
NuxtJS has built-in devtools