How the Web Works

A website is a set of files (HTML, CSS, JavaScript, images) delivered by a server to a browser over HTTP.

The three core languages​

Front end and back end​

• Front end (client): runs in the browser; HTML, CSS, JavaScript, frameworks (React, Vue).
• Back end (server): runs on a server; business logic, databases, authentication (Node.js, Python, Java).
• APIs connect them, usually JSON over HTTP.

From request to pixels​

1. The browser requests the HTML document.
2. It parses HTML into the DOM and discovers CSS, JS and images.
3. CSS is parsed into the CSSOM; DOM + CSSOM form the render tree.
4. The browser performs layout and paint.
5. JavaScript can change the DOM at any time, triggering more layout and paint.

Your first page​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My first page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, web!</h1>
    <script src="app.js" defer></script>
  </body>
</html>

Developer tools​

Press F12 (or right-click and choose Inspect) to open DevTools: Elements (DOM and CSS), Console (logs and errors), Network (requests), Performance and Lighthouse (audits).