How the internet works! (webpages!)

Series of educational webpages on the internet

Updated: October 10^th, 2025
Authors: Brian Pham, Evelyn Schoahs, Nagarjun Anand

Our second Challenge was the creation of a series of 3 educational videos on how the internet works. We wanted to adapt these from educational videos to Khan Academy style web-pages on the same topic. This project aims to provide learners with valuable knowledge on the inner workings of the internet, enhancing their digital literacy and informing their digital decision-making. This series of educational websites, designed with a low cognitive load, will cover three core concepts:

• What is the internet?
• What happens when you enter a URL?
• How does your browser display a page?

---

DESCRIBE THE CHALLENGE

Many everyday internet users rely on the web for nearly every aspect of their lives—communication, entertainment, learning, and work—yet few truly understand how the internet actually works. This lack of foundational understanding limits their ability to use technology confidently, critically, and safely.

---

CONTEXT AND AUDIENCE

The primary audience for this project is everyday learners, specifically middle school students (ages 12-16) who use the internet daily but have never been taught what goes on “behind the screen.” These learners are comfortable with technology on a surface level (e.g., browsing, streaming, using apps) but may find technical explanations overwhelming or overly abstract.

Our goal for typical learners is to help them gain a clear grasp of how information travels across the internet and how their devices transform that data into something visual and interactive. They are motivated by curiosity and a desire to understand the technology they depend on every day.

Extreme learners include those with very little technical background, who might be intimidated by jargon, and highly curious users who want to understand internet processes in greater depth. For both groups, a visual and narrative-based explanation reduces cognitive load and promotes understanding through simple analogies and real-life examples.

Psychographically, this audience comprises tech consumers who appreciate clarity, storytelling, and visual explanations over dense text or code. Behaviorally, they regularly engage with video content platforms like YouTube, prefer short-form educational content, and are drawn to content that is visually engaging and easy to digest.

---

POINT-OF-VIEW (POV) STATEMENT

An internet user needs to understand how the internet works end-to-end to build digital literacy, appreciate the invisible systems that power online life, and navigate the web more confidently and safely.

---

LEARNING OBJECTIVES

Primary Learning Objectives:

1. Comprehension: Learners will be able to describe what the internet is, including its purpose and main components (servers, clients, data, and networks). (Evelyn)
2. Awareness: Learners will understand what happens when they type a URL into a browser, following the journey of a request and response in simple, visual terms. (Brain)
3. Application: Learners will recognise how their browser interprets and displays a webpage, linking it to the basic roles of HTML, CSS, and JavaScript. (Arjun)

Sub-objectives:

• Identify what the internet is made of (devices, servers, and protocols).
• Understand how data travels through the network.
• Recognize how websites are delivered and displayed in a browser.
• Connect familiar digital actions (like clicking a link or loading a page) to the underlying systems that make them possible.

Secret (Meta-Cognitive) Learning Objectives:

• Build curiosity and confidence in understanding everyday technology.
• Develop digital literacy — the ability to think critically about how the web functions.
• Encourage lifelong learning about technology by making complex topics accessible and engaging.

Plan (Ideate, Sketch, Elaborate)

Our plan will move through a few clear steps from start to finish. First, we will meet as a group to agree on the tone, visual style, and structure of the webpages. During this stage, we will also choose the platform we will use and create a simple style guide to keep our colors, fonts, and layout consistent. Each group member will then be responsible for creating the webpage that matches the topic they worked on earlier.

Next, we will write the content for each webpage. We will focus on making explanations short, clear, and easy to understand, using simple examples and visuals like diagrams or icons. We will also create quiz questions for each page that reinforce the main ideas.

After the content is complete, we will begin building the webpages. Each webpage will include four main parts: the main lesson content, a notes section, a short quiz, and, for the final page, a small code editor for trying basic HTML. We will break ideas into small steps and pair them with visuals to support learning.

Finally, we will test the webpages with peers or younger learners to make sure everything is clear and engaging. After receiving feedback, we will make any necessary changes, check readability and layout, and ensure all interactive parts work properly.

PRINCIPLES APPLIED:

Each website in this series will be structured to facilitate understanding and engagement, drawing on established educational principles:

• Comprehension (Website 1: What is the Internet?):
  • Coherence Principle: Content will be simple and to the point, minimizing cognitive load.
  • Pre-training Principle: Concepts will be introduced using familiar analogies (e.g., a tablet for kids today) to help learners easily picture and relate to the information.
  • Engagement: Simple explanations of the internet’s purpose and main components (servers, clients, data, and networks) will be used to capture and maintain learner attention.
