Webbo3 Data Analysis Bootcamp · Web Development Module · Lesson 1

How the Web Works: Browsers, HTTP, Clients, Servers, and the Roles of HTML, CSS, and JavaScript

A foundational lesson covering the mechanics of web requests, the client-server model, the three core web technologies, and how to set up VS Code with the right extensions for web development.

Before you write your first line of HTML, you need to understand what actually happens when you type a web address into your browser and press Enter. Most beginners skip this and jump straight into tags and styles, then spend months confused about why their code behaves differently on their laptop versus their phone, or why a page that looks fine locally breaks when uploaded to a server. This lesson fixes that at the root. You will learn the exact sequence of events that happens between your browser and a server, what HTTP is and why it matters, the difference between a client and a server, and what HTML, CSS, and JavaScript each do and do not do. Then you will install the tool you will use for the rest of this module: Visual Studio Code, configured with the extensions that professional developers rely on in 2026.

1. How Browsers Request Pages: The Full Sequence

When you type a URL like https://www.google.com into your browser and press Enter, a precise sequence of events unfolds in milliseconds. Understanding this sequence is not academic trivia. It explains why websites load slowly, why some pages fail entirely, and why security warnings appear. Every web developer, including data analysts who build dashboards and reports, needs to know this flow.

Step one: the URL is parsed. The browser breaks the URL into its components. https is the protocol. www.google.com is the domain name. The slash after the domain is the path, which requests the root page. If you type a longer URL like https://example.com/products/shoes, the path is /products/shoes. The browser needs each piece to know where to send the request and what to ask for.

Step two: DNS lookup. The browser does not know where www.google.com actually lives. It knows a human-friendly name, but computers need numerical addresses. The Domain Name System, DNS, is a global distributed directory that translates domain names into IP addresses, unique numerical identifiers like 142.250.180.78. Your browser first checks its own cache, then your operating system's cache, then your router, and finally queries a DNS server provided by your internet service provider. If the DNS server does not know the answer, it asks higher-level servers until the IP address is found. This entire process usually takes under fifty milliseconds. If DNS fails, you see a "server not found" error even though the website might be perfectly healthy.

Step three: the TCP connection. Once the browser has the IP address, it opens a TCP connection to the server. TCP, Transmission Control Protocol, is the reliable delivery system of the internet. It guarantees that every packet of data sent arrives intact and in order. The connection is made to a specific port: port 80 for standard HTTP, or port 443 for secure HTTPS. For HTTPS, an additional TLS handshake encrypts the connection before any data is exchanged. This is what keeps your passwords and credit card numbers safe from eavesdropping.

Step four: the HTTP request is sent. The browser constructs a formal text message called an HTTP request and sends it through the TCP connection. A simple request looks like this:

GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0
Accept: text/html

GET is the method, meaning the browser wants to retrieve a resource. The slash is the path, requesting the root page. HTTP/1.1 is the protocol version. The Host header tells the server which domain is being requested, because one server can host multiple websites. The User-Agent identifies the browser type, and Accept tells the server what formats the browser can handle. The server reads this message and decides what to send back.

Step five: the server processes the request. The web server software, such as Apache, Nginx, or Microsoft IIS, running on the physical or virtual machine at that IP address, receives the HTTP request. It reads the path and headers, locates the requested file or runs the necessary code to generate the response, and prepares an HTTP response. For a static website, the server simply finds the HTML file on disk. For a dynamic website, the server might run a script, query a database, and assemble the page on the fly before responding.

Step six: the HTTP response is returned. The server sends back a response that starts with a status code, followed by headers, followed by the actual content:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 3482


...

The status code 200 means success. 404 means the requested resource was not found. 500 means the server encountered an internal error. The Content-Type header tells the browser that the response body contains HTML text. The Content-Length tells the browser how many bytes to expect. The blank line separates the headers from the body, which contains the actual HTML document.

Step seven: the browser renders the page. The browser receives the HTML and begins parsing it. As it reads the HTML, it discovers references to additional resources: CSS files for styling, JavaScript files for interactivity, images, fonts, and videos. For each additional resource, the browser sends separate HTTP requests, reusing the same TCP connection when possible. The browser builds the Document Object Model, DOM, from the HTML, applies the CSS to create the render tree, executes JavaScript, and finally paints the visible page on your screen. This entire process, from keystroke to rendered page, typically completes in under a second for well-optimized websites.

