How a website reaches a browser

Understand the request before writing the page

A website is a collection of resources delivered through requests and responses. A browser asks for a document, interprets its HTML, requests referenced stylesheets and images, and builds an interface. JavaScript may request more information after the first page appears. This sequence matters because a visually simple page can still require many slow downloads. A learner using mobile data outside a large city experiences the combined cost of every resource, not just the size of your main file.

A URL identifies where a resource is available. In https://example.test/services.html, the scheme is HTTPS, the host is example.test and the path is /services.html. A query string can carry search parameters; a fragment points to a location within a document. DNS helps resolve a host name to a network destination. HTTPS protects information in transit and authenticates the server through certificates. It does not prove that the business behind a page is trustworthy or make insecure application code safe.

Separate three responsibilities from the beginning. HTML gives content meaning, CSS controls presentation and JavaScript adds behaviour. A useful business page should communicate its essential service information even when a script fails. This approach is called progressive enhancement. It makes debugging easier because you can ask whether a failure concerns missing content, styling or interaction.

Worked example: a small service page

Create a folder containing index.html and styles.css. Treat the business as a fictional classroom example. Do not invent testimonials, operating history or paying customers. Put the following document in index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Repair service | Classroom example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Understand your repair options</h1>
    <p>A fictional workshop website used for learning.</p>
    <a href="services.html">Read the service details</a>
  </main>
</body>
</html>

The doctype selects standards-oriented rendering. The language helps assistive technology choose pronunciation. UTF-8 supports names and text from many languages. The viewport declaration helps the layout match the device width. The title identifies the page in browser tabs and history; it is not a substitute for the visible heading. The stylesheet URL is relative to the HTML document, so moving one file without the other can break the relationship.

Open the page in a browser and inspect the document using developer tools. Compare the source file with the elements panel. The browser constructs a document object model, or DOM, and may repair malformed markup. What you typed and what the browser displays therefore need not be identical. A page that looks acceptable can still contain structural mistakes.

Practice: inspect the delivery chain

Create services.html with a meaningful title, one heading and two service descriptions. Link back to index.html. Give one service a clearly labelled illustrative price of TZS 25,000. Add a short stylesheet that changes the font and spacing. If a local development server is available, use it to view the pages and inspect the Network panel. Otherwise start with local files and repeat the network inspection when the server is introduced later.

Record the requested document, the stylesheet request, their status codes and their content types. Deliberately rename styles.css, reload and identify the failed request before restoring it. A missing file normally produces a 404 response from a server, whereas a local-file failure may be presented differently. The investigation is more valuable than memorising a single browser message.

Self-check and expected outcome

Your two pages should remain understandable without their stylesheet. The service link should work in both directions, and the title should change between pages. A request for HTML normally receives an HTML representation; the CSS request is a separate operation. A 200 response means the server reports success for that request, not that the page is accessible or logically correct. HTTPS protects transport, while input validation and authorisation remain application responsibilities.

A common mistake is copying a full file-system path into a link. Another computer will not have the same folders. Use project-relative paths, consistent lower-case filenames and an intentional directory structure. Keep a short observation log explaining the broken stylesheet and the evidence that identified it. This becomes the first entry in your debugging portfolio.