Self-explanatory. Fire up Chrome, Firefox, Safari, or Edge browser and type in the URL (in this case, amazon.com). Hit enter, and activate the set of digital dominos that follow.

Fun fact: Sometimes you will see references to www.amazon.com , sometimes to just amazon.com. The abbreviation www is a reference to the mostly deprecated phrase “World Wide Web ” which gained prominence in the late 1990s. Today, in most cases, you do not need to use www in an address when going to a website, but some websites do still require it.

In its simplest form, the Internet is just a connected set of computers or servers that contain files that people want to access. When you input amazon.com in the browser, you’re requesting a set of resources from a server that exists in the digital ether, and asking it to execute a particular task. In order to send the request to the right server, the Internet uses IP addresses to communicate. An IP address is a unique sequence of numbers used to identify devices connected to the Internet. In the case of amazon.com, we can find the IP address that corresponds to the website by using the “ping” command .

If you are on a Mac, use Spotlight search to open the Terminal app. Type in the command “ping amazon.com” and press enter to execute it. You should see the following screen returned:

Ignore the rows and rows of data that show up, and focus entirely on the highlighted IP address (in this case, 54.239.26.128). This is the identifier for the server that our request to load amazon.com goes to.

Now, as a user, if we had to remember the IP addresses of every website we wanted to visit, we’d have to keep a paper Rolodex or Word doc handy. This also limits our ability to visit a lot of sites because the process becomes too cumbersome. Not ideal.

DNS (Domain Name System) solves this problem. Instead of remembering 54.239.26.128 each time we want to buy an item from Amazon, we only have to remember “amazon.com ”. DNS is a virtual phonebook ; the URL is an easy-to-remember domain name that we’re able to commit to memory, and DNS converts it into an IP addresses that finds the correct resource on the internet. Think about it like storing contacts on your phone; you can’t remember the phone numbers of every contact on your phone, but you don’t need to because they’re saved behind a contact name.

To further illustrate how this system works, it’s entirely acceptable to use the IP address in the search bar and get the same result.

Here, the IP address 54.239.26.128 is typed into the search bar.

DNS finds the correct web resource, and the browser reverses the IP address to amazon.com for readability.

Now that we understand how DNS is used, it’s important to keep in mind that web requests take time. Even if it’s in the order of milliseconds, it can affect the experience of content delivery. To speed up the request each time, your browser will store data locally (known as caching ). In the case of DNS, once we’ve accessed amazon.com once, there’s no reason to hit the DNS each time because that slows performance. Instead, the browser will create a local DNS cache of the websites you’ve been to so the next time you visit amazon.com, it can directly you immediately to the website without hitting the DNS upstream. There are other caches (OS cache, router cache) along the way that can improve performance, but we’ll leave them out since that’s dipping too deep.

DNS isn’t just one big server that all computers know how to reach. It is a decentralized system of servers that are provided by Internet Service Providers (ISPs) and network operators as resources to computers on their network. In addition, large companies like Google provide their own DNS services internally and to the public.

To further simplify, DNS follows the path defined below:

Browser cache (if website was accessed at least once) ➤ intermediary DNS ➤ root / authoritative DNS

The intermediary DNS is usually controlled by your ISP (Internet Service Provider) and configured automatically unless you change it, but the authoritative DNS is the source of truth that contains ALL of the webpages that are newly created. If you register www.newwebsite.com , it will be added to the root DNS and flow downstream to all of the domain name systems across the Internet. This is partly why you need to wait anywhere between 1 hour to 24 hours after buying a domain name to actually see your website up and running.

TCP is an underlying protocol that powers communication of data between interconnected systems. In our use case, TCP establishes a line of contact with the server using a handshake .

To decompose this concept, you can think of the handshake in the following way:

The technical implementation follows a similar exchange:

This confirms to both parties that an active line is established, and now requests can be sent over the established TCP connection.

