Web Development Basics

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).

• 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.

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.

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.

• 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.

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.

Every HTTP response from a server includes a status code to indicate the result of the request.

• 2xx (Success): The request was successfully received, understood, and accepted. (e.g., 200 OK, 201 Created).
• 3xx (Redirection): Further action needs to be taken in order to complete the request. (e.g., 301 Moved Permanently).
• 4xx (Client Error): The request contains bad syntax or cannot be fulfilled due to a client error. (e.g., 400 Bad Request, 401 Unauthorized, 404 Not Found).
• 5xx (Server Error): The server failed to fulfill a valid request. (e.g., 500 Internal Server Error).

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

Authentication Mechanisms:

• 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.

• Tokens / JWT (Stateless): A modern method commonly used with REST APIs. The user logs in, and the server generates an encrypted JSON Web Token (JWT). For subsequent requests, the client manually attaches this Token. The server does not need to remember sessions in memory; it simply verifies the signature.

• 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").