webdev-basics/1-web-introduction.md

---
marp: true
paginate: true
math: mathjax
theme: buutti
title: 1. Introduction to the Web
---

# Introduction to the Web

<!-- headingDivider: 5 -->
<!-- class: invert -->

## 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?

<div class='columns' style='grid-template-columns: 4fr 1fr;' markdown='1'>
<div markdown='1'>

* 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

</div>
<div markdown='1'>

![](imgs/1-web-and-html_0.png)

</div>
</div>

* 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?

<div class='columns21' markdown='1'>
<div markdown='1'>

* 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

</div>
<div markdown='1'>

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

</div>
</div>

## 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"

<div class='columns32' markdown='1'>
<div markdown='1'>

* 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

</div>
<div markdown='1'>

![](imgs/1-web-and-html_5.png)

</div>
</div>

### Backend

<div class='columns21' markdown='1'>
<div markdown='1'>

* 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

</div>
<div markdown='1'>

![](imgs/1-web-and-html_6.png)

</div>
</div>

## 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

<div class='columns32' markdown='1'>
<div markdown='1'>

* 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
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
```

</div>
<div markdown='1'>

![w:340](imgs/1-web-and-html_8.png)

</div>
</div>

### CSS

<div class='columns' markdown='1'>
<div markdown='1'>

* 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;
}
```

</div>
<div markdown='1'>

![](imgs/1-web-and-html_9.png)

* [bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com/)
* https://www.emuurom.com/
  
</div>
</div>

### 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

<div class='columns' markdown='1'>
<div markdown='1' class='centered'>

![w:300](imgs/1-web-and-html_10.png)

</div>
<div markdown='1' class='centered'>

![w:350](imgs/1-web-and-html_11.png)

</div>
</div>

## 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

<div class='centered'>

![w:800](imgs/web-apis.svg)

</div>

## 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)
* [JSON placeholder API](https://jsonplaceholder.typicode.com/)

<div class='centered'>

![w:900](imgs/third-party-apis.svg)

</div>