Skip to main content

Basic Concepts in Web App

Introduction​

Web applications are software programs that run on web browsers, allowing users to interact with them over the internet. Unlike traditional desktop applications, web apps don’t require installation—they’re accessed via a URL. This document breaks down the basic components and concepts behind web applications in simple terms, helping non-technical people understand how they work.

Key Concepts in Web Applications​

1. Network​

The network connects your device (computer, tablet, or smartphone) to the internet, enabling communication between your browser and web servers.

  • How It Works:
    1. When you type a URL (e.g., www.example.com) in your browser, it sends a request over the internet.
    2. This request travels through the network to reach a server where the website's data is stored.
    3. The server processes the request and sends back the data (HTML, CSS, JavaScript) to your browser.
    4. Your browser displays the content on your screen.

2. Browser​

A browser (e.g., Chrome, Firefox, Safari) is software that interprets the data received from servers and displays it as a user-friendly webpage.

  • Key Functions:
    • Displays web pages using HTML, CSS, and JavaScript.
    • Manages user interactions, like clicking buttons or filling out forms.
    • Caches data (stores temporary files) for faster loading next time.

3. HTML (Hypertext Markup Language)​

HTML is the backbone of any web page. It defines the structure and content of the page.

  • Think of HTML as: The skeleton of a webpage.
  • What It Does:
    • Organizes content into elements like headings, paragraphs, images, and links.
    • Example: 
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph of text.</p>
      <img src="example.jpg" alt="An example image">

4. CSS (Cascading Style Sheets)​

CSS is what makes web pages visually appealing. It styles the HTML content by defining colors, fonts, layouts, and more.

  • Think of CSS as: The clothing and decoration for the skeleton (HTML).
  • What It Does:
    • Makes the website look good and readable.
    • Ensures consistent design across pages.
    • Example: 
      h1 {
        color: blue;
        font-size: 24px;
      }
      p {
        line-height: 1.5;
      }

5. JavaScript (JS)​

JavaScript adds interactivity and functionality to web pages, making them dynamic.

  • Think of JavaScript as: The brain of the webpage.
  • What It Does:
    • Allows users to interact with elements (e.g., clicking buttons, filling out forms).
    • Updates content dynamically without refreshing the page.
    • Example: 
      document.getElementById('button').addEventListener('click', function() {
        alert('Button clicked!');
      });

6. API (Application Programming Interface)​

APIs enable web apps to communicate with servers or other applications to exchange data.

  • Think of APIs as: Waiters in a restaurant who take your order to the kitchen (server) and bring back the food (data).
  • What It Does:
    • Fetches data from servers (e.g., product details from an online store).
    • Sends user input to servers (e.g., submitting a contact form).
    • Example: A weather app fetching real-time temperature from a weather API.

How a Web Application Works (For Non-Tech People)​

  1. User Sends a Request:

    • You type a URL (e.g., www.example.com) or click a link in your browser.

  2. The Browser Sends the Request:

    • The browser sends a request through the internet to the server that hosts the website.

  3. Server Responds:

    • The server processes the request and sends back files (HTML, CSS, JavaScript, and sometimes data from APIs).

  4. Browser Interprets the Response:

    • The browser reads the HTML to display content, uses CSS to style it, and executes JavaScript to add interactivity.

  5. User Interacts with the App:

    • Clicking a button or filling a form triggers JavaScript, which may fetch or send data through APIs, updating the page dynamically without reloading.

Real-Life Example: Online Shopping Web App​

1. Loading the Website​

  • You type www.onlinestore.com in the browser.
  • The server sends the homepage (HTML for structure, CSS for style, JavaScript for functionality).

2. Browsing Products​

  • JavaScript enables you to scroll through products dynamically without refreshing the page.

3. Adding Items to Cart​

  • Clicking “Add to Cart” triggers JavaScript to update the cart.
  • The browser communicates with the server (via API) to store your cart items.

4. Checking Out​

  • You enter your address and payment details.
  • JavaScript validates the form.
  • The browser sends the details to the server using an API.
  • The server processes the payment and sends back confirmation.

Summary​

Web apps are interactive websites powered by the combination of HTML (structure), CSS (design), and JavaScript (functionality). They communicate with servers through networks and often use APIs for data exchange. Understanding these basic concepts helps non-technical people grasp how web apps work behind the scenes.