How the internet works! (1-minute videos)

Series of educational videos on the internet

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

One of Brian’s courses this semester showcases how the internet works end-to-end. We discussed how the average learner does not have knowledge of this information, and this is how we decided on this idea. With this project, we aim to give other learners valuable knowledge on the ins and outs of the internet. This would benefit their digital literacy and help inform digital decision-making processes. Through a Low Cognitive load series of 3 educational videos, I aim to teach 3 concepts: What is the internet? What happens when you enter a URL? How does your browser display a page? 

Final Product

Comprehension

Application

Awareness

---

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, middle school students who utilize 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.

For typical learners, the goal is to gain a clear grasp of how information travels across the internet and how their devices turn 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.

Demographically, this audience ranges from ages 12 to 16, with diverse educational backgrounds. Psychographically, they are tech consumers who appreciate clarity, storytelling, and visual explanations over dense text or code. Behaviourally, they engage regularly with video content platforms like YouTube, prefer short-form educational videos, 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 so that they can 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.
• Recognise 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)

We met as a group over Zoom to discuss how we wanted to approach the topic “How the Internet Works.” We decided to use a whiteboard-style video, as it is one of the most effective formats for engaging a young audience. This multimedia approach has been shown to enhance problem-solving and comprehension, which aligns well with our topic. We felt that a clear, problem-solving–oriented video would help viewers easily understand the key concepts we wanted to convey.

Each group member focused on one of the three main ideas related to “How the Internet Works”: Comprehension, Awareness, and Application. We each wrote a short script for our assigned topic, following a consistent concept and tone. To make the content more relatable and engaging, we decided to use characters from Nagarjun’s first comic strip: a curious young kid who doesn’t understand how the internet works and an insightful robot who explains the concepts to him. Our goal was to keep each script about a minute long, ensuring the videos were simple, engaging, and educational for a younger audience.

STORYBOARD OR SCRIPT:

• Develop a rough but readable storyboard (hand-drawn – take a picture and include) and script/plan (may be hand-written). (2–3 pages).
  • 3 videos, each member takes a main learning objective and finishes our own script.
  • Hand drawn robot and make it move around the whiteboard
  • The robot moves around and show each section

1. Comprehension Script (Evelyn Schoahs): 

[The scene starts with “How the Internet Works” displayed across the whiteboard. A character comes onto the whiteboard with a question mark bubble above his head and asks a question.]

Kid:
Hey Cyber, how does my tablet work? How am I able to play all my games and search up whatever I want?

Cyber:
Great question, kid! Your tablet uses something called the internet. Think of the Internet as a giant web that connects millions of computers all around the world!

Kid:
So, my tablet is part of that web? Like what Spider-Man uses?

Cyber:
Exactly! Your tablet is called a client. It asks for information, like when you click on a video or search for a game.

Kid:
And who gives my tablet that information?

Cyber:
That’s where servers come in! Servers are super-powerful computers that store websites, videos, and data. When your tablet asks for something, the server sends it back through the network.

Kid:
So, the Internet is like a delivery system for data? 

Cyber:
Yes! The network is like the road that carries data between clients and servers. Together, they help people share information, play games, and even talk across the world!

Kid:
Ah okay! SO the Internet’s like Santa, but make it computers!

Cyber
You got it, kid! That’s the internet!

[Scene closes with the kid looking at his tablet and a graphic of servers, clients, data, and networks connecting behind him]

2.  Application Script – Arjun 

Kid:
Ugh, Cyber, how does my browser actually show a webpage? It looks like magic!

Cyber:
Not magic, just teamwork between three key players: HTML, CSS, and JavaScript!

Kid:
Teamwork? What do they each do?

Cyber:
Think of HTML as the builder. It creates the structure, the text, images, and buttons. Like the skeleton of your webpage.

[Cut to animation of a plain web page appearing.]

Cyber:
Then comes CSS, the artist! It paints everything, colors, fonts, and layout, to make the page look awesome.

[Show colors and design fading in.]

Kid:
Okay, builder and artist. What about JavaScript?

Cyber:
Ah, the magician! JavaScript makes things move and react. When you click a button, scroll, or play a video, that’s JavaScript at work.

[Show button animation or interactive menu opening.]

Kid:
So my browser reads all three?

Cyber:
Exactly! The browser interprets their code and blends them into the final page you see. Builder, artist, magician, all working together!

Kid (grinning):
That’s so cool! My browser’s like a stage crew behind the scenes.

Cyber (winks):
You got it! Webpages aren’t magic, they’re teamwork in action!

[End with cheerful music and the webpage fully loaded.]

3. Awareness script – Brian

[Scene opens with “What happens when you type in a URL?”, a kid types www.google.com into a browser]

Kid:

Cyber, what happens when I type in a website’s name?

Cyber:

It’s just like a letter! There is something called the DNS server, think of it like your friendly local post office worker, your browser would then ask the DNS server where the website lives, the DNS server provides this address and some common addresses to avoid.

