Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

How a Website Works

Have you ever wondered what’s “under the hood” of a website? To your browser, a website is just a set of instructions that tell it what to show on the screen.

The Conversation: Client and Server

Before the code even gets to your computer, there is a quick conversation. Your computer is the Client (the one asking for something), and the computer where the website lives is the Server (the one providing the service).

Imagine you are at a restaurant:

  1. The Request: You (the Client) ask the waiter for a menu. This is like typing a website address into your browser.
  2. The Delivery: The waiter (the internet connection) goes to the kitchen (the Server) and brings back the menu (the website code).

The Three Musketeers of Web Code

Almost every website you visit is built using three main languages. Each one has a very special job.

1. HTML: The Skeleton

HTML (HyperText Markup Language) is the most important part. It holds everything together and gives the website its structure. Think of HTML like the skeleton of a person. It tells the browser, “This is a heading,” or “This is a paragraph,” or “Put this picture here.”

2. CSS: The Clothes

If HTML is the skeleton, then CSS (Cascading Style Sheets) is like the clothes and makeup. CSS tells the browser how everything should look—what colors to use, what fonts to show, and how big the images should be. It can even change how something looks when you hover your mouse over it! Without CSS, every website would look very plain and boring!

3. JavaScript: The Brain

JavaScript is what makes a website do things. If HTML is the skeleton and CSS is the clothes, JavaScript is the brain and muscles. It handles things like:

  • Pop-up messages.
  • Buttons that change when you click them.
  • Games that run right in your browser.
  • Image galleries that slide.

Putting it All Together

When you visit a website, the server sends a mix of HTML, CSS, and JavaScript to your browser. Your browser then reads all those instructions and builds the page you see!

Did you know?

  • View Source: You can see the code of any website yourself! Just right-click on a page and select “View Page Source” to see the HTML code.
  • The First Browser: The first-ever web browser was also called “WorldWideWeb,” and it was both a browser and an editor!
  • A Universal Language: HTML is a universal language, meaning it works the same way on any computer, anywhere in the world!

Check Your Knowledge

  1. In the “Client-Server” conversation, which one is your computer?
  2. What is HTML used for?
  3. Which language would you use if you wanted to make a button change color when a mouse hovers over it?
  4. What is the “Brain” of the website that makes it interactive and allows for things like games or pop-ups?
  5. Why do we need CSS if HTML already puts the text and pictures on the page?
  6. How can you see the code of a website in your own browser?