How Websites Work (Explained Like You’re 12)

If you’ve ever wondered how your favorite websites like Google, Instagram, or YouTube magically appear on your screen, you’re not alone. At first glance, it seems like clicking a link opens a page, but behind the scenes, a lot is going on.

Let’s walk through it in plain English.

From the Internet to Your Screen

In our previous post, we discussed how the Internet is essentially a vast network of wires that connects your computer (the client) to other computers (known as servers). These servers store websites and deliver them to you when you request them. Like typing in google.com.

Once your request reaches the right server, that server sends back all the stuff your browser needs to display the site. That “stuff” usually comes in the form of three types of files:

HTML
CSS
JavaScript

You’ve probably heard of these if you’ve dipped your toes into web development, but let’s break down what each one does using real-world examples.

Think of a Website Like a House

Imagine you’re building a house. To do that, you need:

Bricks and structure (that’s HTML)
Paint, tiles, furniture, all the visual design (that’s CSS)
Light switches, ovens, and anything that works when you interact with it (that’s JavaScript)

Let’s explore each part one by one.

HTML: The Content and Structure

HTML (HyperText Markup Language) is the foundation of every website. It’s like the bricks and beams of a house.

If you visit a web page, HTML is what gives it structure. It determines where elements are placed, including headings, paragraphs, images, buttons, and links. It’s the what of your website.

Without HTML, a web page would have… nothing. Just a blank screen.

CSS: The Style and Design

If HTML is the brick, CSS (Cascading Style Sheets) is the paint, the wallpaper, the curtains, everything that makes your website look nice.

CSS doesn’t add new content. Instead, it styles what’s already there. It sets colors, fonts, spacing, layout, and more. It can make a button red with rounded edges or align content in a neat grid.

It’s what turns “just text and boxes” into a professional, polished website.

JavaScript: The Functionality

JavaScript is where things come alive.

This is the part of a website that responds when you perform an action, such as clicking a button, typing in a form, or dragging something around.

Want a pop-up to show up? That’s JavaScript.
Want a form to submit your message? That’s JavaScript.
Want to update a list without refreshing the page? Yep, JavaScript again.

If HTML is the bones and CSS is the clothes, JavaScript is the muscles and brain.

Example: The Google Homepage

Let’s take Google’s homepage as a real-life example.

When your browser visits google.com, it receives:

HTML that places the Google logo, the search box, and the two buttons ("Google Search" and "I'm Feeling Lucky").
CSS that styles these elements, such as how big the logo is, the spacing between buttons, the colors, fonts, etc.
JavaScript that lets you interact with the site. When you type in a search and press Enter, JavaScript handles the request and displays your search results.

Each file type plays a unique role, working together to bring the site to life.

Peek Behind the Curtain with Chrome Developer Tools

Want to see this in action?

Open your Chrome browser, go to any website, right-click on something (like a button or headline), and choose Inspect.

This opens up Chrome Developer Tools, a robust set of tools used by developers to see and edit the structure of websites.

Try this:

Go to google.com
Right-click on the “Google Search” button
Click Inspect
Find the part of the code that says “Google Search”
Double-click it and change it to “My Cool Search.”
Hit enter

Boom — it changes on your screen! Just like magic.

But here’s the catch: once you refresh the page, your changes disappear. That’s because your browser reloads the original HTML, CSS, and JavaScript from Google’s server. Your edits were local (just for you) and temporary.

Still, it’s a fun way to learn and mess around with websites safely.

Key Takeaways

Here’s a quick recap to wrap it all up:

Websites are made up of HTML (structure), CSS (style), and JavaScript (functionality).
HTML builds the skeleton of the site.
CSS dresses it up and makes it beautiful.
JavaScript enables users to interact, click, search, and perform various other actions.
You can inspect and play with real websites using browser developer tools. It’s safe, fun, and a great way to learn.

What’s Next?

Now that you understand how websites are built, it’s time to start making your own.

In the next few lessons, we’ll dive into HTML, CSS, and JavaScript (one step at a time)and show you how to bring your own ideas to life online. Whether you want to build a blog, a portfolio, or the next big thing on the web, it all starts here.

ICT Masterclass: Helping everyday people understand the web, one topic at a time.