Kid:

So the DNS server gives the browser the address?

Cyber:

Exactly! The browser would then create a request, this is the letter, with the website’s address and a little postcard asking, “Hey! Can I see your page?”.

[A little postcard with the message “Hey! Can I see your page?” appears and goes into an envelope with the website’s address; this flies to a building titled “Server”]

Cyber:

Of course, any mail exchanges would be pretty boring if they were 1-sided. So the server sends a package back; this is the response. The server packages up HTML, CSS, and JavaScript into a package and sends it to your browser.

[3 sheets of paper with the titles: HTML, CSS, and JavaScript go into a small package with the browser’s address, this flies back to the Kid’s browser]

Kid:

Oh! The page I see is from the package!

Cyber:

Exactly! Every click is a collaboration effort – your browser asks, the server answers, and together they bring the web to life!

[Scene ends with the browser creating the website out of HTML, CSS, and JavaScript]

PRINCIPLES APPLIED:

• Comprehension: Using the coherence principle, I made sure to keep the script simple and to the point in hopes of reducing cognitive load. I used the idea of a tablet because for kids today, this seems to be a very relevant topic, and something they would be able to easily picture, which pertains to the Pre-training Principle. My goal with this video is to use a simple explanation for what the internet is, including its purpose and main components: servers, clients, data, and networks, to engage the learned attention with the information in the video. 
• Application:
  • Signaling Principle: Key terms are highlighted in the dialogue and visuals to guide learners’ attention to the most important concepts.
  • Contiguity Principle: Visuals appear at the same time as the corresponding explanations, reinforcing understanding through simultaneous presentation.
  • Personalization Principle: The dialogue between Cyber and the Kid uses a friendly, conversational tone to make the learning experience more engaging and relatable.
  • Modality Principle: Spoken narration is paired with visuals so learners can process information through both auditory and visual channels.
• Awareness:
  • Cohere Principle: Each Script focused on 1 topic, there are no off-topic or unrelated visuals, and each line and animation directly supports the comprehension process.
  • Segmenting Principle: Each explanation is divided into a separate step and paired with a short animation before moving on.
  • Pretraining: Each key term is introduced using a metaphor or familiar language before explaining its interactions.

Important Note: Complete drafts of Phases 1 and 2 before starting your prototype.

Create and Share the Prototype

• We brainstormed and created the above script as our prototype.

PEER FEEDBACK:

For the Awareness section, feedback from peers highlighted the relatability, approachability, and the fun aspects of having a young protagonist, allowing for complex concepts to be explained with ease. Peers also highlighted how easy the content was to follow, even for someone with no knowledge of the DNS server. There were some additional actionable comments: include a short recap or overview at the end of the video to reinforce the main concepts and improve learning retention; mention that DNS can also be used to filter unsafe or unwanted websites, connecting the topic to online safety and digital literacy; strengthen the link between script and visuals to make the learning flow more intuitive and cohesive

For the comprehension section, this is the feedback we received from our peers: ‘This is a super cool idea.’ How the internet works is something you may not often think about, but given the current state of technology, it is something we should be aware of. I also enjoyed how you added metaphors in the script to relate to the reader more. This relates to the personalization principle very well. The way the videos are split up makes sense as it uses the segmenting principle, so the viewer can build on knowledge of previous videos. One suggestion would be to define some more of the terms  (ex, CSS) as the view in the age group most likely does not understand what those terms mean, which will make it harder to comprehend the bigger picture. Myers’ framework explains that pretraining is important for learners as it helps them grasp and understand content better; however, I am good at showing if this principle was applied in your work.. This can be done by defining terms. A possible recommendation to change up the style to avoid redundancy would be to make the kid ask reflective prompts like “What do you think happens before a website loads?” or “Where do you think your data travels?. This can be used for generative learning and active learning principles because self-questioning increases engagement and encourages learners to organize information (From Zik).
|

For the application section, one of the benefits highlighted was the good understanding we had of the audience, which allowed us to create effective videos to translate complex internet topics into approachable stories; they also felt that the conversation between the Kid and the character Cyber helped make it more approachable. We were also told that the conversation dynamic also reflects Mayer’s personalization and modality principles. The team was also told that the main area for improvement would be to add captions for difficult words, use prompts and questions to make the learners think and recollect information, and provide a recap at the end of the video.

Reflect and Refine

TEAM REFLECTION:

The team found that collaborative processes and constant reviewing/iterating over each other worked really well. Each member was assigned to take charge of a video and align their topic with an initial meeting, allowing for asynchronous collaboration while working on their video independently, while still being aligned on the topic. We should have had more meetings to make sure all members are aligned on the deadline and topic, and set more soft deadlines so the team is aligned on outstanding items. More organization since this is the first time the team is working together.

