Once You Draw Out the TCP Handshake, Network Protocols Stop Being So Intimidating

Many people nod the first time they hear about the TCP three-way handshake or a DNS query. But when someone asks, 'What actually happens?' they get stuck.

Dilum Sanjaya made a webpage that turns 14 internet protocols into a visual cheat sheet and includes a packet inspector. The address is Protocol Explorer.

The interface has three parts. On the left, protocols are listed by category such as TCP/IP, UDP, and DNS. In the middle, it uses the example of a client requesting a webpage to walk through the HTTP flow: first query DNS to get the IP, then establish a TCP connection, send an HTTP request, and the server returns data. At the bottom is Packet Flow, where you can see fields such as source address, destination address, and protocol type. It is not just a static diagram; animations run through the request and response step by step.

The value of tools like this is that they lower the first barrier. Knowing that DNS looks up an address and seeing how a query happens are two different things. Knowing that TCP requires a handshake and seeing how packets travel when a connection is established are also two different things.

Someone in the comments said the animation is too fast, the text is a bit noisy, and the interface feels cramped. The author replied that the page has speed controls and can be paused to inspect things step by step. The demo video moves faster to show features in a short time, but in actual use you can go at your own pace. This detail matters more than the demo video. Visualization does not automatically mean easy to understand; when information density gets high, animation can easily become noise.

The same author has made several similar projects.

Learn Arduino turns the development board into an interactive course. The page includes a 3D board, pin descriptions, example code, a serial monitor, and a simulator. The course starts with getting to know the board and lighting an LED, then moves on to pressing a button. Some people want to use it to teach kids, and others ask whether it can be open-sourced. The address is Learn Arduino.

Learn ESP32 is another version of the same idea. It teaches ESP32 in the same interactive way, going circuit by circuit. The address is Learn ESP32.

Backcountry 101 moves slightly away from hardware to cover wilderness survival basics. The course includes starting a fire, sending distress signals, preparing a survival kit, and identifying edible and poisonous plants. The page uses WebGL for 3D interaction. Some joke that it is an interactive version of Dr. Stone, and others ask whether the course can be saved offline when there is no internet. The address is Backcountry 101.

These projects are all marked as made with Opus 5.5. Their common approach is to break abstract processes into visible steps. Visualization does not automatically mean easy to understand; what really determines the experience is whether there are speed controls, whether you can pause, and whether the information hierarchy is clear. Demo videos are cool, but when actually learning, the pace should be left to the user.