A girl and a robot thinking together

Think together · Start with a story

The robot does not send the girl a picture of a web page. It sends the data the browser needs to assemble the page.

Break down the process

Follow the numbered steps, then explain them in your own words
  1. ServerProvides HTML
  2. BrowserBuilds the page structure
  3. ResourcesFetch styles and images
  4. Layout and drawingShow a readable page

A web page goes from server to screen through network transfer and local rendering.

HTML tells the browser what is a heading, paragraph, or image location. CSS affects size and layout. The browser calculates where elements go, then paints pixels on the screen.

Phones and computers have different screen widths. Responsive layouts can rearrange the same content to fit.

Your turn to try

If cards change from three columns to one on a phone, must the server rewrite the article?

Ready? Open to see the explanation

Usually not. CSS can rearrange the same content to fit the available width.

One idea to remember

A web page goes from server to screen through network transfer and local rendering.

Try covering the picture above and explaining each step to your family. If one step is hard to explain, revisit that card.