What is a "website", after all?
Published: 2020-12-08 11:50:35

When landing as a **web developer** in 2020, it's god damn easy to get ahead of ourselves. Many tutorials or even new-wave schools go straight in-depth with *framework* concepts or *language* skills; but the very basic theory behind web technologies is often skipped or misunderstood.

That theory though, appears to me as a fundamental skill. Not only to **understand** what we're actually doing, but also to be able to **deepen**, **learn** way faster, and **optimize** further the code we're typing everyday.

In this unique point of view, we'll first unzoom to the concepts, then rezoom back with a better knowlegde. Let's get it started !

Disclaimer: shortcuts and imprecisions are taken here, the aim is to popularize the concepts. Feel free to correct though 🙂

------

The less opiniated *TL;DR;* of a website I can think of is 

> a **collection of web pages**, reachable through a **web browser**, most commonly exposed publicly on **HTTP URLs**.

We'll comeback to this later. For now it leads us to 3 more questions :

## What is a web page ?

From the user perspective, a web-page is kind of a **document** viewed in a web browser, presenting some kind of data.

Technically, it starts with an _**HTML** document_ containing rich **data** — HTML is a declarative markup language.

The document also declares some **metadatas**, including technical "links" to 2 other kind of documents :
- The **CSS** declaring *styles* to apply to the HTML markup
- and the **Javascript** which is a scripting language that *manipulates* the HTML markup.

From the browser perspective, roughly this whole thing is a web page (we'll come back to the browser in a second).

![Web page](https://dev-to-uploads.s3.amazonaws.com/i/rhb4wqs1s2c8lph606z7.png)

## What is HTTP ?

HTTP is a *transfer protocol*. Simply put, it means a **pipe** between **two entities**. More precisely, it's a (textual) **convention** (over some low-level protocols) that organise **data exchange** between them.

The protocol involves a **request** and a **response**, and in the case of websites; the entities we talk about are a **client** and a **server**.

![HTTP, client and server](https://dev-to-uploads.s3.amazonaws.com/i/reev5x1daj9gu4kfczua.png)

Here is what an **HTTP request** looks like.
```
GET / HTTP/1.1
Host: www.cyril-chpn.fr
```

And the according **HTTP response**.
```
HTTP/1.1 200 OK
Content-Type: text/html

<html>Some HTML</html>
```

## What is a web browser ?

Well. That's a both simple and hardcore part 😅

Conceptually — we'll stick to this for now, a web browser is just an executable software installed on a computer. It is capable of the 2 things required to **browse** the web :

Act as **a client** for *HTTP* protocol. It means communicating through HTTP with a server. It involves host resolution to IP, URL parsing, HTTP encoding / decoding, and much more stuff.

Act as **an interpreter** for *HTML + CSS + JS*. It means being able to understand every bit of code on the three of those languages, and visually present web pages accordingly.

![Browser request explained](https://dev-to-uploads.s3.amazonaws.com/i/5njk5ebgsg78ceay2k0t.png)

## Wrapping up

Let's summarize and wrap-up what we've seen here.

A **webpage** is compound of HTML + CSS + JS code, respectively presenting the content, styled, with interactions.

A **web browser** is a software able to interact with a server over HTTP, and visually interpret webpages.

A **website** is a collection of webpages available through HTTP, for a browser to access them.

![Website](https://dev-to-uploads.s3.amazonaws.com/i/m0hmxcgbhzkbmi2sikzz.png)

Now if you want to see it in action, be sure to check [my own website](https://www.cyril-chpn.fr) showing an example of this, as long as a presentation of me and what I do 😁

---------

Thanks for reading ❤️

Photo credits
- [Lee Campbell](https://unsplash.com/@leecampbell)