How Websites Work

Have you ever wondered what happens when you type a website address like https://www.google.com into your browser and press Enter? Behind the scenes, a fascinating process takes place in seconds to deliver the webpage to your screen. We are going to break it down and see what happens before you see the results!

1. You Request a Website

When you enter a URL (Uniform Resource Locator), we are going to use https://www.example.com as an example, your browser sends a request to a web server which is a powerful computer that stores website files.

2. The Server Responds

The server processes your request and sends back the necessary files, the files associated with the domain example.com. It looks into other file servers, web servers, databases(which stores data) and serves you with the request.

HTML → The structure of the page. This could be text, headings, links.

CSS → The styling. These include colors, fonts, layout.

JavaScript → The interactivity – animations, forms, dynamic content.

3. Your Browser Builds the Page

Your browser, which could be Chrome, Firefox, Safari, receives these files and renders them into the visual webpage you see and that you can interact with.

4. Behind the Scenes: DNS & Hosting

DNS (Domain Name System) → Translates the domain name https://www.example.com into an IP address (like 93.184.216.34) so computers can locate the server. Every domain name on the internet has an IP address which is used to locate and identify it. e.g. the domain example.com translates to the IP address 96.7.128.198.

Web Hosting → The server where the website’s files are stored and delivered from.

5. Dynamic vs. Static Websites

Static Websites → These are simple, pre-built pages. A perfect example could be a resume.

Dynamic Websites → Interactive, database-driven. Their content can change e.g facebook, amazon, tiktok among others.

7. Every Time You Click or Scroll…

Your browser may send new requests for example loading more posts on Instagram.

JavaScript updates the page without reloading like live chat or notifications.

6. How Code Turns into a Website

Html – You can think of it like the backbone of the web pages, it lays the structure of the website.

<!– HTML (Structure) –>

<h1>Welcome to My Site!</h1>

<p>This is a paragraph.</p>

css – adds styling to the site I.e colors, fonts, borders, layouts, margins etc.

javascript – adds interactivity to the web pages.

Your browser combines these to create the final page.

7. Every Time You Click or Scroll…

Your browser may send new requests for example loading more posts on Instagram.

JavaScript updates the page without reloading like live chat or notifications.

Summary:

You (Client-browser) → Request → Server → Sends Files → Browser → Renders Website