How the web works

Every time you open a website, two programs talk to each other. Your browser (the client) asks for something, and a server (a computer somewhere else) answers. Everything in web development, React included, sits on top of this simple conversation.

Think of ordering at a coffee shop counter. You (the browser) say exactly what you want, the barista (the server) prepares it and hands it over with a receipt. If you ask for something that isn't on the menu, you get a polite "we don't have that". The web works the same way, with very precise rules for how to ask and answer.

A URL (Uniform Resource Locator) is the full address of one thing on the web. Take https://brewandbean.example/menu?category=coffee. It has four parts you should recognise on sight.

There can also be a port (:5173 in http://localhost:5173, which you will see when you run React locally) and a fragment (#reviews), which the browser uses to jump to a section and never sends to the server.

Computers find each other by IP address (for example 142.250.183.4), not by name. DNS (Domain Name System) is the internet's phone book: the browser asks a DNS resolver "what is the IP address of brewandbean.example?" and gets an address back. Answers are cached by your browser, your operating system and your internet provider, so the second visit is faster.

With the IP address in hand, the browser opens a connection to the server. For https it also performs a TLS handshake, which sets up encryption so nobody on the café Wi-Fi can read or change the traffic.

nslookup example.com

Asks DNS for the IP address of a domain. Works on Windows, macOS and Linux. The addresses you see may differ from someone else's.

Over that connection the browser sends an HTTP request: a method (what to do), a path (what to do it to), headers (extra information) and sometimes a body (data). The server replies with an HTTP response: a status code (how it went), headers and a body (the actual content: HTML, CSS, JavaScript, an image or JSON).

GET /menu HTTP/1.1
Host: brewandbean.example
Accept: text/html

--- response ---

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!doctype html>
<html>
  <head><title>Brew & Bean menu</title></head>
  <body>...</body>
</html>

Real requests carry more headers (cookies, browser name, accepted languages). Newer HTTP versions send the same information in a more compact binary form, but the ideas are identical.

This lesson only needs the basics. Methods, status codes and headers are covered in depth in *HTTP in depth: methods, status codes and headers* in the Backend Development track.

That last step is where React lives. React is a JavaScript library that keeps the DOM in sync with your data. When a customer adds a cappuccino to the cart, your code changes the data, and React works out which parts of the DOM to update. You will build exactly this in *State and events*.

A React app built with Vite starts as an almost empty HTML page plus a JavaScript bundle. The JavaScript builds the whole interface in the browser and fetches data (such as the Brew & Bean menu from GET /menu) as JSON. Frameworks such as Next.js mix both approaches by rendering React on the server; that comes later in *Next.js: server rendering and when you need it*.

curl -I https://example.com

Sends a request and prints only the response status line and headers. curl is built into Windows 10 and later, macOS and most Linux systems. Look for the status code and Content-Type.

"What happens when you type a URL and press Enter?" is one of the most common web interview questions, for freshers and experienced developers alike. A strong answer walks through the same steps as this lesson, in order: parse the URL, DNS lookup, TCP connection and TLS handshake, HTTP request, server response, then parsing HTML into the DOM, fetching CSS/JS/images, layout, paint and running JavaScript. Mention caching (DNS and browser cache) to show depth.

You are a frontend interviewer at a product company in India.

Ask me: "What happens when you type a URL into the browser and press Enter?" Wait for my answer.

Then:
1. Score my answer out of 10.
2. List the steps I missed or got in the wrong order.
3. Ask me one follow-up question about [DNS caching / HTTPS / how the browser renders HTML].

My level: [fresher / 2 years of experience].

What to expect: A good session points out missing steps (often DNS caching, the TLS handshake or the DOM) and asks a follow-up that goes one level deeper.