2. HTTP Basics: Methods, Status Codes, and Headers

HTTP, HyperText Transfer Protocol, is the language that browsers and servers use to communicate. It is a text-based protocol, meaning you can read raw HTTP messages with a text editor. It is also stateless, meaning each request is independent. The server does not remember your previous request. This simplicity is what made the web scalable, but it also means developers must use cookies, tokens, or sessions to maintain state across multiple requests.

HTTP methods, or verbs. The method in an HTTP request tells the server what action the client wants to perform. The five most common methods are:

GET retrieves a resource. When you type a URL, click a link, or load an image, your browser sends a GET request. GET requests should not change server data. They are read-only operations.

POST submits data to the server. When you fill out a form and click submit, the browser sends a POST request with your form data in the request body. POST requests create new resources or trigger actions.

PUT updates an existing resource entirely. If you edit a profile and replace every field, PUT sends the complete updated resource.

PATCH updates part of an existing resource. If you only change your email address while leaving everything else untouched, PATCH sends just the changed field.

DELETE removes a resource. When you delete an account or remove a file, the browser sends a DELETE request.

These five methods correspond to the CRUD operations: Create, Read, Update, Delete. GET is read. POST is create. PUT and PATCH are update. DELETE is delete. Understanding this mapping is essential when you later work with APIs to fetch data for your analysis dashboards.

Common status codes. The server responds with a three-digit status code that tells the browser what happened:

200 OK means the request succeeded and the response contains the requested data. This is what you want to see.

301 Moved Permanently and 302 Found mean the resource has moved to a new URL. The browser automatically follows the redirect to the new location.

400 Bad Request means the server could not understand the request, usually because of malformed syntax or missing parameters.

401 Unauthorized means authentication is required but was not provided or was invalid.

403 Forbidden means the server understood the request but refuses to fulfill it, usually due to insufficient permissions.

404 Not Found means the server could not find the requested resource. This is the most famous error on the web.

500 Internal Server Error means something went wrong on the server side, such as a crashed script or database connection failure.

When you build data dashboards that pull from web APIs, you will write code that checks these status codes. A 200 means the data arrived safely. A 404 means the endpoint does not exist. A 500 means the server is down and you should retry later. Handling these codes correctly is what separates robust applications from fragile ones.

3. Client vs Server: Who Does What?

The terms client and server describe roles in a conversation, not specific pieces of hardware. Your laptop can be a client when you browse a website, and a server when you run a local development environment. Understanding the distinction is critical because HTML, CSS, and JavaScript run on the client, while databases and server-side scripts run on the server.

The client is the requester. In web development, the client is almost always a web browser: Chrome, Firefox, Safari, Edge, or Opera. The browser sends HTTP requests, receives responses, parses HTML, applies CSS, executes JavaScript, and renders the final visual page. The client is responsible for the user interface, user interactions, and everything the user sees and touches. All the code that runs in the browser is called client-side code or front-end code.

The server is the responder. The server is a computer, physical or virtual, running server software that listens for incoming HTTP requests and sends back responses. The server stores the website files, runs application logic, queries databases, and handles authentication. The server is responsible for data integrity, security, business rules, and serving the right content to the right user. Code that runs on the server is called server-side code or back-end code.

The client-server model in practice. When you log into a banking website, the client, your browser, displays the login form and collects your username and password. When you click submit, the client sends that data to the server via a POST request. The server checks the credentials against its database, generates a session token, and sends it back to the client. The client stores the token in a cookie and includes it in every subsequent request so the server knows who you are. The server never trusts the client blindly. It validates every request. This separation of concerns, presentation on the client, logic and data on the server, is the architectural foundation of the modern web.

As a data analyst, you will often work on both sides. You might build a dashboard in the browser using HTML, CSS, and JavaScript, while the data feeding that dashboard comes from a server running Python, Node.js, or SQL queries against a database. Understanding where each piece lives and how they communicate over HTTP is what makes you a full-stack analyst rather than just someone who knows Excel.

4. What HTML, CSS, and JavaScript Each Do

Every web page is built from three distinct technologies that serve three distinct purposes. They are not competitors or alternatives. They are collaborators. A web page without HTML is nothing. A web page without CSS is ugly. A web page without JavaScript is static. Understanding the specific role of each prevents you from using the wrong tool for the wrong job.

