DEV Community

The Creative CodeFlow
The Creative CodeFlow

Posted on

What Actually Happens When You Type a URL?

#webdev #javascript #programming #beginners

What Actually Happens When You Type a URL?

You type:

https://example.com
Enter fullscreen mode Exit fullscreen mode

You press Enter.

A second later, the website appears.

But what actually happened during that one second?

A lot more than you might think.

Let's break it down in simple terms.

1. The browser checks the URL

The browser first understands what you entered.

For:

https://example.com
Enter fullscreen mode Exit fullscreen mode

we have:

https → protocol
example.com → domain
Enter fullscreen mode Exit fullscreen mode

The protocol tells the browser how it should communicate with the server.

2. DNS finds the server

Your computer doesn't directly understand example.com as an address.

It needs an IP address such as:

93.184.216.34
Enter fullscreen mode Exit fullscreen mode

This is where DNS comes in.

DNS is basically like the internet's phone book.

It converts:

example.com
        ↓
93.184.216.34
Enter fullscreen mode Exit fullscreen mode

Your browser can then find where the website is hosted.

3. A connection is created

Now your browser needs to communicate with that server.

For HTTPS websites, the connection also involves encryption using TLS.

This is important because information travelling between you and the website should not simply be readable by anyone who can observe the connection.

4. Your browser sends an HTTP request

Now the browser can actually ask the server for something.

A simplified request looks like:

GET / HTTP/1.1
Host: example.com
Enter fullscreen mode Exit fullscreen mode

In simple words:

"Hey server, give me the homepage of example.com."

5. The server sends a response

The server processes the request and sends something back.

For example:

HTTP/1.1 200 OK
Content-Type: text/html
Enter fullscreen mode Exit fullscreen mode

And then the HTML page is sent to your browser.

But we're still not finished.

6. The browser builds the webpage

The browser reads the HTML.

It might find:

<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<img src="logo.png">
Enter fullscreen mode Exit fullscreen mode

Now the browser needs to request those files too.

So one page can cause many additional requests.

Something that looks like:

You
 ↓
Browser
 ↓
DNS
 ↓
Server
 ↓
HTML
 ↓
CSS + JavaScript + Images
 ↓
Browser renders the page
Enter fullscreen mode Exit fullscreen mode

And finally...

You see the website.

The interesting part

When you think:

"Google loaded in one second."

Your computer actually performed many different operations behind the scenes.

That's why web development isn't just about HTML, CSS and JavaScript.

It also involves:

  • DNS
  • HTTP
  • networking
  • TLS
  • servers
  • browsers
  • caching
  • databases
  • CDNs

All of these pieces work together to make the web feel almost instant.

Try this yourself

Open your browser.

Press:

F12
Enter fullscreen mode Exit fullscreen mode

Then open the Network tab and refresh a website.

You'll see dozens or even hundreds of requests.

Look at:

Request
Status
Time
Size
Type
Enter fullscreen mode Exit fullscreen mode

Pick one request and inspect it.

Suddenly, the website won't look like "one page" anymore.

It will look like a conversation between your browser and many different systems.

And that's one of the most useful things to understand as a web developer:

A website isn't just something you see.

It's a collection of requests, responses and systems working together in the background.

Top comments (0)