For the comprehension video, it was recommended to define the terms we used. Instead of overwhelming the viewers, we decided to keep the terms simple enough for anyone to understand. We made sure to mix up the visuals to avoid redundancy, as Zik advised. For the Awareness video, I included a summary at the end, expanded on additional DNS explanation, and made sure the characters align in concept and art style, decreasing cognitive load on readers. These are suggested by the peer review process. For the awareness video, we utilized Gemini to create a series of pictures and videos of each character. We drafted each character on paper and then uploaded them to Gemini with the prompt to generate images of each character in different poses, while adding a prompt to make sure the art style aligns. We would then use a video editing software to record a voice-over and align these images together according to the written script. This combined method of ‘real’ and generated media allowed AI to be used as an accelerator for expediting our workload, making these images and animations manually would have taken 3-10 times the time we spent using Gemini.

 Figure 1: Gemini-generated images of the characters

Figure 2: Character drafts on paper

Strengths of this type of multimedia:

• Lessen cognitive load through a more streamlined approach to content digestion, audio and visual, allowing for easier content digestion and more emphasis on storytelling methods

Limitations of this type of multimedia:

• More time-consuming, as editing and voice-over took significantly more time than comic-making
• Heavily dependent on art style for cognitive load, simplistic art style assists in lessening cognitive load, but this is dependent on the creator’s skills

For the application video, we used Gemini to create a mock-up of the characters and used simple animation and speech bubbles to convey the message. We also used a short AI-generated video clip that shows the working of JavaScript on a webpage. Once we had the characters and speech bubbles animated, we had to add a voice-over and fine tune the video (example, removing noise from the voice-over). We think the video covered all the bases and we mostly stuck to the script from the storyboard prototype due to the time limit. To improve the video, I would add a recap at the end as the feedback suggested. It was quite disappointing that some of the backgrounds and effects that we had planned during the prototype phase did not make it to the final video due to the fact that I am not an animator and this was my first time making educational videos. One of the main issues was the duration of the video, as it went over 2 minutes. To address it, we had to use the script from the prototype and adjust the pacing. Overall, the main strength of this type of multimedia is that it conveys a message a lot better than a comic does, but it comes at the cost of being more demanding in terms of time and skill. The video could be greatly improved if the team members had experience with animation and video editing. 

For the application video, Gemini was used to create the characters’ props. The prompts used were:

• Create an image of the character Cyber, who is a robot that teaches kids how networks and the internet works. Make it a 2d, flat animated, neon green background.
• Can you create a picture of a schoolkid in the same animation style?
• Create a laptop with a webpage loaded, similar animated style, bright neon background

For the backgrounds, we used Google’s ImageFX and the prompts were:

• Create a classroom. Flat 2d animation style.
• Create a basic webpage with HTML.
• Create a basic webpage with CSS. 

For the JavaScript video, we used Gemini again with the prompt:

• Generate a 5 second video that shows a simple login page button click animation that leads to another webpage.

In terms of biases, the Gemini might be influenced by euro-centric character design, since the kid is portrayed as having light skin with brown hair. He is also dressed in western modern clothing like shorts and a T-shirt. There isn’t any bias on the robot Cyber for the application video. While it is interesting to see the kind of character Gemini generates while given a simple prompt with no instruction about the race or dressing, since these factors are unrelated to the topic the video is talking about, the team decided to disregard it.

INDIVIDUAL REFLECTIONS:

• Evelyn Schoahs: For the comprehension video, I used stop motion on a whiteboard to demonstrate the “whiteboard method.” I incorporated realistic characters and simple examples to make the explanation clear and easy to follow. Although I find producing online media challenging, and this video was no exception, I made a strong effort to apply the theories we’ve learned throughout the course. I also focused on using ideas that people could easily relate to in their everyday lives. I hope this video is beneficial to the learning experience!
• Nagarjun Anand: For the application video, I used 2d characters and used simple animations and speech bubbles along with a voiceover to educate the learner about how web browsers read webpages. I was able to improve on the prototype based on the feedback by providing captions on the videos. I also tried to adjust my pacing and maintain the fun and conversational tone to incorporate the theories learned in the course. Despite the challenges I faced with figuring out how to create the video, I was able to complete the task with ideas and support from my teammates. 
• Brian Pham: I contributed to each writing section by providing a skeleton with content specific to the awareness video, my teammates were able to iterate with their own video’s content. We all went through a peer- edit process and confirmed the content is ready for submission. For the awareness video, I used Gemini and Davinci Resolve to edit AI-generated content into a coherent video. While recording voice-over using the MacOS built in recorder. I reflected upon the feedback I received from my peers and teammates, and proceeded to iterate.. I also contributed in keeping the team on track through reminders and updates throughout the process. The team was amazing in communication and would update each other with their blockers and also assist whenever possible. I don’t have any suggestions for improvements as the team worked together almost perfectly!

References

Google. (2025). Gemini (October 22 version) [Large language model]. Retrieved from [Google’s Gemini]