Challenge B: Videos

evelynschoahs

How the internet works! (1-minute videos)

Series of educational videos on the internet

Updated: October 10th, 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? 

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.

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

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]

    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.]

      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.

        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

        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 pre-written script. By following this method, we avoided biases by providing Gemini with pre-existing references for all images. 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.

        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

        FINAL RESULTS

        Self Reflection

        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 learns education experience!