MODULE 01 • ~5 Guided Learning Hours
Understanding the Web and Web Applications
Deconstruct how the modern web operates. Distinguish simple static websites from interactive web applications, understand the HTTP request-response cycle between browsers and web servers, and understand how domains, DNS, and cloud hosts connect users to your application.
🎯 Learning Outcomes for Module 1
- Explain the fundamental difference between a static website and an interactive web application.
- Trace the path of an HTTP request from a browser through DNS to a web server and back.
- Distinguish the responsibilities of the front end (client) from the back end (server).
- Explain what AI coding agents can do and why web fundamentals are required to direct and evaluate them.
How the Web Works: The Request-Response Cycle
When a person opens a web browser and enters a web address, a specific sequence of network events takes place:
1. DNS Resolution: The browser queries a DNS server to translate the hostname into an IP address.
2. Connection Establishment: The browser opens an encrypted TCP/TLS handshake with the server on port 443 (HTTPS).
3. HTTP Request: The browser sends a structured request specifying the method (e.g. GET), target path, and request headers.
4. Server Processing: The remote server receives the request, evaluates routing rules, runs application logic, and prepares an HTTP response.
5. HTTP Response: The server returns status code (e.g. 200 OK) alongside payload data (HTML documents, CSS stylesheets, JavaScript files, images, or JSON data).
6. Client Rendering: The browser engine parses HTML to construct the DOM tree, downloads CSS to create the CSSOM, computes layouts, and paints pixels onto the user screen.
Websites vs. Web Applications
Understanding the spectrum between a website and a web application is critical for planning:
• Static Website: Primarily informational and read-only. Content is delivered as pre-written HTML pages that appear identically to all visitors (e.g. a company brochure or blog post).
• Web Application: Interactive and stateful. Users enter data, trigger workflows, create accounts, filter catalogues, book appointments, or save records to a database (e.g. an appointment scheduler or customer portal).
In this course, you will build an interactive web application, starting with foundational HTML and CSS, adding JavaScript interaction, and connecting to structured data.
The Role of AI Coding Agents: Why Fundamentals Matter
OpenAI Codex and Google Antigravity are powerful agentic coding assistants. However:
• They do not understand business context or user intentions unless clearly directed.
• They cannot test visual layout nuances or user accessibility without structured verification.
• They occasionally produce outdated syntax, redundant code, or security weaknesses.
As a developer, your job is not typing every semicolon manually; your job is architecting the plan, giving precise instructions, reviewing changes, understanding the generated code, and debugging issues when the agent makes mistakes.
📖 Essential Vocabulary for Module 1
Web ApplicationAn interactive software program running on a remote web server that users access through a browser, processing inputs and dynamically changing state.
Client (Front End)The user-facing portion of an application that runs directly in the browser (HTML, CSS, JavaScript).
Server (Back End)The remote computer that listens for HTTP requests, processes business logic, communicates with databases, and returns responses.
HTTP / HTTPSHypertext Transfer Protocol (Secure), the standardized set of communication rules browsers and web servers use to exchange data.
DNS (Domain Name System)The internet directory service that translates human-readable domain names (like truststack.academy) into numeric IP addresses.