Networking, visually explained
See the Internet
in Motion.
Follow one request from your device to a website — and all the way back again.
Today’s mission
Open google.com and watch the trip.
Find the address. Ask for the page. Bring it back.
Your browser needs the site’s address and a secure way to exchange data. If that address is not already saved, DNS briefly branches to a resolver. The website request then continues to the server, and the response returns to your browser. Select any stop to see what it does.
DNS question + answer ⇅Secure connection setup ↔Website request →Website response ←
- Optional DNS side trip · if the site address is not already saved
This is a teaching picture. Saved answers or reused connections can skip steps, and the response may travel along a different route.
One journeyFirst find the site’s address if needed. Then open a secure connection, ask for the page, and bring the response back.
Hello, Network!
Goal: Understand what a network does.Start with two connected devices and one message.
Send a message across a tiny network.
What the motion meansA network is a group of connected devices that can exchange information. The connection can use a cable, radio waves such as Wi-Fi, or several links joined together.
The scene starts automatically. Select Send “hello” to replay it.
Remember: A network lets connected devices communicate.
Meet the Neighborhood
Goal: See how your device reaches the first router.Meet the local links around your phone or laptop.
How should the laptop connect?
What the motion meansAn access point is the Wi-Fi radio your device joins. A gateway is the router that sends traffic from your local network to other networks. Home equipment often combines both jobs in one box.
Wi-Fi radio waves carry the data to the access point. In this home example, the same box is also the gateway.
Remember: Your device uses a local link to reach its gateway—the first router on the way to other networks.
Message, Meet Pieces
Goal: See why data travels in smaller pieces.Local links carry many packets—not one giant message.
Watch “NETWORK” split, travel, and come back together.
In this reliable-delivery example, what should happen if piece #3 is lost?
Choose an answer, then compare it with the visual below.
What the motion meansNetworks carry data in packets. This teaching picture uses one letter per packet so the motion is easy to see. Real packet sizes vary, and one packet usually carries many bytes plus header information. Reliable delivery rules can notice missing data and put received bytes back in order.
The message splits automatically when this chapter enters view. Use Replay split to watch again.
Remember: Packets carry pieces of data, and reliable delivery rules can recover a missing piece and restore the right order.
The Internet’s Name Game
Goal: Turn a readable site name into a destination address.Routers need an IP address before they can send packets toward google.com.
Turn google.com into a destination address.
What the motion meansAn Internet Protocol (IP) address is the number-like destination routers use. The Domain Name System (DNS) is the internet’s directory: it finds one or more IP addresses for a name such as google.com. A DNS resolver may use a saved answer or ask other DNS servers.
Select Run DNS lookup to ask for the address of google.com.
Remember: DNS turns a human-friendly site name into an IP address that the network can route toward.
Pick a Path
Goal: See how routers move a packet one step at a time.Each router chooses the packet’s next hop toward its IP address.
Watch each hop, then block the primary path.
If the primary link fails and routers learn an alternate route, what can happen next?
Choose an answer, then compare it with the visual below.
What the motion meansA hop is one router-to-router step. In this picture, the route is the sequence of hops a packet follows. Each router chooses only the next hop. Real networks compare metrics (cost scores) and policy (network rules)—not simply the fewest router icons.
Primary path: You → A → B → Site. Each arrow is one hop in this teaching picture.
Remember: Routers forward packets hop by hop, and later packets can use an alternate route after the network learns about a failure.
TCP and UDP: Two Delivery Styles
Goal: Compare two ways applications transport data.Routing chooses where packets go; transport rules shape end-to-end delivery.
Compare built-in recovery with simpler delivery.
For a live video call, which delivery tradeoff is commonly useful?
Choose an answer, then compare it with the visual below.
What the motion meansTransmission Control Protocol (TCP) delivers bytes reliably and in order, sending missing data again. User Datagram Protocol (UDP) alone sends separate packets called datagrams without built-in retry or ordering. QUIC is the name of a modern secure transport: it runs over UDP but adds reliability, encryption, and loss recovery for applications such as HTTP/3.
File download: TCP, or QUIC over UDP — Downloads need every byte. TCP supplies reliable delivery; QUIC runs over UDP but adds its own reliability and recovery.
Remember: UDP alone is not the same as QUIC. Applications choose TCP, UDP-based systems, or QUIC based on the delivery behavior they need.
Open Sesame, Website!
Goal: Put the parts together into one page load.Follow them in order as the browser opens google.com.
Move through the actions that make google.com appear.
What the motion meansOn a first visit, the browser may find the site’s address, open a secure connection, ask for files, receive them, and build the page. Hypertext Transfer Protocol (HTTP) describes the requests and responses; Transport Layer Security (TLS) encrypts them. Saved answers, files, and connections can skip work, and some steps can overlap.
Find the address
If needed, the browser asks DNS for an IP address for google.com.
Step 1 of 6: If needed, the browser asks DNS for an IP address for google.com.
Remember: A page appears through several exchanges between the browser and servers—not one single request.
Put it together: Follow one marker from the browser’s first action to the finished page. Choose each stage at your own pace.
Chapter 7 synthesis
Put the whole page-opening journey together
- Device
- DNS query
- DNS answer
- Connect
- Request
- Response
- Render
The marker follows the journey, not one physical packet. Each step can create new packets and exchanges. If the browser already knows the site’s address, the DNS steps are skipped.
The Feel of Fast
Goal: See what makes a connection feel fast or slow.A request can reach the right server and still feel slow or uneven.
Change one condition at a time and watch the traffic react.
What the motion meansLatency is waiting time; round-trip latency measures there and back in milliseconds (ms). Bandwidth is transfer capacity in megabits per second (Mbps). Packet loss is the percentage of packets that do not arrive. Jitter is how much delay changes from packet to packet.
Try this: First raise latency, then lower bandwidth, then add packet loss. Reset between changes so you can see what each one does.
No-loss teaching estimate: ~0.2 seconds. The largest modeled part is transferring the 800 KB example at the available bandwidth. No packet drops are shown. Real loss-recovery time depends on the protocol, round-trip latency, and which packets are lost.
Remember: Real quality depends on latency, bandwidth, packet loss, jitter, the protocol, and the content—not one speed number.
Final playground / teaching simulation
Packet Playground: run the whole request journey
Follow one simplified request from finding the site address to receiving its response.
Start here: run the default journey first. Then change one setting at a time and compare what changes.
Ready. Run these beginner-friendly defaults first.
Model assumptions: This simulation uses an 800 KB response, a new secure connection, one responsive configured DNS resolver, and a working alternate path after a modeled failure. Real DNS, routes, congestion, servers, browsers, and loss recovery vary, so these times show relationships rather than predict a page load.
Journey complete
You can now explain how a website reaches your screen.
Your device joins a network and sends data in packets. DNS finds the site’s IP address. Routers move packets hop by hop. TCP, UDP-based systems, or QUIC shape delivery. The browser asks for files and builds the page, while latency, bandwidth, loss, and jitter shape how it feels.
Replay the journey ↑