HTTP is an application-layer protocol that sits on top of TCP to enable web activity and navigation on the Internet. After the TCP connection is established, the web browser sends an HTTP GET request. A GET request basically says, “I want to GET some data from your server”; in our case, the Amazon landing page. The GET requests sends additional data in the header of the request called the user-agent, which communicates the user’s browser and device type, in order to deliver the content in the relevant format, among other things.

A website at the scale of Amazon is hammered by millions of requests and transactions each day. If they only had one server to handle all requests, the site would go down immediately. To combat this situation, Amazon will have multiple servers across strategic geographic locations that can handle user requests. To decide which server to send your particular request to, they use a technique known as load balancing.

A load balancer (either hardware or software based) accepts a request, and uses a set of procedures to determine which server to forward the request to. In a simple case, let’s say we receive 10 requests in the span of 1 second. A round robin method can be used to send request #1 to server 1, request #2 to server 2, request #3 to server 3, and request #4 back to server 1. This process continues in a predictable, repeatable manner so requests are evenly distributed. When it comes to setting up and using a load balancer, it is advisable to use two for the purposes of redundancy. If only one load balancer exists, and it fails for any reason, it can create a bottleneck that swallows up all the requests and prevents them from being routed to the web servers correctly. Using two load balancers that communicate with each other using a heartbeat (simple ping to see if the other is alive / active) protects the system and creates a fail-safe mechanism.

A CDN is a system of distributed servers that organizations can use to deliver content to users in a faster way. For example, if a new startup wants to increase performance without buying expensive bare metal servers or spinning up virtual machines, they can tap into the power of a CDN and host their files on this widespread network of servers. Since CDNs are designed to have servers available in locations that deliver content to users quickly, the CDN servers will absorb the traffic and alleviate pressure on the startup’s central hosting solution. Not all products or companies will need to use a CDN, but it’s important to know they exist if scaling is called into the conversation. One popular CDN is Cloudflare .

The HTTP request sent earlier by the browser is accepted by the web server, and HTML content is sent back to the client browser. When the HTTP request is accepted, there is a web server (Apache, Nginx) that is responsible for handling the request, and a back-end programming language or framework (PHP, Ruby, Python) that handles what actions to take.

The server sends the requested content to the user’s browser, and the HTML content is loaded, along with linked style sheets, scripts, and associated content. All of this comes together to display the www.amazon.com landing page.

Voila, we’ve covered the highlights of how content is delivered on the Internet! It’s certainly possible to expand on each step, but this level of granularity is acceptable for a product manager’s body of knowledge. Going a tier deeper in understanding is not expected, and is usually better left for a software engineering or technical architect interview setting.

Up to this point, we’ve made several references to front-end and back-end technologies. Let’s clarify the difference.

Back end: The code running on the back-end server that processes front-end queries and returns data back to the user. The back-end interactions are hidden from the user view, and relate to databases and application languages like PHP, Ruby (with the framework Ruby on Rails), Python (using the Django framework), and so on. The back-end language processes user logins, fetches your personalized content, manages state, etc.

Companies tend to hire front-end developers, back-end developers, and full-stack developers (engineers who can float between both disciplines) for web application development.

In this section, we’ll walk through the basics of three languages that define front-end development: HTML, CSS, and JavaScript. Each language has a place and purpose, and come together to display a webpage and all of its elements on the browser you’re using. If we simplify the job of each language down to two key terms each, they are all described in the following way:

As we step through each language, the distinctions will become clear and you’ll naturally understand the separation.

HTML structures content using tags. A tag helps define an element on a page and render content on the browser. For an element to be considered valid, it must consist of an opening and closing tag with angle brackets, with the closing tag using a forward slash (/) to indicate closure.

To visualize this, let’s step through an example HTML file. Open up a text editor on your computer (Notepad++, Sublime Text, Visual Studio Code), create a file called index.html, copy & paste the following code, and save.

If we refer back to the index.html file we created and double click into it, a browser window will open and our page will be displayed.

