How the internet works from scratch for Front end beginners
Tags: webdev, beginners, frontend
Published: 2023-08-11 14:42:23

Being a **Front End developer** is **exciting**, but what **internet concepts** are crucial for you to understand?

In this article, you'll explore significant **internet concepts**, such as **how the internet works**, **the devices used**, and more…

To begin, let's illustrate these concepts through a story. Picture two individuals, **Amy** and **Ben**. Amy, a **software developer**, has designed a website. This website requires storage on an **internet server**. Hence, she opts to host it with the **Vercel** company.

> Generally, to enable user access, a website must be hosted on a **server**.

Ben aspires to access Amy's website. But where is it located? Ben reaches out to Amy, inquiring about the **URL (Uniform Resource Locator)** for the website. She responds: **amywebsite.com.br**. This URL functions as the website's name. For instance, my name is **Arthur Assuncao**. With my name, you can locate me on Earth. However, you might ponder: "Sure, I know your name, but where do you reside?" Precisely, how would you determine my address? You'd need a list correlating names and addresses. Similarly, the internet operates.

To access Amy's website, Ben uses an **internet browser** like **Google Chrome**. He enters **amywebsite.com.br** and hits Enter. Yet, **amywebsite.com.br** is merely a name. As we've learned, locating someone by name is complex. So, how does the browser find Amy's website?

The **Domain Name System (DNS)** holds the key.

When Ben seeks Amy's website, the browser contacts a **DNS Server**. This server, in simple terms, maintains a list matching names and **IPs (Internet Protocol addresses)**.

> An IP serves as a **device address**.

The browser identifies the name (**amywebsite.com.br**) and retrieves the related IP. Subsequently, the browser employs the IP to access Amy's website. This process is depicted in **Figure 1**.

![Figure 1.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yjvhyzkjaaqvzhdpq8x.png)

## A Closer Look

Now that we've grasped the basics of internet functioning, let's delve deeper. Refer to **Figure 2**, illustrating a mind map showcasing the internet's operation. We'll leverage this map to elucidate all the concepts.

![Figure 2. Mind map - how the internet works.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c80d8yxnjlmozsferl1.png)

We'll commence with the **Web** term presented in **Figure 2**. The Web encompasses the entire internet. Visualize it as an expansive spider web where each intersection signifies a device. The map features a world map overlaid with internet cables from [SubmarineCableMap.com](SubmarineCableMap.com). Countless submarine cables traverse the globe, interconnecting countries. Can you fathom the repercussions of a cable rupture?

> Contemplate that the internet consists of myriad devices, including computers, mobile phones, smart devices, etc., interconnected with each other.

Each intersection on the map is a **Node**. A network node acts as an endpoint, receiving, generating, storing, and transmitting data. Some nodes function as **Routers**, forwarding network data (packages) from one side to another.

Drawing an analogy, think of the internet as your home, with routers connecting devices such as computers, smartphones (cell phones), and IoT devices (e.g., smartwatches, virtual assistants like Alexa Echo Dot, smart LED light bulbs). However, the internet boasts millions of routers and devices.

Nodes can also serve as **Servers** and **Clients**. Servers disseminate data to clients, which retrieve data from servers, forming the **Client-Server architecture** depicted in **Figure 3**. Here, multiple clients request and receive services from servers.

![Figure 3. Client-server architecture.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76tnza81z5cn6nf6qh44.png)

Where are these servers on the internet? Analogous to your home's address (e.g., 204 Deptford High St or zip/postal code SE8 3PR), servers bear **Internet Protocol (IP) Addresses**—typically, four binary numbers, each with eight digits. In decimal, each number ranges from 0 to 255, or in binary, from 00000000 to 11111111. For instance, one of Facebook's IPs is 31.13.74.35. If binary-to-decimal conversion seems puzzling, consult **ChatGPT** or search online.

> To unearth a website's IP, execute this command in a Linux terminal:
> ```sh
> dig thewebsite.com
> ```

Servers host services like **Sites and Web systems**—YouTube, blogs, cloud services, databases, and more. Each service employs a **Protocol** dictating message transmission. Prominent internet protocols include **HyperText Transfer Protocol (HTTP)** and **HyperText Transfer Protocol Secure (HTTPS)**. The latter emphasizes end-to-end security via SSL (Secure Sockets Layer) or TLS (Transport Layer Security) encryption.

