Module 01

Web Foundations

Before writing code, we must understand the ecosystem. This module breaks down how the internet works, the role of browsers, and the full stack architecture.

01 Introduction to the Web

Many people use "Internet" and "Web" interchangeably, but they are distinct concepts. The Internet is the massive physical infrastructure—the cables, routers, and satellites connecting computers globally. The World Wide Web (WWW) is a service built on top of this infrastructure, allowing documents to be linked via hyperlinks.

The Client-Server Model

Imagine a restaurant. You (the Client) sit at a table and order food. The waiter (the API/Request) takes your order to the kitchen (the Server). The kitchen prepares the food (Data) and the waiter brings it back to you. The web works exactly like this.

02 How Browsers Work

When you type google.com into your browser, a complex sequence of events occurs in milliseconds. Your browser sends a request to a DNS server (the phonebook of the internet) to find the IP address of the site, then requests files from that address.

The browser then receives three main types of files. Think of a human body:

HTML

The Skeleton

Provides structure and content.
CSS

The Skin & Clothes

Provides style, layout, and colors.
JavaScript

The Brain & Muscles

Provides logic and interactivity.
03 Web Architecture Basics

As a developer, you need to decide how your application is built. Broadly, websites fall into two categories:

  • Static Websites: Pre-written HTML files. Everyone sees the exact same content (e.g., a portfolio page).
  • Dynamic Websites: Content is generated on the fly by a server based on user data (e.g., your Facebook feed).

This course focuses on the Full Stack approach, where you will master both the Frontend (what users see) and the Backend (where data is stored and processed).

04 The Developer Mindset

Coding is not just about memorizing syntax; it's about problem-solving. Full Stack developers must be comfortable moving between big-picture architecture and tiny code details.

Your workflow will often look like this:

  1. Identify the problem.
  2. Break it down into small, manageable steps.
  3. Write code to solve one step at a time.
  4. Debug when things break (and they will!).
  5. Refactor to make the code cleaner.
05 External Learning Resources

We recommend watching these short videos to visualize the concepts discussed:

Module Summary

You now have a conceptual understanding of the web. You know that the browser is a tool that renders code sent by a server, and you understand the distinct roles of HTML, CSS, and JS. You are ready to start building.