Brtest Tutorial

How the Web Works

Before we start coding, it's important to understand what happens behind the scenes when you visit a website. When you type a web address (like www.w3schools.com) and press Enter, your browser, the internet, and a web server all work together to display the page.

Note: Learning how the web works will help you understand what your code actually does when you build a website.

Clients and Servers

Every website needs two main parts:

Client: The web browser (like Chrome, Edge, or Firefox) that requests and displays web pages.
Server: A computer that stores and serves the website�s files (HTML, CSS, JavaScript, images, etc.).

Example

Client-server communication:

Browser (Client) → sends HTTP request → Web Server
Web Server → sends HTML, CSS, and JS → Browser
Browser → displays the page to the user

Tip: The word HTTP stands for HyperText Transfer Protocol � the set of rules that makes this communication work.

What Happens When You Visit a Website

You type a web address (URL) into your browser.
The browser contacts a DNS server to find the website�s IP address.
The browser sends an HTTP request to that server.
The server finds the requested page and sends back HTML, CSS, and JavaScript files.
Your browser reads those files and renders the web page on screen.

Example

1. You type: https://example.com
2. Browser → Server: "Give me index.html"
3. Server → Browser: Sends HTML, CSS, and JS files
4. Browser → Displays the page to you!

HTTP vs HTTPS

When you visit a site that starts with https://, the �S� means the connection is secure and encrypted. This protects your information while it travels between your computer and the website�s server.

Example

http://example.com → Not encrypted
https://example.com → Encrypted and secure

Tip: Always use HTTPS for your own websites � it�s required by most browsers for modern features like geolocation or service workers.

View Source: See the Code Behind Any Page

Every web page you visit is made of HTML, CSS, and JavaScript. You can view this code directly in your browser.

Right-click anywhere on a page.
Select View Page Source or Inspect.
You will see the underlying HTML that structures the page.

Example

Try viewing the source of this simple page:

<!DOCTYPE html>
<html>
<head><title>View Source Demo</title></head>
<body>
<h1>Welcome to My Page</h1>
<p>Right-click and select "View Page Source" to see this code.</p>
</body>
</html>

Try it Yourself »