> Canonical URL: https://codingcat.dev/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools

# How the Web Works: DNS, HTTP/3, TLS & Browser DevTools | The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics) | CodingCat.dev Course

[🧶 The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)Section 1.1 · Lesson 1 of 4[Next Lesson →](/course/odin-web-development-foundations/lesson/semantic-html5-dom-tree-and-accessibility)

# How the Web Works: DNS, HTTP/3, TLS & Browser DevTools

![How the Web Works: DNS, HTTP/3, TLS & Browser DevTools Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f0899e4f86ef49b4d8da224734e91b2f7f6eda8f-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=D_k2o4jW4NQ&list=PLbWnTzpJdmjs)

## 1. The 15-Second Hook

Before writing a single line of HTML or JavaScript, every great engineer needs to understand what actually happens when you type a URL into your browser. Let's trace DNS, TLS, HTTP/3, and the browser rendering pipeline.

## 2. Architecture Mental Model (Visual Diagram)

On the left, treating the network as a black box leads to slow waterfall stalls. On the right, DNS resolves to the nearest Edge CDN over HTTP/3 and feeds HTML into the DOM and CSSOM render tree.

## 3. Show Me the Code (src/network-inspect.ts)

Copied! 🐾📄 src/network-inspect.tstypescript

```
export async function inspectResponseTiming(url: string) {
  const start = performance.now();
  const res = await fetch(url);
  return {
    status: res.status,
    cache: res.headers.get("cf-cache-status") ?? "DYNAMIC",
    durationMs: Math.round(performance.now() - start)
  };
}
```

In src/network-inspect.ts, inspectResponseTiming measures fetch duration with performance.now and inspects the cf-cache-status header.

## 4. Production Trade-Off Matrix

Comparing HTTP/3 and Edge CDN caching against uncached HTTP/1.1 requests, modern transport eliminates head-of-line blocking and cuts time to first byte dramatically.

## 5. Verdict & AJ Pro-Tip

> AJ Pro-Tip: Always check Disable Cache in the Chrome DevTools Network tab while developing so stale service workers or browser caches never hide real network latency.

Open the Chrome Network tab on every project you build. Subscribe to CodingCat.dev and let's dive into semantic HTML5 in Lesson 2.

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: The Odin Project 1: Web Development Foundations …✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics): How the Web Works: DNS, HTTP/3, TLS & Browser DevTools: start with Core Architecture & Implementation, implement The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics), and ship to production.AAA Contrast Verified[Course Outline](/course/odin-web-development-foundations)

## The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)

1/41

### Core Architecture & Implementation

- [1.1How the Web Works: DNS, HTTP/3, TLS & Browser DevTools▶](/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools)
- [1.2Semantic HTML5, Document Landmarks & the Accessibility Tree](/course/odin-web-development-foundations/lesson/semantic-html5-dom-tree-and-accessibility)
- [1.3CSS Box Model, Cascade Specificity & the Flexbox Layout Engine](/course/odin-web-development-foundations/lesson/css-box-model-cascade-and-flexbox-layout-engine)
- [1.4JavaScript Fundamentals: Functions, Array Methods & DOM Event Delegation](/course/odin-web-development-foundations/lesson/javascript-fundamentals-variables-functions-and-dom-events)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)