The evolution of the web has passed through distinct phases:

Web 1.0 (1990s) – Read-only Web

• Static web pages with HTML, mostly informational
• Users could only view text and basic images
• Little to no interaction
• Served as a digital library where users consumed information but could not contribute

Web 2.0 (2000s) – Interactive Web

• Interactive websites and web apps emerged (social media, e-commerce)
• Users began creating content, sharing information, and interacting with dynamic platforms
• Focus on user-generated content and social networking

Web 3.0 (2010s–present) – Intelligent Web

• AI-driven, decentralized, and highly interactive web applications
• The web became smarter, more personalized
• Powered by technologies like AI, blockchain, and automation

This progression shows how web applications have transformed from simple information-delivery systems to complex platforms supporting commerce, communication, and sophisticated services.

(a) Static Web Applications

A static web application displays fixed content to all users and does not change unless the developer manually updates it. The pages are built using HTML, CSS, and sometimes JavaScript.

Characteristics:

• Content is pre-written in HTML
• No interactivity beyond links and basic navigation
• Faster loading because no server-side processing is needed
• No database or server-side scripting

Advantages:

• Easy to develop and maintain
• Works well on low-bandwidth connections
• More secure because there is no database
• Low hosting cost

Examples: Personal portfolios, company "About Us" pages, school brochures, informational websites for schools or government institutions

(b) Dynamic Web Applications

A dynamic web application displays different content to users depending on their actions, preferences, or data stored in a database. They use server-side languages like PHP, Python, or Node.js along with databases.

Characteristics:

• Content changes based on user input, preferences, or actions
• Uses server-side languages and databases
• Can handle user logins, online shopping, data submission

Advantages:

• Highly interactive and personalized
• Can handle large amounts of data and users efficiently
• Allows real-time updates and dynamic content
• Supports complex functionalities like authentication and payments

Examples: Facebook (displays posts depending on friends and activity), Gmail (shows personalized emails), YouTube, e-learning platforms

(c) Single Page Applications (SPA)

A single page application loads only one main web page and then updates its content dynamically as the user interacts with it, instead of loading new pages from the server each time.

Characteristics:

• Uses JavaScript frameworks like React, Angular, or Vue.js
• Only data and parts of the page are updated, not the whole page
• Reduces server load and improves user experience

Advantages:

• Fast and responsive
• Works like a native app in a browser
• Provides smoother navigation as pages do not reload
• Delivers dynamic updates in real time

Examples: Gmail (inbox updates without refreshing), Google Maps (map updates without reloading)

(d) Progressive Web Applications (PWA)

A progressive web application combines the best features of both websites and mobile apps. It works through a browser but can also be installed on a device like a mobile app.

Characteristics:

• Can send push notifications
• Works even with poor or no Internet connection (using service workers)
• Lightweight compared to native apps
• Automatically update themselves

Advantages:

• Cross-platform (runs on web, mobile, tablet)
• Lower development cost compared to native apps
• Can work offline using cached resources
• Offers fast loading and smooth performance

Examples: Twitter Lite, Pinterest PWA

(e) E-commerce Web Applications

These are web applications designed for online buying and selling, with features like shopping carts, payment gateways, and product catalogues.

Characteristics:

• Integrates payment systems and order management
• Dynamic product listings and user accounts
• Uses APIs for payments or shipping services
• Supports real-time inventory updates
• Provides personalized recommendations

Examples: Amazon, Jumia (popular in Africa)

Microservices Architecture: In modern e-commerce, applications are broken into smaller independent pieces called microservices (e.g., Payment, Inventory, Cart). They run independently and communicate via APIs, making the application more stable and easier to update.

Informational websites emphasize content presentation, while web applications emphasize user interaction and task execution, operating more like traditional software programs delivered through a browser.

HTML tags are the basic building blocks used to create and structure web pages.

Common HTML Tags:

Example: A simple HTML page demonstrating tags:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with a <a href="https://example.com">link</a>.</p>
    <img src="photo.jpg" alt="A photo">
</body>
</html>

An API (Application Programming Interface) is a set of rules that allows different software components to exchange information. In web development, APIs enable a front-end application to send requests to a server and receive responses over the Internet.

How APIs Work: The Restaurant Analogy

• Client (User/Web App): The customer placing an order
• API: The waiter who takes the order to the kitchen
• Server/Service: The kitchen preparing the food
• Response: The prepared food returned to the customer

The client sends a request to the API, the API passes it to the server, and the server sends the response back through the API.

Example: Weather Application

A weather web application uses a weather service API instead of managing weather data directly. The application sends a request for current weather in a specific location, and the API returns data in JSON or XML format, which the application then displays to the user.

Roles of APIs in Web Applications

1. Access external services – e.g., Google Maps API for location
2. Enable system integration – e.g., payment gateways in e-commerce
3. Simplify development – using existing services instead of building from scratch
4. Support real-time data – fetching live information like weather, prices, news

Common Data Formats

• JSON (JavaScript Object Notation): Lightweight, human-readable, commonly used in modern web applications
• XML (Extensible Markup Language): More verbose, used in older or enterprise systems

Testing an API

When you visit an API URL in your browser (e.g., https://catfact.ninja/fact), you receive data directly—not a webpage. The response looks like:

{
  "fact": "Cats have five toes on their front paws but only four on the back.",
  "length": 72
}

This demonstrates how APIs enable different applications to talk to each other and share information.

In Tanzania, understanding web applications is essential for small business owners and entrepreneurs. For example, a Tanzanian student developing a web application for a local duka (shop) in Dar es Salaam could create an e-commerce web app using a public API to display real-time prices of goods from different suppliers. This would help the shop owner compare prices and make better purchasing decisions, while also allowing customers to browse products online—skills directly applicable to the growing digital economy in Tanzania where platforms like Jumia and local delivery services are expanding rapidly.