HTML: HyperText Markup Language. The structure. HTML is not a programming language. It is a markup language. It defines the structure and meaning of content on a web page. HTML uses tags, elements enclosed in angle brackets, to label pieces of content. A paragraph is wrapped in p tags. A heading is wrapped in h1 tags. An image is inserted with an img tag. A link is created with an a tag. HTML answers the question: what is this content? It provides the skeleton. Without HTML, a browser has nothing to display. Every web page starts as an HTML document, and every other technology builds on top of it. HTML is semantic, meaning the tags carry meaning about the content. A nav tag indicates navigation links. An article tag indicates a self-contained piece of content. Using the correct semantic tags improves accessibility for screen readers and search engine optimization.

CSS: Cascading Style Sheets. The presentation. CSS is not a programming language either. It is a style sheet language. It controls how HTML elements look: their colors, fonts, sizes, spacing, positioning, and layout. CSS answers the question: how does this content look? You can change the background color of a page, make a button rounded, center a div, create a responsive grid, or animate a hover effect. All of this is done with CSS rules that select HTML elements and apply declarations to them. The cascade in CSS refers to how styles are inherited and overridden. A style applied to the body element cascades down to all child elements unless a more specific rule overrides it. CSS is what makes a web page look professional instead of like a plain text document from 1993.

The behavior. JavaScript is a programming language. It is the only programming language that runs natively in every web browser. JavaScript answers the question: what does this content do? It handles user interactions: clicking a button, submitting a form, opening a dropdown menu, validating input, fetching data from a server, updating the page without reloading it, and creating complex animations. JavaScript can read and modify the HTML structure through the DOM, and it can read and modify CSS styles dynamically. Without JavaScript, a web page is a static document. With JavaScript, it becomes an application. When you build a data dashboard that updates in real time as you select a date range, that interactivity is powered by JavaScript.

The separation of concerns. Professional web development keeps these three layers separate. HTML handles structure. CSS handles presentation. JavaScript handles behavior. You do not use HTML to center text. You use CSS. You do not use CSS to validate a form. You use JavaScript. You do not use JavaScript to define a page heading. You use HTML. This separation makes code easier to maintain, debug, and scale. When a designer wants to change the color scheme, they edit CSS without touching the HTML or JavaScript. When a developer wants to add a new feature, they edit JavaScript without rewriting the page structure. This modularity is why teams of dozens can work on the same website without stepping on each other.

As a data analyst building web-based reports, you will use HTML to structure your data tables and charts, CSS to make them visually appealing and mobile-friendly, and JavaScript to add interactivity like sorting, filtering, and dynamic updates. All three are necessary. None can replace the others.

5. Installing VS Code and Essential Extensions

Visual Studio Code is the most widely used code editor in the world. It is free, open-source, cross-platform, and extensible through thousands of extensions. For web development, you need the right extensions installed to write clean code, catch errors early, and preview your work instantly. Here is how to set it up properly.

Step one: download and install VS Code. Go to code.visualstudio.com and download the installer for your operating system: Windows, macOS, or Linux. Run the installer with default settings. On macOS, drag the VS Code icon into your Applications folder. On Linux, follow the distribution-specific instructions on the download page. When you first open VS Code, you will see a welcome screen with options to open a folder, clone a repository, or create a new file.

Step two: open the Extensions view. Press Ctrl+Shift+X on Windows and Linux, or Cmd+Shift+X on macOS. The Extensions sidebar opens, showing a search bar at the top and a list of installed extensions below. You can also click the four-square icon in the left sidebar.

Step three: install the essential extensions. Search for each extension by name in the search bar and click Install. Here are the extensions you need for this bootcamp, listed by priority:

Live Server by Ritwick Dey. This extension launches a local development server with live reload. Right-click any HTML file and select "Open with Live Server." Your default browser opens the page, and every time you save a file, the browser refreshes automatically. This removes the friction of manually refreshing after every change. It is indispensable for learning HTML and CSS.

Prettier by Prettier. This is an opinionated code formatter that automatically formats your HTML, CSS, and JavaScript on save. It removes all style debates: tabs versus spaces, semicolons or not, single quotes or double quotes. Configure it once and never think about formatting again. After installing, open VS Code settings with Ctrl+comma, search for "format on save," and check the box. Then search for "default formatter" and select Prettier. This ensures every file you save is automatically formatted.

