diff --git a/.vscode/markdown.code-snippets b/.vscode/markdown.code-snippets index ea039a6..a795786 100644 --- a/.vscode/markdown.code-snippets +++ b/.vscode/markdown.code-snippets @@ -49,6 +49,26 @@ ], "description": "TypeScript code block" }, + "html code block" : { + "scope": "markdown", + "prefix": "html", + "body": [ + "```html", + "$0", + "```" + ], + "description": "HTML code block" + }, + "css code block" : { + "scope": "markdown", + "prefix": "css", + "body": [ + "```css", + "$0", + "```" + ], + "description": "CSS code block" + }, "inline code" : { "scope": "markdown", "prefix": "c", diff --git a/1-web-introduction-slides.html b/1-web-introduction-slides.html new file mode 100644 index 0000000..77fe2d2 --- /dev/null +++ b/1-web-introduction-slides.html @@ -0,0 +1,317 @@ +1. Introduction to the Web
+

Introduction to the Web

+
+
+

Contents

+
    +
  1. Web and the Internet
    2. +
  2. Frontend and backend
    3. +
  3. Anatomy of a website
    4. +
  4. Web APIs
    5. +
+
+
+

Web and the Internet

+
+
+

What is the Internet?

+
+
+
    +
  • World Wide Web is not the Internet +
      +
    • Internet: connected networks that use the TCP/IP protocol +
        +
      • made out of billions of computers, cables and antennae directing data to the right direction
        • +
      +
      • +
    • World Wide Web: URL-based information system
      • +
    +
    • +
+
+
+

+
+
+
    +
  • WWW is a big part of the Internet but it consists of other kinds of traffic, too: +
      +
    • Email
      • +
    • VoIP (Skype, Discord, etc)
      • +
    • File transfer between computers (FTP)
      • +
    • remote connections to other computers
      • +
    +
    • +
  • In other words, the Internet is an infrastructure and WWW is served via it
    • +
+
+
+

What is the Web?

+
+
+
    +
  • World wide web (www) is the part of the Internet where browsers fetch and show websites
    • +
  • WWW makes sites and applications accessible to all kinds of devices: +
      +
    • mobile phones, computers, smart watches, TVs...
      • +
    • For the websites to appear on all the different devices similarly, strict rules are needed
      • +
    +
    • +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserEngine
ChromeBlink
EdgeBlink
FirefoxGecko
SafariWebKit
+
+
+
+
+

Frontend vs Backend

+
    +
  • Web development is split into frontend and backend
    • +
  • Frontend is the website users can actually see +
      +
    • Visual elements of a website or app the user can interact with
      • +
    +
    • +
  • Backend is the invisible part +
      +
    • "Server side" where user's data is stored
      • +
    • Backend is not interacted with directly, but gives and modifies its stored data based on user requests
      • +
    +
    • +
  • Full stack development refers to working on both backend and frontend!
    • +
+
+
+

What is a server or "the cloud"

+
+
+
    +
  • A server or "the cloud" is just another computer, or multiple ones +
      +
    • Server software is constantly running on it
      • +
    • Your own computer could be a server!
      • +
    +
    • +
  • If you need to save an image, post a comment on a news website, or just load a website, you send a request to a server
    • +
  • Server then gives an appropriate response based on the request
    • +
+
+
+

+
+
+
+
+

Backend

+
+
+
    +
  • Backend handles e.g., +
      +
    • saving and fetching user data from a database
      • +
    • user authentication and connecting multiple users together (chat apps!)
      • +
    +
    • +
  • Databases are used with query languages like SQL
    • +
  • Backend software can be written with various different programming languages +
      +
    • even with JavaScript! See: Express
      • +
    +
    • +
  • Simple websites don't require a dedicated backend
    • +
+
+
+

+
+
+
+
+

Anatomy of a website

+
+
+

Building blocks of a website

+
    +
  • Historically, websites looked something like this + +
    • +
  • Nowadays, a website can even be a full-blown application! + +
    • +
  • Old and new sites alike are written in HTML, which describes the structure of the site
    • +
  • In mid-90s, plain HTML was extended with CSS to implement styling
    • +
  • The third building block of a website is JavaScript, or JS, which is used to add interactivity
    • +
+
+
+

HTML

+
+
+ +
<body>
+<h1>This is a Heading</h1>
+<p>This is a paragraph.</p>
+</body>
+
+
+
+

+
+
+
+
+

CSS

+
+
+
    +
  • CSS stands for Cascading style sheets
    • +
  • CSS defines the look of the website
    • +
  • It tells the fonts, sizes, colors and locations of elements
    • +
  • Can be used to animate elements
    • +
+
body {
+  background-color: lightblue;
+}
+h1 {
+  color: white;
+  text-align: center;
+}
+p {
+  font-family: verdana;
+}
+
+
+ +
+
+
+

JavaScript

+
    +
  • With a dedicated programming language, JavaScript, your website can become interactive
    • +
  • It allows you to add functionality to buttons, send data to / fetch data from a server in real time
    • +
+
+
+

+
+
+

+
+
+
+
+

Web APIs

+
+
+

What is a Web API

+
    +
  • API (Application Programming Interface) defines a way of communicating between applications
    • +
  • A Web API defines how a client can communicate with a web server
    • +
  • With the help of APIs, you don't need to create all functionality yourself
    • +
  • Each program that wants to communicate to the outside world defines their own interface
    • +
  • There are some architectural models like REST (Representational State Transfer) that exist to generalize API design
    • +
+
+
+

Client-side and Server-side APIs

+
    +
  • Client-side APIs — called on the web browser (client side): +
      +
    • Browser APIs, built into the browser itself and extend its functionality +
        +
      • For instance, the geolocation API returns coordinates where the browser is located
        • +
      +
      • +
    • Third-party APIs, for retrieving data from somewhere on the Web
      • +
    +
    • +
  • Server-side APIs — called on the server: +
      +
    • For communicating between servers or the client
      • +
    • Consist of multiple exposed endpoints with a defined request-response system
      • +
    +
    • +
+
+
+

API communication

+
+

+
+
+
+

Third party APIs

+
    +
  • Many services have public APIs that anyone can use
    • +
  • Some services require users to have an API key
    • +
+
+

+
+
\ No newline at end of file diff --git a/1-web-introduction.md b/1-web-introduction.md new file mode 100644 index 0000000..221d2e2 --- /dev/null +++ b/1-web-introduction.md @@ -0,0 +1,252 @@ +--- +marp: true +paginate: true +math: mathjax +theme: buutti +title: 1. Introduction to the Web +--- + +# Introduction to the Web + + + + +## Contents + +1) Web and the Internet +2) Frontend and backend +3) Anatomy of a website +4) Web APIs + +## Web and the Internet + +### What is the Internet? + +
+
+ +* World Wide Web is not the Internet + * Internet: connected networks that use the TCP/IP protocol + * made out of billions of computers, cables and antennae directing data to the right direction + * World Wide Web: URL-based information system + +
+
+ +![](imgs/1-web-and-html_0.png) + +
+
+ +* WWW is a big part of the Internet but it consists of other kinds of traffic, too: + * Email + * VoIP (Skype, Discord, etc) + * File transfer between computers (FTP) + * remote connections to other computers +* In other words, the Internet is an infrastructure and WWW is served via it + +### What is the Web? + +
+
+ +* World wide web (www) is the part of the Internet where browsers fetch and show websites +* WWW makes sites and applications accessible to all kinds of devices: + * mobile phones, computers, smart watches, TVs... + * For the websites to appear on all the different devices similarly, strict rules are needed + +
+
+ +| | Browser | Engine | +|---------------------------------------------|---------------|---------| +| ![w:80](imgs/1-web-and-html_3.png) | **Chrome** | Blink | +| ![w:80](imgs/1-web-and-html_4.png) | **Edge** | Blink | +| ![w:80](imgs/1-web-and-html_1.png) | **Firefox** | Gecko | +| ![w:80](imgs/1-web-and-html_2.png) | **Safari** | WebKit | + +
+
+ +## Frontend vs Backend + +* Web development is split into [**_frontend_** and **_backend_**](https://en.wikipedia.org/wiki/Frontend_and_backend) +* Frontend is the website users can actually see + * Visual elements of a website or app the user can interact with +* Backend is the invisible part + * "Server side" where user's data is stored + * Backend is not interacted with directly, but gives and modifies its stored data based on user requests +* _**Full stack development**_ refers to working on both backend and frontend! + +### What is a server or "the cloud" + +
+
+ +* A server or "the cloud" is just another computer, or multiple ones + * Server software is constantly running on it + * Your own computer could be a server! +* If you need to save an image, post a comment on a news website, or just load a website, you send a **_request_** to a server +* Server then gives an appropriate **_response_** based on the request + +
+
+ +![](imgs/1-web-and-html_5.png) + +
+
+ +### Backend + +
+
+ +* Backend handles e.g., + * saving and fetching user data from a **_database_** + * user authentication and connecting multiple users together (chat apps!) +* Databases are used with _**query languages**_ like **_SQL_** +* Backend software can be written with various different programming languages + * even with JavaScript! See: [Express](https://expressjs.com/) +* Simple websites don't require a dedicated backend + +
+
+ +![](imgs/1-web-and-html_6.png) + +
+
+ +## Anatomy of a website + +### Building blocks of a website + +* Historically, websites looked something like this + * [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/) +* Nowadays, a website can even be a full-blown application! + * [https://open.spotify.com/](https://open.spotify.com/) +* Old and new sites alike are written in **_HTML_**, which describes the **_structure_** of the site +* In mid-90s, plain HTML was extended with **_CSS_** to implement **_styling_** +* The third building block of a website is JavaScript, or **_JS_**, which is used to add **_interactivity_** + +### HTML + +
+
+ +* HTML stands for **_Hypertext markup language_** +* HTML defines the structure of a website +* It tells what text, images and containers the website has +* You might have seen raw html if your browser has failed due to a slow connection $\Rightarrow$ +* [motherfuckingwebsite.com](https://motherfuckingwebsite.com/) +* http://catb.org/~esr/open-source.html + +```html + +

This is a Heading

+

This is a paragraph.

+ +``` + +
+
+ +![w:340](imgs/1-web-and-html_8.png) + +
+
+ +### CSS + +
+
+ +* CSS stands for **_Cascading style sheets_** +* CSS defines the ***look*** of the website +* It tells the fonts, sizes, colors and locations of elements +* Can be used to animate elements + +```css +body { + background-color: lightblue; +} +h1 { + color: white; + text-align: center; +} +p { + font-family: verdana; +} +``` + + +
+
+ +![](imgs/1-web-and-html_9.png) + +* [bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com/) +* https://www.emuurom.com/ + +
+
+ + + +### JavaScript + +* With a dedicated programming language, JavaScript, your website can become interactive +* It allows you to add functionality to buttons, send data to / fetch data from a server in real time + +
+
+ +![w:300](imgs/1-web-and-html_10.png) + +
+
+ +![w:350](imgs/1-web-and-html_11.png) + +
+
+ +## Web APIs + +### What is a Web API + +* ***API (Application Programming Interface)*** defines a way of communicating between applications +* A Web API defines how a client can communicate with a web server +* With the help of APIs, you don't need to create all functionality yourself +* Each program that wants to communicate to the outside world defines their own interface +* There are some architectural models like **_REST (Representational State Transfer)_** that exist to generalize API design + +### Client-side and Server-side APIs + +* [Client-side APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction) — called on the web browser (client side): + * Browser APIs, built into the browser itself and extend its functionality + * For instance, the geolocation API returns coordinates where the browser is located + * Third-party APIs, for retrieving data from somewhere on the Web +* Server-side APIs — called on the server: + * For communicating between servers or the client + * Consist of multiple exposed ***endpoints*** with a defined request-response system + +### API communication + +
+ +![w:800](imgs/web-apis.svg) + +
+ +## Third party APIs + +* Many services have public APIs that anyone can use +* Some services require users to have an [API key](https://en.wikipedia.org/wiki/API_key) + +
+ +![w:900](imgs/third-party-apis.svg) + +
\ No newline at end of file diff --git a/2-http-slides.html b/2-http-slides.html new file mode 100644 index 0000000..1c91053 --- /dev/null +++ b/2-http-slides.html @@ -0,0 +1,351 @@ +2. HTTP
+

HTTP

+
+
+

Contents

+
    +
  1. What is HTTP?
    2. +
  2. HTTP Requests
    3. +
  3. HTTP Responses
    4. +
  4. IP address and ports
    5. +
+
+
+

What is HTTP?

+
    +
  • HTTP (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other
    • +
  • The communication happens between a client (browser, application…) and a server +
      +
    • The client sends a request, and the server returns a response
      • +
    +
    • +
  • HTTP is connectionless: +
      +
    • The client and server are only aware of each other during the request-response phase
      • +
    • After that, each new request is sent through a new connection
      • +
    +
    • +
+
+
+

But what is TCP/IP?

+
    +
  • It is known as the Internet protocol suite
    • +
  • Framework used for organizing communication protocols over the Internet +
      +
    • TCP = Transmission Control Protocol +
        +
      • Controlled stream of bytes between applications communicating via an IP network
        • +
      +
      • +
    • IP = Internet Protocol +
        +
      • Delivering packets from host to destination with IP addresses
        • +
      +
      • +
    +
    • +
+
+
+

HTTP structure

+
+
+

+
+
+
    +
  • The HTTP protocol acts as a communication bus between the web client (e.g. web browser) and the web server
    • +
  • There can be multiple clients connected to the server simultaneously
    • +
  • The clients are not connected to each other but only to the server
    • +
+
+
+
+
+

HTTP requests

+
    +
  • HTTP defines a set of request methods
    • +
  • The most common requests are GET, POST, PUT and DELETE +
      +
    • These are needed to create a basic CRUD app (Create, Read, Update, Delete)
      • +
    +
    • +
  • More requests are listed in the mdn web docs
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTTP MethodUsageExample Use
GETRetrieve contentBrowser fetching a webpage
POSTAdd new dataSubmitting a form to create a new account
PUTUpdate existing dataUpdating user profile information
DELETERemove existing dataDeleting a user account
+
+
+

Note: URI vs URL

+
    +
  • The website address is more formally known as the URL (uniform resource locator) +
      +
    • https://maps.google.com
      • +
    • https://maps.google.com/maps?q=Oulu (includes a query)
      • +
    +
    • +
  • It is a subset of an URI (uniform resource identifier) +
      +
    • This identifies a resource on a webpage
      • +
    +
    • +
+
+
+

HTTP request format

+
    +
  • Request line: <request method> <request URI> +
      +
    • Example: GET https://example.com/products
      • +
    +
    • +
  • Headers (optional) +
      +
    • Example: Date: Mon, 07 Sep 2020 08:39:33 GMT
      • +
    • Example: Content-Type: application/json
      • +
    +
    • +
  • Body (optional) +
      +
    • Example in the JSON format:
      {
+  "date": "2020-09-08T11:39:34.2837813+03:00",
+  "temperatureC": 11,
+  "temperatureF": 51,
+  "summary": "Cool"
+}
+
      +
      • +
    +
    • +
+
+
+

HTTP request examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodURIHeadersBody
GEThttp://server.com/
GEThttp://server.com/10
POSThttp://server.com/usersContent-Type: application/json{"name": "Dan"}
PUThttp://server.com/users/2Content-Type: application/json{"name": "Danny"}
DELETEhttp://server.com/users/2
+
+
+

HTTP response format

+
    +
  • HTTP responses have the following format: +
      +
    • Status line: <HTTP version> <status code> <reason phrase> +
        +
      • Example:HTTP/1.1 200 OK
        • +
      +
      • +
    • Headers (optional) +
        +
      • Date: Mon, 07 Sep 2020 08:39:33 GMT
        • +
      • Content-Type: application/json
        • +
      +
      • +
    • Body (optional)
      {
+  "date": "2020-09-08T11:39:34.2837813+03:00",
+  "temperatureC": 11,
+  "temperatureF": 51,
+  "summary": "Cool"
+}
+
      +
      • +
    +
    • +
+
+
+

HTTP status codes

+
    +
  • The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request: +
      +
    • Did the operation succeed? (2xx status codes)
      • +
    • Was there an error with the request? (4xx status codes) +
        +
      • E.g., the request line was malformed, or the server doesn't support it
        • +
      +
      • +
    • Did a server-side exception occur? (5xx status codes) +
        +
      • This is never the client's fault!
        • +
      +
      • +
    +
    • +
+
+
+

Status codes for a CRUD app

+
    +
  • Your APIs should use the following status codes for responses to CRUD operations
    • +
  • See Restfulapi.net and Wikipedia HTTP status code listings
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
2xx SUCCESS4xx CLIENT ERROR5xx SERVER ERROR
200 - OK400 - Bad Request500 - Internal Server Error
201 - Created401 - Unauthorized
204 - No Content403 - Forbidden
404 - Not Found
409 - Conflict
+
+
+

IP and ports

+
+
+

IP addresses

+
    +
  • Every node, or host on a computer network needs an IP (Internet Protocol) address +
      +
    • These can be public or private
      • +
    • Serves two functions: identifies and provides the location of the host
      • +
    +
    • +
  • The old 32-bit IPv4 addresses are of the form 192.0.2.1
    • +
  • The 128-bit IPv6 addresses are of the form 2001:0db8:0000:0000:0000:8a2e:0370:7334 (can be shortened to 2001:db8::8a2e:370:7334)
    • +
+
+
+

Port numbers

+ +
    +
  • The IP address is often followed by a port number separated by a colon: 192.0.2.1:8080
    • +
  • The port number (16-bit unsigned integer) defines the port through which communication to your application happens
    • +
  • Ports allow multiple applications to be located on the same host
    • +
  • The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate
    • +
  • Computers have several different ports at their disposal
    • +
+
+
+

Reserved ports

+
+
+
    +
  • Some of them are reserved and your application might not be able to assign those ports to itself
    • +
  • Ports from 0 to 1023 are system ports +
      +
    • There are restrictions in manually assigning applications to use them
      • +
    +
    • +
  • Generally, ports from 1024 to 65535 are available for the user to assign for applications
    • +
+
+
+

+
+
+
+

Note: older version in the backend-basics repo

\ No newline at end of file diff --git a/2-http.md b/2-http.md new file mode 100644 index 0000000..d5a1dca --- /dev/null +++ b/2-http.md @@ -0,0 +1,185 @@ +--- +marp: true +paginate: true +math: mathjax +theme: buutti +title: 2. HTTP +--- + +# HTTP + + + + +## Contents + +1) What is HTTP? +2) HTTP Requests +3) HTTP Responses +4) IP address and ports + + +## What is HTTP? + +* **_HTTP_** (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other +* The communication happens between a client (browser, application…) and a server + * The client sends a **_request_**, and the server returns a **_response_** +* HTTP is *__connectionless__*: + * The client and server are only aware of each other during the request-response phase + * After that, each new request is sent through a new connection + +### But what is TCP/IP? + +* It is known as the [Internet protocol suite](https://en.wikipedia.org/wiki/Internet_protocol_suite) +* Framework used for organizing communication protocols over the Internet + * TCP = Transmission Control Protocol + * Controlled stream of bytes between applications communicating via an IP network + * IP = Internet Protocol + * Delivering packets from host to destination with IP addresses + +### HTTP structure + +
+
+ +![w:700](imgs/http-protocol.svg) + +
+
+ +* The HTTP protocol acts as a communication bus between the web client (e.g. web browser) and the web server +* There can be multiple clients connected to the server simultaneously +* The clients are not connected to each other but only to the server + +
+
+ +## HTTP requests + +* HTTP defines a set of request methods +* The most common requests are `GET`, `POST`, `PUT` and `DELETE` + * These are needed to create a basic CRUD app *(Create, Read, Update, Delete)* +* More requests are listed in the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods) + +| HTTP Method | Usage | Example Use | +|-------------|:---------------------|:------------------------------------------| +| `GET` | Retrieve content | Browser fetching a webpage | +| `POST` | Add new data | Submitting a form to create a new account | +| `PUT` | Update existing data | Updating user profile information | +| `DELETE` | Remove existing data | Deleting a user account | + +### Note: URI vs URL + +* The website address is more formally known as the ***URL (uniform resource locator)*** + * `https://maps.google.com` + * `https://maps.google.com/maps?q=Oulu` (includes a ***query***) +* It is a subset of an ***URI (uniform resource identifier)*** + * This identifies a resource on a webpage + +### HTTP request format + +* Request line: ` ` + * Example: `GET https://example.com/products` +* Headers (optional) + * Example: `Date: Mon, 07 Sep 2020 08:39:33 GMT` + * Example: `Content-Type: application/json` +* Body (optional) + * Example in the JSON format: + ```json + { + "date": "2020-09-08T11:39:34.2837813+03:00", + "temperatureC": 11, + "temperatureF": 51, + "summary": "Cool" + } + ``` + +### HTTP request examples + +| Method | URI | Headers | Body | +|:---------|:--------------------------------|:---------------------------------|:--------------------| +| `GET` | `http://server.com/` | | | +| `GET` | `http://server.com/10` | | | +| `POST` | `http://server.com/users` | `Content-Type: application/json` | `{"name": "Dan"}` | +| `PUT` | `http://server.com/users/2` | `Content-Type: application/json` | `{"name": "Danny"}` | +| `DELETE` | `http://server.com/users/2` | | | + + +## HTTP response format + +* HTTP responses have the following format: + * Status line: ` ` + * Example:`HTTP/1.1 200 OK` + * Headers (optional) + * `Date: Mon, 07 Sep 2020 08:39:33 GMT` + * `Content-Type: application/json` + * Body (optional) + ```json + { + "date": "2020-09-08T11:39:34.2837813+03:00", + "temperatureC": 11, + "temperatureF": 51, + "summary": "Cool" + } + ``` + +### HTTP status codes + +* The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request: + * Did the operation succeed? (`2xx` status codes) + * Was there an error with the request? (`4xx` status codes) + * E.g., the request line was malformed, or the server doesn't support it + * Did a server-side exception occur? (`5xx` status codes) + * This is never the client's fault! + +### Status codes for a CRUD app + +* Your APIs should use the following status codes for responses to CRUD operations +* See [Restfulapi.net](https://restfulapi.net/http-status-codes/) and [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) HTTP status code listings + +| `2xx SUCCESS` | `4xx CLIENT ERROR` | `5xx SERVER ERROR` | +|:-------------------|:---------------------|:------------------------------| +| `200 - OK` | `400 - Bad Request` | `500 - Internal Server Error` | +| `201 - Created` | `401 - Unauthorized` | | +| `204 - No Content` | `403 - Forbidden` | | +| | `404 - Not Found` | | +| | `409 - Conflict` | | + +## IP and ports + +### IP addresses + +* Every node, or ***host*** on a computer network needs an IP (Internet Protocol) address + * These can be public or private + * Serves two functions: identifies and provides the location of the host +* The old 32-bit IPv4 addresses are of the form `192.0.2.1` +* The 128-bit IPv6 addresses are of the form `2001:0db8:0000:0000:0000:8a2e:0370:7334` (can be shortened to `2001:db8::8a2e:370:7334`) + +### Port numbers + + + +* The IP address is often followed by a ***port*** number separated by a colon: `192.0.2.1:8080` +* The port number (16-bit unsigned integer) defines the port through which communication to your application happens +* Ports allow multiple applications to be located on the same host +* The client connects to this port in some server (defined by an IP address), so the client and the server are able to communicate +* Computers have several different ports at their disposal + +### Reserved ports + +
+
+ +* Some of them are reserved and your application might not be able to assign those ports to itself +* Ports from 0 to 1023 are ***system ports*** + * There are restrictions in manually assigning applications to use them +* Generally, ports from 1024 to 65535 are available for the user to assign for applications + +
+
+ +![](imgs/1-introduction-to-the-internet_1.png) + +
+
+ diff --git a/1-web-and-html.md b/3-html.md similarity index 68% rename from 1-web-and-html.md rename to 3-html.md index 1b7fe62..33aaf90 100644 --- a/1-web-and-html.md +++ b/3-html.md @@ -1,158 +1,3 @@ -# Web & HTML - -1. Websites and The Internet - -A short overview of the Internet and WWW - -Anatomy of a website (or web app) - -HTML, CSS, JS - -2. HTML basics - -Setting up - -tags: p, h1, img src, a href, div - -boilerplate - -3. Chrome Dev Tools - -4. HTML continued - -Title, span, text-align, br.. - -User input - -Tables - -5. CSS basics - -Websites and the Internet - -# A short overview of the Internet and WWW - -© Buutti Oy, All Rights Reserved - -# What is the Internet? - -* Web != the Internet -* Internet: connected networks that use the TCP/IP protocol - * made out of billions of computers, cables and antennae directing data to the right direction. -* World Wide Web: URL-based information system. - * a big part of the Internet but it consists of other kinds of traffic, too: - * Email - * VoIP (Skype/Teamspeak) - * File transfers between computers - * remote connections to other computers -* In other words, the internet is an infrastructure and WWW -* is served via it - -![](imgs/1-web-and-html_0.png) - -# What is the Web? - -* World wide web (www) is the part of the Internet where browsers fetch and show websites - * Browsers ( _rendering engine_ in parentheses) - * Chrome (Blink) - * Firefox (Gecko) - * Edge (Blink) - * Safari (WebKit) -* WWW makes sites and applications accessible to all kinds of devices: - * mobile phones, computers, smart watches, TVs... - * For the websites to appear on all the different devices similarly, we need strict rules - -![](imgs/1-web-and-html_1.png) - -![](imgs/1-web-and-html_2.png) - -![](imgs/1-web-and-html_3.png) - -![](imgs/1-web-and-html_4.png) - -# Back-end vs Front-end - -* Web development is split into _Back-end_ and _Front-end_ -* Front-end is the website users can actually see - * visual elements of a website or app the user can interact with -* Back-end is the invisible part - * "server side" where user's data is stored - * back-end is not interacted with directly, but gives and modifies its stored data based on user requests -* _Full stack development_ refers to working on both back-end and front-end! - -# What is a server or "the Cloud" - -* A Server or "the cloud" is just another computer - * server software is constantly running - * Your own computer could be a server! -* If you need to save an image, post a comment on a news website, or just load a website, you send a _request _ to a server -* Server then gives an appropriate _response_ based on the request - -![](imgs/1-web-and-html_5.png) - -# Backend - -![](imgs/1-web-and-html_6.png) - -* Backend handles e.g., - * saving and fetching user data from a _database_ - * user authentication and connecting multiple users together (chat apps!) -* Databases are used with _query languages_ like _SQL_ -* Back-end software can be written with various different programming languages - * even with JavaScript! See: [Express](https://expressjs.com/) -* Simple websites don't require a dedicated back-end - -![](imgs/1-web-and-html_7.png) - -# Anatomy of a website -HTML, CSS and JS - -# Anatomy of a website - -* Historically, websites looked something like this - * [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/) -* Nowadays, a website can even be a full-blown application! - * [https://open.spotify.com/](https://open.spotify.com/) -* old and new sites alike are written in _HTML_ __, __ which describes the _structure _ of the site -* In mid-90s, plain HTML was extended with _CSS_ _ _ to implement _styling_ -* The third building block of a website is JavaScript, or _JS,_ which is used to add _interactivity_ - -# HTML - -![](imgs/1-web-and-html_8.png) - -HTML stands for _Hypertext markup language_ - -HTML defines the structure of a website - -It tells what text, images and containers the website has - -You might have seen raw html if your browser has failed due to a slow connection -> - -[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/) - -# CSS - -CSS stands for _Cascading style sheets_ - -CSS defines the __look __ of the website - -It tells what sizes, colors and where everything is - -[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/) - -![](imgs/1-web-and-html_9.png) - -# JavaScript - -With a dedicated programming language, JavaScript, your website can become interactive - -It allows you to do computations, send data to a server or fetch new data in real time - -![](imgs/1-web-and-html_10.png) - -![](imgs/1-web-and-html_11.png) - # HTML basics # Setting up diff --git a/2-css.md b/4-css.md similarity index 100% rename from 2-css.md rename to 4-css.md diff --git a/3-bootstrap.md b/5-bootstrap.md similarity index 100% rename from 3-bootstrap.md rename to 5-bootstrap.md diff --git a/4-js-in-html-and-dom.md b/6-js-in-html-and-dom.md similarity index 100% rename from 4-js-in-html-and-dom.md rename to 6-js-in-html-and-dom.md diff --git a/imgs/1-introduction-to-the-internet_1.png b/imgs/1-introduction-to-the-internet_1.png new file mode 100644 index 0000000..a710d49 Binary files /dev/null and b/imgs/1-introduction-to-the-internet_1.png differ diff --git a/imgs/http-protocol.svg b/imgs/http-protocol.svg new file mode 100644 index 0000000..cb25a3b --- /dev/null +++ b/imgs/http-protocol.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + Web Client + + + + + + + + + + + + Web Client + + + + + + + + + + + + Web Client + + + + + + + + + + + + + + + + + + + + + + + + HTTP Protocol + + + Server + side + script + + + + + + + + + Web Server + + + + + + + + + + + + Database + + + + + diff --git a/imgs/third-party-apis.svg b/imgs/third-party-apis.svg new file mode 100644 index 0000000..ca303c5 --- /dev/null +++ b/imgs/third-party-apis.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + Application 1 + (User) + + + + + + Receive data + + + Send request + + + + + + + + + + + + + + + + + + + + + API + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/web-apis.svg b/imgs/web-apis.svg new file mode 100644 index 0000000..1d6d947 --- /dev/null +++ b/imgs/web-apis.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + Application 1 + (User) + + + + + + + + + + + + Application 1 + (User) + + + + + + + + + + + + Application 1 + (User) + + + + + + Send request + + + Receive data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + API + + + + + + + + + + + + Application + + + + +