General Assembly logo

Lab 1: Exploring the Web Ecosystem

Introduction

Every time you load a webpage, your browser performs a sophisticated sequence of operations: sending HTTP requests, downloading resources, parsing HTML/CSS/JS, constructing internal data structures like the DOM, and finally rendering pixels to the screen.

In this lab, you will peek behind the curtain of how the web works using browser DevTools. You will analyze how a real website loads and renders, inspect HTTP requests and responses, and observe how HTML is parsed and displayed. You will also use an AI assistant to explain key concepts along the way and produce a brief technical report summarizing your findings.

Learning Objectives

By the end of this lab, you will be able to:

  • Understand the end-to-end lifecycle of loading a webpage

  • Use Chrome or Firefox DevTools to inspect network requests

  • Identify HTTP request/response headers, status codes, and resource types

  • Observe how HTML is parsed into the DOM and how CSS affects rendering

  • Describe the differences between critical render path resources and optional ones

  • Use an AI assistant to clarify technical details

  • Write a concise technical report documenting insights from your investigation

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • A modern browser: Chrome, Firefox, or Edge

  • Basic understanding of HTML and HTTP

  • A text editor or Markdown editor (Notepad, VS Code, Google Docs, etc.)

Setup Instructions

Step 1 - Choose a Site to Investigate

Choose any individual page hosted at https://wikipedia.org

Step 2 - Open DevTools

Open your browser’s DevTools:

  • Windows/Linux: F12, Ctrl + Shift + I, or Right Click -> Inspect

  • Mac: Fn F12, Cmd + Option + I, or Right Click -> Inspect

You will use two main panels:

Network – to analyze HTTP traffic

Elements (or Inspector) – to explore DOM and CSS rendering

Lab Structure

This lab contains the following major sections:

  • Observing page load behavior

  • Investigating HTTP requests

  • Understanding HTML rendering

  • Using AI assistance

  • Writing your technical report

  • Each section includes tasks, questions, and space for notes you will later use in your report.

Exercise 1 — Observe Page Load Behavior

  • Open DevTools → Network panel

  • Check “Disable Cache” in the upper right of the panel

  • Reload the page (Ctrl/Cmd + R)

  • Observe the waterfall of requests

Tasks

  • Identify the first request made by the browser.

  • Note the main document’s status code.

  • Sort requests by Size—find the largest file.

  • Sort by Time—find the slowest file.

  • Identify images, scripts, stylesheets, fonts, and API calls.

Reflection Questions

  • Which resources load first? Why?

  • What surprised you about the number or type of network requests?

Exercise 2 — Inspect HTTP Requests & Responses (15 minutes)

Choose two network requests to inspect:

  • The main HTML document

  • A CSS or JS file

Tasks

For each request, record:

  • Request Method: (GET, POST, etc.)

  • Status Code: (200, 301, 404, …)

  • Content-Type

  • Important Request Headers

  • Important Response Headers

  • Size and time to load

Reflection Questions

  • What role does each header play?

  • How would the page behave differently if the request failed?

Exercise 3 — Explore How HTML Renders (15 minutes)

Open the Elements / Inspector panel.

Tasks

  • Hover over elements to see layout boxes (margin, border, padding).

  • Find an element whose styles are overridden or inherited.

  • Locate an element that is dynamically added by JavaScript (look in the DOM).

  • Edit a CSS rule in DevTools and observe changes immediately.

Reflection Questions

  • How does the DOM differ from the raw HTML source (found in the previous step)?

  • What happens when you disable a key CSS file in the Network panel (right click -> block URL)?

Exercise 4 — Use an AI Assistant

Tasks

  • Select an HTML element and a network request from the site. Using an AI assistant, ask what is happening in plain english.

  • Record short answers or summaries for your report.

Exercise 5 - Write a Technical Report

Create a 1–2 page report summarizing your investigation.

Your report should include:

1. Overview

  • A brief introduction stating which site you analyzed and what tools you used.

2. Page Load Observations

  • Number of network requests

  • Notable large or slow resources

  • Resource types (HTML, CSS, JS, images, fonts)

3. HTTP Analysis

  • Request/response header examples

  • Explanation of key fields (Status, Content-Type, Cache-Control)

  • Interesting findings (redirects, caching behavior, errors)

4. Rendering Insights

  • How HTML becomes the DOM

  • CSS interactions

  • Dynamic elements added by JavaScript

5. AI-Assisted Learning

  • Summary of answers the AI provided

  • Concepts clarified by the assistant

6. Conclusion

  • Your key takeaways from the lab.

  • How to Work Through the Lab

  • Follow each exercise in order.

  • Take screenshots if needed (optional).

  • Use the AI assistant for explanations—but write findings in your own words.

  • Use your notes to assemble your final report.

  • Tips for Success

  • Use the filter bar in the Network panel (e.g., img, js, css).

  • Use the Preview tab to examine HTML/JSON responses visually.

  • Look for differences between HTML source and DOM - this reveals JavaScript behavior.

  • When in doubt, ask an AI assistant to explain unclear concepts.