Computer Science Basics for Beginners

🌐 How Web Applications Work

Have you ever wondered what happens when you open a website or use an online tool like Google Docs? This chapter explains how web applications work — including the roles of frontend, backend, servers, databases, and the internet itself.

🧱 Basic Structure of a Web Application

• Frontend (Client-Side): What users see and interact with — HTML, CSS, JavaScript.
• Backend (Server-Side): Handles logic, database access, and user authentication.
• Database: Stores data like user profiles, posts, orders, etc.
• Web Server: Delivers frontend + backend responses to users via the internet.

💡 A Real-Life Analogy

Imagine you're ordering food through an app:

• The app interface = frontend
• The kitchen & chef = backend
• The menu database = data store
• The waiter who brings food = server sending response

🔁 Client-Server Communication

1. User types a URL and hits enter
2. Browser sends an HTTP request to the web server
3. Server processes the request using backend code
4. If needed, server talks to the database
5. Server sends back HTML/CSS/JS files (or JSON data)
6. Browser renders the content and shows it to the user

🌍 Frontend Technologies

• HTML: Structure of the page
• CSS: Styling and layout
• JavaScript: Interactivity (buttons, animations, etc.)
• Frontend Frameworks: React, Angular, Vue.js

🛠 Backend Technologies

• Languages: Python, Node.js, Java, PHP, Ruby
• Frameworks: Django, Express.js, Spring Boot, Laravel
• Responsibilities: Handle logic, requests, APIs, and connect to databases

🗃️ Databases

Databases store persistent data that survives even after closing the site.

• Relational: MySQL, PostgreSQL
• NoSQL: MongoDB, Firebase

🔐 Security in Web Apps

• HTTPS protocol for secure connection
• Authentication (login systems)
• Authorization (user roles and access control)
• Data encryption and validation

📡 APIs (Application Programming Interfaces)

Web apps often talk to other services using APIs. Example: Using Google Maps in your app.

// Sample API Call (JavaScript)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
  

📝 Practice Questions

1. What is the difference between frontend and backend?
2. Explain what happens when you type a URL and press Enter.
3. List 3 backend frameworks and their languages.
4. What role does a database play in a web app?

✅ Coming Next

In the next chapter, we’ll compare Web vs Mobile vs Desktop Apps — understanding where each type of app is used and why.