Furthermore, web services/sites generally possess a **URL (Uniform Resource Locator)**. This human-readable internet address (e.g., [https://www.arthurassuncao.com/posts/aprenda-a-usar-o-github-para-aumentar-suas-oportunidades-profissionais-440j](https://www.arthurassuncao.com/posts/aprenda-a-usar-o-github-para-aumentar-suas-oportunidades-profissionais-440j)) operates similarly to your address and identification number (CPF in Brazil). People primarily use names, just as websites use URLs for simplicity.

# Understanding URLs and DNS in Internet Architecture

A **URL** consists of up to six components, as depicted in **Figure 4**:

- **Protocol / Scheme**: Defines how messages are sent and received.
- **Subdomain (optional)**: Part of the main domain. Imagine a building with multiple apartments, each acting as a subdomain. Similarly, it can represent departments in a company.
- **Second-level domain**: Primary domain part, like **arthurassuncao**.
- **Top-level domain (TLD)**: Final segment of a domain name. It corresponds to the highest level in the hierarchical **Domain Name System (DNS)**, following the root domain. Examples include .com, .com.br, .dev, etc.
- **Sub-directory (optional)**: Sub-directory within the domain.
- **Slug or Page (optional)**: Page or endpoint name.

The second-level domain and top-level domain jointly form the website domain. This domain is more user-friendly than an **IP Address**. Converting a domain to an IP Address requires a designated server—the **DNS (Domain Name System)** server.

![Figure 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zn02usjlqvezmjo94aq.png)

Before delving into DNS, let's revisit **Clients** in **Figure 2**. Currently, **Clients** encompass computers, smartphones, IoT devices, and other user devices. These devices access websites and services through **browsers** such as Google Chrome, Microsoft Edge, and Mozilla Firefox. But how do they achieve this using domain names instead of IP addresses?

Picture a world where each website's IP Address must be memorized—impractical, right? Instead, you memorize domains, e.g., **arthurassuncao.com**. Credit the **DNS Server** for this convenience. In essence, this server stores domain names (e.g., arthurassuncao.com or facebook.com) alongside their respective IP Addresses.

When a user accesses a website by its domain, the client device must learn the domain's IP Address. Within the device, a table stores **Accessed Domains** and their IP Addresses. Upon accessing a domain, the device checks this table. If the IP Address isn't present, the device queries the DNS Server for the domain's IP Address.

Subsequently, the client device utilizes the IP Address to access the website. **Figure 5** illustrates this scenario: the client queries the DNS Server for the IP Address of the **arthurassuncao.com** domain, the DNS Server replies with IP Address **76.76.21.21**. With this IP, the client sends a request to the server, which responds.

![Figure 5. How DNS (Domain Name Server) works.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4a1d0w1gggbab24s1t5.png)

As mentioned, when we access a website, e.g., via Google Chrome, the DNS process unfolds imperceptibly. Besides that, your device uses a local cache for DNS, as such a local DNS and other mechanism, like Hosts file.

Simultaneously, we often use **Google Search**. Upon searching, a list of sites appears, ordered by the search engine's internal rules. However, sites can optimize their position using **SEO (Search Engine Optimization)** techniques.

> **SEO** encompasses strategies to enhance a website's visibility.

Who crafts and applies these sites and SEO techniques? We access websites and web systems developed by **software developers** or even **software engineers**.

These developers employ **backend** and **frontend** technologies. Backend encompasses server-side components employing databases, languages like Python or Java, and **APIs (Application Programming Interfaces)** connecting frontend and backend. Meanwhile, Frontend is the visual and interactive aspect of systems, leveraging at least **HTML (HyperText Markup Language)**, **CSS (Cascading Style Sheets)**, and **JS (JavaScript)**.

- **HTML** outlines page structure and content.
- **CSS** enhances visual aspects like element positioning, colors, sizes, fonts, etc.
- **JS** introduces actions and animations. While CSS enables animations and dynamic functions, JS is more potent, exercising control over all elements.

In the lower right corner of **Figure 2**, **JS** generates a **DOM (Document Object Model)**—a tree-like programming interface representing web documents.

In the contemporary frontend landscape, tools like:
- **ReactJS**: A JavaScript library employing **JSX** (HTML within JS).
- **SASS**, **CSS Modules**, or similar: Tools for generating CSS code.
- **TypeScript**: A JavaScript superset, an enhanced JavaScript.

For a glimpse of a frontend project, visit [https://github.com/ArthurAssuncao/pomoTraining](https://github.com/ArthurAssuncao/pomoTraining).

More insight into backend and frontend is available in the article [Why You Should First Learn Front End and Not Back End](https://dev.to/arthurassuncao/why-you-should-first-learn-front-end-and-not-back-end-3jh).

Finally, the complex map of **Figure 2** was explored, deepening our comprehension of internet mechanics.

### Let's go beyond
In forthcoming articles, you'll delve into **Client-Server Architecture**, **DOM (Document Object Model)**, and the web layers (**HTML**, **CSS**, and **JS**). This journey will extend your knowledge of the **HTML** markup language.