• Application (Website 2: What Happens When You Enter a URL?):
  • Signaling Principle: Key terms will be highlighted in text and visuals to guide learners’ attention to the most important concepts.
  • Contiguity Principle: Visuals will appear alongside corresponding explanations, reinforcing understanding through simultaneous presentation.
  • Personalization Principle: A friendly, conversational tone will be used to make the learning experience more engaging and relatable.
  • Modality Principle: Textual explanations will be paired with visuals, allowing learners to process information through both visual and reading channels.
• Awareness (Website 3: How Does Your Browser Display a Page?):
  • Coherence Principle: Each website will focus on a single topic, avoiding off-topic or unrelated visuals. Every line of text and animation will directly support the comprehension process.
  • Segmenting Principle: Each explanation will be divided into separate, manageable steps, paired with short animations or interactive elements before moving on.
  • Pre-training Principle: Each key term will be introduced using a metaphor or familiar language before explaining its interactions in detail.

Create and Share the Prototype

Application 

The webpage will have 3 sections, a video and text section for the main learning content. It will include text about the topic of webpages and how they work and will include the video that we made for Challenge B. Next, there will be a notes section where the user can write notes about what they learnt for learning and future reference purposes. Next, there will be a quiz section where we will test the recall using questions based on the material they just learned. Finally, once they feel comfortable with the concepts, there is a section with a mini code editor that can be used to test out snippets of HTML code and get hands-on experience. 

Comprehension 

Similar to the other pages, to create the webpage focused on Comprehension, I plan on organizing the page in a simple, step-by-step explanation. I will start with an introduction that explains the internet in everyday language. Then, I will introduce the key components one at a time: servers, clients, data, and networks. Each concept would be explained using short sentences and paired with a simple visual or icon to reduce cognitive load and keep the explanation clear, using some of our past drawings and designs. I will focus on key vocabulary and use a visual representation next to the to support comprehension through the contiguity principle. Finally, I would include a short quiz and a notes section at the bottom of the page so learners can review what they’ve learned and practice recalling the information.

Awareness 

Page 1: “When You Type a URL”

Text Content

Title: What Happens When You Type a URL?

Intro Section:
Ever wondered what happens when you type a website name, like www.google.com, into your browser? Let’s find out!

Main Story:
When you type in a URL, your computer doesn’t actually know where that website lives. It first asks a helper called the DNS server — like your local post office!

The DNS server looks up the real address (called an IP address) of the website and tells your browser where to find it. This is how your browser knows where to send your request.

[Video Placeholder]

[Illustration/Animation Placeholder]

Quiz (3 questions)

1. What does the DNS server do?
   a) It stores all web pages
   b) It translates website names to IP addresses
   c) It builds websites
   
2. The DNS server is like a…
   a) Post office worker
   b) Delivery truck
   c) Stamp
   
3. True or False: The browser already knows every website’s address.
   False 

Page 2: “The Browser Sends a Request”

Text Content

Title: Sending the Web’s Mail: The Request

Intro Section:
Once your browser knows where to go, it needs to send a request to the website’s server. Think of this like mailing a letter.

Main Story:
Your browser writes a short message:

“Hey! Can I see your page?”

It places this message into an envelope with the server’s address (the IP address) and sends it off through the internet.

This message travels quickly through cables, routers, and networks until it reaches the right server — just like sending a letter across town!

[Video Placeholder]

[Illustration/Animation Placeholder]

Quiz (3 questions)

1. What does the browser send to the server?
   a) A request
   b) A package
   c) A virus
   
2. What is inside the browser’s request?
   a) HTML code
   b) A message saying “Hey! Can I see your page?”
   c) Images
   
3. True or False: The server sends the request first.
   → False 

Page 3: “The Server Responds”

Theme: How a web page appears on your screen

Text Content

Title:
The Server Replies: Building the Page

Intro Section:
Once the server receives your browser’s request, it prepares a response.

Main Story:
The server collects all the ingredients your browser needs:

• HTML for the structure
  
• CSS for the design
  
• JavaScript for interaction
  

It then sends these back in a little “package” through the internet to your browser.

Your browser opens the package, reads the files, and builds the webpage you see — right before your eyes!

Every click is a collaboration: the browser asks, the server answers, and together they bring the web to life.

[Video Placeholder]

[Illustration/Animation Placeholder]

Quiz (3 questions)

1. What does the server send back to the browser?
   a) HTML, CSS, and JavaScript
   b) Only HTML
   c) A screenshot
   
2. Which part makes the page interactive?
   a) HTML
   b) CSS
   c) JavaScript
   
3. True or False: The browser builds the page using what it receives from the server.
   → True