ESLint by Microsoft. This extension integrates the ESLint JavaScript linter into VS Code. It catches syntax errors, unused variables, and potential bugs before you run your code. While you are learning, it will flag missing semicolons, undefined variables, and common mistakes in real time. Pair it with Prettier for a complete formatting and linting workflow.

Auto Rename Tag by Jun Han. When you rename an HTML opening tag, this extension automatically renames the matching closing tag. It saves time and prevents mismatched tags, which are a common source of rendering bugs.

HTML CSS Support by ecmel. This extension provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace. When you type class=" in HTML, it suggests existing CSS classes from your stylesheets, reducing typos and speeding up development.

Path Intellisense by Christian Kohler. This extension autocompletes file paths as you type them in HTML src attributes, CSS url values, and JavaScript import statements. No more guessing whether an image lives in images/ or assets/images/.

GitLens by GitKraken. This extension supercharges the built-in Git capabilities of VS Code. It shows who last modified each line of code, when, and why. It displays commit histories inline and lets you compare versions without leaving the editor. Even as a beginner, understanding how your code evolves over time is a professional habit.

GitHub Copilot by GitHub. This is an AI-powered code completion tool. As you type, it suggests entire lines or blocks of code based on context. For beginners, it accelerates learning by showing you patterns and syntax you might not know yet. For professionals, it reduces boilerplate coding. The free tier is sufficient for this bootcamp.

Configuring your workspace settings. After installing these extensions, create a folder on your computer for this bootcamp, for example webbo3-web-dev. Open it in VS Code with File → Open Folder. Inside that folder, create a subfolder called .vscode and inside it a file called settings.json. Paste the following configuration:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "liveServer.settings.port": 5500,
  "liveServer.settings.CustomBrowser": "chrome"
}

This file ensures that every project in this folder uses the same formatting rules, tab size, and Live Server port. When you open this folder in VS Code, these settings apply automatically. This is how professional teams ensure consistency across developers. Commit this file to version control so every team member gets the same setup.

Using AI to Move Faster in Web Development Setup

Setting up a development environment is not glamorous, but it is necessary. AI can help you get it right faster, troubleshoot errors, and understand what each piece does without reading through dozens of documentation pages.

1. Use Copilot to explain error messages in plain English.
When you install an extension and something goes wrong, for example Live Server fails to launch or Prettier formats your code strangely, paste the error message into Copilot and ask: "I am a beginner. Explain this VS Code error in simple terms and tell me exactly how to fix it." AI will translate technical jargon into actionable steps, often saving you an hour of forum searching.

2. Generate your settings.json with natural language.
Instead of memorizing every VS Code setting name, describe what you want: "Create a VS Code settings.json file for web development that formats on save with Prettier, uses two spaces for indentation, launches Live Server on port 5500, and enables ESLint for JavaScript." Copilot will generate the correct JSON syntax. Copy it into your .vscode/settings.json file and verify it works. This is faster than hunting through the settings UI.

3. Ask AI to explain the difference between technologies.
If you are confused about why you need both HTML and CSS, or what the difference is between a GET and POST request, ask Copilot: "Explain the difference between HTML and CSS using a house-building analogy, and explain why JavaScript is like the electricity in the house." Analogies generated by AI are often clearer than textbook definitions because they connect abstract concepts to familiar experiences.

4. Use AI to scaffold your first project structure.
When you are ready to start coding, ask Copilot: "Create a basic HTML file structure with linked CSS and JavaScript files, a navigation bar, a main content area, and a footer. Include comments explaining what each section does." You will get a complete starter template that you can modify and learn from, rather than staring at a blank file wondering where to begin.

5. Verify every AI suggestion before trusting it.
AI can generate incorrect file paths, outdated extension names, or settings that conflict with each other. Always test what AI suggests in a small, isolated project before applying it to your main work. If Live Server opens on the wrong port, or Prettier formats in a way you dislike, adjust the settings manually and learn what each option controls. AI accelerates your setup, but you must own the configuration.

A habit worth building from this lesson onward: every time you encounter a new tool, extension, or workflow, ask yourself whether AI can explain it, configure it, or troubleshoot it faster than manual documentation. The answer is usually yes for setup and configuration, but no for understanding the underlying concepts. Use AI for speed, but always verify the fundamentals yourself.

Next lesson: HTML document structure, common tags, and semantic markup.