Web Development Basics

Web Development

Web Development is the process of building, creating, and maintaining websites and web applications that run online within a browser. It is generally divided into two main areas: Frontend (what the user sees and interacts with) and Backend (the server, database, and logic that powers the application behind the scenes).

1. The Client-Server Architecture

The internet operates on a fundamental model where a Client (your web browser, like Chrome or Safari, running on your laptop or phone) requests information or services from a Server (a powerful, remote computer that stores the website's files, databases, and logic).

How the Web Works

  • 1. The Request: The user types a URL (e.g., www.example.com). The browser (Client) first asks a DNS server to translate that URL into an IP address. It then sends an HTTP Request across the internet to the specific Server located at that IP address.
  • 2. The Processing: The Server receives the HTTP request, processes any necessary backend logic (like querying a database for the user's profile data), and prepares the response.
  • 3. The Response: The Server sends back an HTTP Response to the Client. This response contains a status code (like 200 OK or 404 Not Found) and the payload (the HTML, CSS, JavaScript, or JSON data needed).
  • 4. The Rendering: The Client's browser receives the payload, parses the code, and visually renders the website on the screen.
Key Takeaways
  • Web development relies fundamentally on the Client-Server model, where browsers request data and servers process and respond.
  • The Client handles the visual rendering (Frontend), while the Server handles logic, databases, and security (Backend).

2. Frontend Development (The Client Side)

Frontend development focuses on everything the user directly interacts with in their browser. It is built using three core technologies: HTML, CSS, and JavaScript.

2.1 HTML (HyperText Markup Language)

HTML provides the Structure or skeleton of the webpage. It uses "tags" to define semantic elements like headings (<h1>), paragraphs (<p>), links (<a>), and images (<img>).

2.2 CSS (Cascading Style Sheets)

CSS provides the Styling or visual presentation. It controls layout, colors, typography, spacing, and responsive design (using Media Queries to make the site look good on both small mobile phones and large desktop monitors).

2.3 JavaScript (JS)

JavaScript provides the Interactivity and logic. It allows the page to respond to user actions (like clicking a button, validating a form, or fetching new data) dynamically, without needing to reload the entire page from the server.

2.4 The DOM (Document Object Model)

When a browser loads an HTML document, it parses the tags and creates a hierarchical, tree-like structure in memory called the DOM. JavaScript uses the DOM API to dynamically find, change, add, or delete HTML elements and CSS styles "on the fly" after the initial page load.

DOM Manipulation Example

For example, JavaScript can find an element using document.getElementById("alertBox"), modify its text content to show an error message, and change its background color to red when a user types an invalid password, all by manipulating the DOM tree.
Key Takeaways
  • HTML structures the content, CSS styles the visual presentation, and JavaScript adds dynamic interactivity.
  • The DOM (Document Object Model) is the browser's internal tree representation of the HTML, which JavaScript manipulates to update the page visually without full reloads.

3. Backend Development (The Server Side)

Backend development involves the server hardware, the database, and the application logic that powers the website behind the scenes, ensuring data is processed securely and efficiently.

Backend Components

  • Server Environment / Framework: Software running on the server that listens for incoming HTTP requests and routes them to the correct logic. Examples include Node.js (Express), Python (Django/Flask), Java (Spring Boot), PHP (Laravel), or Ruby on Rails.
  • Database: Systems used to permanently store application state, user accounts, products, posts, etc. Can be Relational (PostgreSQL, MySQL) or Non-Relational (MongoDB).
  • Application Logic (Business Rules): The custom code that acts as the bridge between the database and the frontend, processing calculations, verifying passwords, and enforcing security checks before sending data back.

3.1 REST APIs (Representational State Transfer)

A REST API is a standard architectural style for designing networked applications. It provides a structured way for the Frontend (Client) to communicate with the Backend (Server) using standard HTTP methods to manipulate data. Modern web apps (Single Page Applications like React or Angular) and mobile apps rely heavily on REST APIs. Data is almost universally transmitted in JSON (JavaScript Object Notation) format.

Standard HTTP Methods (CRUD Mapping)

  • GET (Read): Retrieve data from the server (e.g., getting a list of products). GET requests should never modify data.
  • POST (Create): Send new data to the server to create a new resource (e.g., submitting a user registration form).
  • PUT / PATCH (Update): Modify existing data on the server (e.g., updating a user's shipping address).
  • DELETE (Delete): Remove a specific resource from the server.
Key Takeaways
  • The Backend consists of the server runtime, the database, and the business logic connecting them.
  • REST APIs utilize standard HTTP methods (GET, POST, PUT, DELETE) to implement CRUD operations over the network.
  • JSON is the standard, lightweight text format used to transmit structured data between the client and server.

4. Authentication and Security Basics

Web applications must securely verify who a user is (Authentication) and what specific actions they are allowed to perform (Authorization).

4.1 Authentication Mechanisms

Common Authentication Types

  • Session/Cookies (Stateful): The traditional method. The user logs in, and the server creates a "session" record in its memory. It then sends a small text file (a Cookie containing a Session ID) to the user's browser. The browser automatically sends this cookie back with every future request, proving the user is logged in. The server must constantly check its memory to validate the ID.
  • Tokens / JWT (Stateless): A modern method commonly used with REST APIs and mobile apps. The user logs in, and the server generates an encrypted JSON Web Token (JWT) containing the user's info. The server sends the Token to the client, which stores it locally. For subsequent requests, the client manually attaches this Token to the HTTP header. The server does not need to remember sessions in memory; it simply verifies the Token's cryptographic signature. Highly scalable.
  • OAuth / SSO (Single Sign-On): A protocol allowing users to grant a third-party application access to their information without sharing their password (e.g., "Login with Google" or "Login with Facebook").
Key Takeaways
  • Authentication verifies identity (who you are), while Authorization determines access rights (what you can do).
  • Traditional web apps use Server-side Sessions and automatic Browser Cookies.
  • Modern REST APIs use stateless Tokens (like JWTs) for better scalability and cross-platform (mobile/web) compatibility.

Summary

Key Takeaways
  • Web development relies on the Client-Server Architecture communicating via HTTP requests and responses.
  • Frontend is built with HTML (Structure), CSS (Presentation/Style), and JavaScript (Interactivity via DOM manipulation).
  • Backend manages databases, server frameworks (like Node or Python), and core business logic.
  • REST APIs use standard HTTP methods (GET, POST, PUT, DELETE) to transfer JSON data between the frontend and backend.
  • Authentication mechanisms (Stateful Sessions/Cookies vs. Stateless Tokens/JWTs) securely manage user identities and access control across the web.
PreviousDatabases - Examples & Applications
NextWeb Development Basics - Examples & Applications