The WEB

README.md

README

• README
  • The Web, explained
    • Web pages
      • HTML - elements and attributes
      • CSS - Box model
    • Browser
      • JS - syntax, Web API
  • Other Web elements and their protocols
    • IP
    • HTTP
  • Languages
    • Server-side languages
    • Client-side languages
    • JS
      • JS frameworks

HTML - STRUCTURE CSS - STYLING JS - DATA INTERACTION

The Web, explained

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.

Web pages

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

HTML - elements and attributes

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 - Box model

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.

Browser

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 - syntax, Web API

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

Other Web elements and their protocols

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.

IP

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.

HTTP

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

Languages

Server-side languages

Runs on the server

• Python
• JS (NodeJS)
• C
• Go

Client-side languages

Runs on the client. No need of interacting w/ the server.

• HTML
• JS
• VBScript
• TypeScript
• Elm
• JQuery
• React
• Vue
• Angular
• Swift

JS

JS frameworks

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <title>Document</title>
</head>
<body>
    <h1>Stan's page</h1>
    <img src="https://md.engineer/stan.png" alt="">
    <label>
        <input type="checkbox" />
        My awesome feature
    </label>
</body>
<script>
    console.log("Stan's page")
</script>
</html>

styles.css

img {
    width: 200px;
}