🤯How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)

If you’re just getting into web development, chances are you think you know how the web works — at least on a basic level….But then you try to explain how a basic website works and draw a blank.

Photo by Levi Loot on Unsplash

Here’s a field guide to the intimidating basics that everybody should have a handle on. 👇🏾

Defining parts of the web

Photo by Markus Spiske on Unsplash

• The most important terms to understand if you want to grok the secrets of the World Wide Web are: client, server, port number, DNS, TCP/IP
• Client: An application that runs on a computer and is connected to the internet. Its primary role is to take user interactions and translate them into requests to another computer called a web server.
• Server: A machine that waits for requests from other machines (e.g. a client) and responds to them. The server has special server software installed and running which tells it how to respond to incoming requests from your browser. The primary function of the server is to store, process, and deliver web pages to clients.

The journey from code to the webpage

Photo by Hal Gatewood on Unsplash

• Type a URL into your browser
• The browser parses the information contained in the URL including the protocol (https), the domain name (github.com), the resource (/), and the HTTP request (GET request from client)
• Your browser takes the IP address and the given port number from the URL, opens a TCP socket connection, and sends an HTTP request to the web server for the main HTML web page of the website
• If the request is successful, the page will be loaded in the browser window and the connection will be closed

Crossing the Internet abyss

Photo by NASA on Unsplash

• TCP/IP is a two-part system, functioning as the Internet’s fundamental “control system”
• IP stands for Internet Protocol
• The second part, Transmission Control Protocol (TCP), is responsible for breaking the message or file into smaller packets, routing packets to the correct application on the destination computer using the TCP headers, resending the packets if they get lost on the way, and reassembling them in the correct order once they’ve reached the other end

Paint the final picture

Photo by Team Nocoloco on Unsplash

Once you have the resources comprising your website, you can:

• Present them to you as a human-readable webpage
• Generate a tree structure of the DOM elements
• Stylesheets are parsed to understand how to style each node
• The browser traverses down DOM nodes and calculates the CSS style, position, coordinates

The web is complex, but you just finished the hard part (or at least a summary of it).

Liked this piece? Don’t forget to show me some love or leave me a comment with your favorite app! It motivates me and helps me reach other like-minded people. Thanks. 🤗