In short, meshing tags together to display content is at the heart of what HTML does. To supplement your learning, go to popular web pages, right-click, and select “View Page Source”. Since HTML is a frontend language, you’ll be able to freely view how any website has managed to build out their frame (unless they purposely obfuscate the content).

The image tag allows the developer to link images to the page. The <img> tag doesn’t require a closing tag, but needs two attributes to be specified: src and alt. Src (source) points us to the location of the image so we can appropriately paste it into the page, and alt (alternate text) shows users a text explanation of the image if it doesn’t load properly. Alt is also used for accessibility users who use screen readers to ingest web content, so it is important to include it.

<ul> / <ol> - Unordered and ordered list tags

To create list items in HTML, you can use the ordered list tag (<ul>) or unordered list tag (<ol>). The key difference is that <ul> will number the items in the list, whereas <ol> will be unordered. Both lists use the <li> tag to signify a single item in the list.

The <a> tag links one page to another (hyperlink). <a> requires the use of the “href” attribute to define the linked page, and the text in between the opening and closing <a> tag specifies the text you want hyperlinked.

Tags open up a world of possibility and flexibility to the developer, but often we’ll want to combine individual tags together to take advantage of new functionality. For example, what if we want to create an ordered list of our favorite websites, with each list item hyperlinked to the respective webpage? That’s where nesting comes in.

We’re able to nest as many tags as we want, and it helps us structure our content in new ways. Just remember: we still need to abide by HTML rules and close each tag (if required) and be careful to close the tags in an inside-out manner.

<a href="www.linkedin.com/in/aswinpranam"><img src="aswin.png" alt ="profile photo"></a>

Now that we’ve gone through the fundamental makeup of an HTML page and the basic tags that create the content hierarchy, let’s put all of this together to build a personal profile page. See if you can understand the code, and how it corresponds to the finished output below.

Source code:

Profile webpage:

And that’s it! Next up, CSS.

CSS is used for styling, decorating, and presenting the overall aesthetic of the webpage. The profile page we created using HTML is a start, but it’s barebones: no colors, font styling, or patterning. CSS works by using selectors to select elements on the page, then assigns a set of properties to those elements.

Let’s look at a quick example. To begin, create a new file using your editor called style.css. Next, open index.html and add a <link> tag to the <head> section. The <link> tag connects CSS code to the HTML file.

Once the style.css file is linked, we can start altering the elements in the index.html file. To select elements to style, we use the HTML tag name. If we want to change the color of <h1> elements to red and set a background color of black, we can use the code below in style.css. In parallel, we can change all of the <p> elements to have a blue background color and a dotted border by using similar syntax.

HTML + CSS profile website:

It’s not pretty, but it drives the concept home. The process of building a beautiful web page is painstaking, and a solid reason why we should thank our front-end developers and web designers.

One additional point to know about CSS is the concept of an ID and Class. In the above example, we chose to style headers and paragraphs, but the commands we coded styles every single header and paragraph on the page. What if we only want to target one header, or select paragraphs?

To do this, we need to open our index.html file, and add an ID or Class to the element we want to change exclusively. In our case, we can append an id attribute to <h1> and call it “aswin”.

Then, we can replace h1 in the CSS file to #aswin and the styling that follows will only apply to the element with the ID.

IDs are defined using the “id” attribute, whereas classes are defined using “class ” in the HTML file. IDs can only be used on one element, but classes can be assigned to multiple elements simultaneously for batched styling.

Content & structure: check.

Styling & design: check.

JS (JavaScript) is the third and most expansive language on the front-end web stack. JavaScript can be used for front-end interactivity, but it can also be run on the server as a back-end language using Node.js, or even as a desktop development language using third-party frameworks and libraries. If there’s ever a time to master one language and one language alone, JavaScript would be a prime candidate for the top spot.

The purpose of JavaScript on the front-end is to enable actions across the website; button click responses, submitting content to the server, animations, and pushing / pulling content as needed. It’s impossible to cover all the intricacies of JavaScript as a language in a handful of pages (refer to additional resources below for further learning), but I’ll add a block of code with basic functions below for the curious.