Module 1: Web Foundations

How the Web Works

Before you write a single line of HTML, it helps to understand what actually happens when someone types an address into a browser and a page appears. This picture will guide every decision you make later: why files must be named carefully, why images should be small, why a page can look different on a phone, and why the code you write is only half of the story. You do not need to be an engineer to understand it. You only need a few clear ideas.

Clients, servers and the request-response cycle

The web is a conversation between two kinds of computers. A client is the device and program a person uses, usually a web browser such as Chrome, Firefox, Safari or Edge on a laptop or phone. A server is a computer that stores website files and sends them out when asked. Servers are usually in data centres, but any computer can act as one.

Every time you visit a page, the same cycle happens:

1. You type an address such as https://www.example.com/about.html or click a link.
2. The browser finds out which server holds that website (more on this below).
3. The browser sends a request to the server: "Please send me /about.html."
4. The server sends back a response: a status code (for example 200 for success or 404 for "not found") and the file itself.
5. The browser reads the HTML, notices that it also needs a stylesheet, some images and perhaps a script, and sends more requests for each of them.
6. When the files arrive, the browser assembles and draws (renders) the page on the screen.

The rules for this conversation are called HTTP (HyperText Transfer Protocol). HTTPS is the same thing with encryption, so that nobody between the browser and the server can read or change the data. Today you should expect every real website to use HTTPS.

Addresses: URLs, domains and DNS

A URL (Uniform Resource Locator) is the full address of one resource. Take this hypothetical example:

https://www.mamambogashop.co.ke/products/sukuma.html
|____| |______________________| |____________________|
scheme        domain                    path

The scheme says how to talk to the server (https). The domain is the human-friendly name of the website. The path points to a particular file or page on that site.

Computers on the internet actually find each other using numeric IP addresses. The Domain Name System (DNS) works like a phone book: the browser asks DNS "what is the address for mamambogashop.co.ke?" and receives a number it can connect to. This is why, when you buy a domain name, you also have to point it at your hosting provider.

The three languages of the front end

What the browser receives and displays is built from three languages, each with its own job:

This course covers HTML and CSS. With these two alone you can build complete, attractive, responsive websites. JavaScript is a natural next step once you are comfortable.

It is important to keep these concerns separate. HTML should describe what something is ("this is the main heading", "this is a list of prices"), while CSS decides how it looks. Mixing the two makes pages harder to change and harder for assistive technology to understand.

Static pages, hosting and the browser's role

The pages you build in this course are static: the server sends the same files to everybody. Many large sites generate their HTML on the fly using server languages such as PHP or Python, but the browser still receives plain HTML and CSS in the end. That is why these skills are the foundation for every kind of web work.

To publish a static site you need two things: a domain name (optional at first) and hosting, which is space on a server. While learning, you will simply open files from your own computer, which works perfectly without any server.

A worked example: loading a small business page

Imagine Wanjiku runs a tailoring shop in Nairobi and has a one-page website. When a customer opens it on a phone, the browser asks DNS for the server address, requests index.html, then sees lines in that file asking for style.css and logo.png. It requests both. If the logo file is a 5 MB photo, the customer on mobile data waits and pays for that data. If the stylesheet name in the HTML is spelled Style.css but the file is style.css, many servers will return 404 and the page will appear unstyled. Small details in your files directly affect the visitor's experience.

Common mistakes to avoid

• Thinking the page "lives" in the browser. The browser only displays copies of files that came from somewhere else.
• Using HTML to control appearance (for example, adding empty paragraphs for spacing). Use CSS for appearance.
• Ignoring file size. Every file is a separate request and download, which matters on slower mobile connections.
• Mixing capital and small letters in file names. Some servers treat About.html and about.html as different files. Use lowercase names with hyphens, such as about-us.html.