Module
Module 3 of 6Lesson 2 of 2~13 min

From received code to displayed page

Lesson 2 of the module "What the browser and the server say to each other" in the course "Explain how a web product works, from browser to server".

Take this lesson: your first course is freeSee the full syllabus

Lesson objective

By the end of this lesson, you will be able to explain how the browser turns HTML, CSS and JavaScript into a displayed page, tell apart client-side, server-side and static rendering, and relate these choices to the Core Web Vitals.

Where it fits

What the browser and the server say to each other

What does an HTTP exchange contain, and how does the browser turn the response into a page?

Lessons in this module

  1. Reading a request and its response in the Network tab
  2. From received code to displayed page (this lesson)

What you will learn in the course

This lesson is part of the course Explain how a web product works, from browser to server

  • Describe the steps of a web request, from the typed address to the displayed page (URL, DNS resolution, encrypted connection, HTTP request and response, browser rendering).
  • Read an HTTP exchange in the browser's Network tab (method, URL, status code, headers, cookies, duration) and draw a first diagnosis from it.
  • Explain how responsibilities are split between browser, frontend, backend, API, database and third-party services, and place where a business rule must run.
  • Explain the role of a CDN and of caches (browser, CDN, server) and anticipate their effects on speed, data freshness and releases.
  • Tell apart local, preview, staging and production environments, and say what changes from one to another (configuration, data, secrets).
  • Place a symptom (slowness, blank page, error, stale data) in the right layer and ask the technical team precise questions.
  • Produce the annotated diagram of a request's journey through your own product and have it validated by a developer.

Related courses