Skeletons, Makeup, and the Stage

Have you ever stopped to think about who you are actually communicating with when you browse the web? Is it just a magical void where you ask questions and get answers?

In our recent session, Gagana, Chaitanya, and I sat down to completely deconstruct the internet. We threw out the complex jargon and broke down web architecture into something you can actually visualize—starting with how devices even talk to each other.

1. The Graph of the Internet

Before we can build for the web, we have to understand what a network actually is.

If you think about a group of people networking, they form a web of communication—I talk to you, you talk to him, and this forms a graph of people. A computer network is exactly the same concept: a group of computers communicating.

But there is a distinct difference in how these groups communicate:

• Intranet: If communication is strictly happening within a closed, specific group of people (or devices), that forms an internal network, or an intranet(internal, closed network).
• Internet: When communication happens globally between completely different people or external devices, that becomes the internet(global, public network).

When all of these smaller networks (even personal hotspots) are connected globally at one place and accessible to everyone, we get the World Wide Web (www).

2. Why HTML? The Power of "Markup"

So, we have a global network. But there needs to be a standard way for us to communicate globally that a web browser can actually understand.

Enter HTMLHyperText Markup LanguageA standard markup language that structures text and links the global web together..

During our chat, I asked the group: If I write a huge paragraph using one single color, does it make any sense?. No, it's just a massive block of bland text.

Think about how you correct or format a physical paper. You might want the questions written in black pen, underlines done with a pencil, and key terms highlighted. When you make something bold or add color, you are adding a markup to it.

But why HTML and not just a standard Markdown (.md) file?

• A Markdown file allows you to generate headings, bullet points, and basic formatting.
• However, Markdown is singular; you are just creating one single file.
• Our internet doesn't work as a single file. We need connections between things. We need hyperlinks—buttons or texts that, when clicked, trigger an action and link different pages together.

That is why we created HTML: to have a standard markup language that structures text and links the global web together.

3. Frontend vs. Backend: The Stage Skit Analogy

Before we write any HTML, we have to understand the fundamental divide in web development: Frontend vs. Backend. To explain this, we talked about college stage skits.

I asked the group if they had ever done voice dubbing for a skit. Usually, there is someone on stage acting, while another person sits out of sight behind the stage providing the voice.

• The actor on stage is wearing a beautiful costume, full makeup, and an elaborate face mask. They look the part and interact with the audience.
• However, because of that heavy mask and role, the actor on stage can't always talk or drive the narrative.
• There must be someone behind the scenes, giving the narrative and doing the heavy cognitive work to help the audience understand what is happening.

This is exactly how a web application works:

• The Frontend (The Actor): This is anything the user sees. It must be beautiful, understandable, and user-friendly. However, the frontend alone cannot do the heavy thinking.
• The Backend (The Dubber): This is the person behind the stage doing all the major thought processes and heavy lifting.

4. Anatomy of the Frontend: Skeletons and Makeup

If we zoom in on the Frontend (our actor on stage), it is broken down into three major components: HTML, CSS, and JavaScript.

To make this unforgettable, we used a human body analogy:

• HTML (The Skeleton): If you take an unformatted text file, it all looks exactly the same. HTML is like putting bones into that file to give it a human structure. It gives the website its fundamental shape. But, as I joked with Gagana, would anyone want to marry a skeleton?. Probably not! Pure HTML is just black and white text of varying sizes, and it looks incredibly bland.
• CSSCascading Style SheetsContains all styling information to make the web page visually appealing. (The Makeup): No one wants to interact with a bland website, so we add makeup. CSS stands for Cascading Style Sheets. It contains all the styling information. Why "cascading"? Because styles link up and stack. You can create a base style for a standard button, and then add extra cascading information to create a very specific, unique "primary button".
• JavaScriptJSA scripting language that adds complex interactivity and life to a website. (The Life): Now you have a beautiful, styled body. But without life, nobody would want to interact with it. JavaScript is the spark of life. It adds interactivity, making the website functional, allowing buttons to actually work, and making the entire experience dynamic.

Through HTML, CSS, and JS, we build the beautiful actor for our stage. But how does that actor remember things? How does it store data? That requires a trip backstage into the world of databases.

Stay tuned for Part 2, where we dive into Relational vs. Non-Relational databases, the reality of the Cloud, and why you shouldn't just run servers off your own laptop!