Web Technologies

9 min read

The World Wide Web is the most influential information system in human history. CSS Computer Science candidates must understand its architecture, the technologies that build modern applications, and the security model that protects them.

World Wide Web

A global information space of interlinked documents and resources, accessed via the Internet using protocols such as HTTP/HTTPS, and identified by URIs (Uniform Resource Identifiers). Invented by Tim Berners-Lee at CERN in 1989.

Web architecture

Client-server model

Client — usually a web browser (Chrome, Firefox, Safari, Edge) or mobile app.
Server — software that listens for requests and returns responses (Apache, Nginx, IIS, Node.js).
Communication — over HTTP/HTTPS through TCP/IP.

Three-tier architecture

Presentation tier — UI in the browser.
Application tier — business logic on the server.
Data tier — database (RDBMS or NoSQL).

Modern systems may further split into many tiers — microservices, edge caches, CDNs.

HTTP — the protocol of the web

Request methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD.
Status codes:
- 1xx Informational
- 2xx Success (200 OK, 201 Created)
- 3xx Redirection (301 Moved Permanently, 302 Found)
- 4xx Client Error (400 Bad Request, 401 Unauthorised, 403 Forbidden, 404 Not Found)
- 5xx Server Error (500 Internal Server Error, 503 Service Unavailable)
HTTPS — HTTP over TLS, ensures confidentiality, integrity, server authentication.
HTTP/2 — multiplexed streams, header compression, server push.
HTTP/3 — built on QUIC over UDP.

Frontend technologies

HTML (HyperText Markup Language)

Structures content with tags. HTML5 added semantic tags (<article>, <nav>, <section>), audio/video, canvas, local storage.

CSS (Cascading Style Sheets)

Presentation language. CSS3 added Flexbox, Grid, animations, media queries (responsive design). Pre-processors: SASS, LESS. Frameworks: Bootstrap, Tailwind CSS.

JavaScript

Originally for browser scripting; now ubiquitous via Node.js on servers too. ECMAScript standard (ES6+) added arrow functions, classes, modules, async/await, destructuring.

Frontend frameworks

React (Meta) — component-based, virtual DOM.
Vue — progressive framework.
Angular (Google) — full-fledged MVC framework.
Svelte — compile-time framework.
Next.js / Nuxt — meta-frameworks for SSR/SSG.

Key Points

The DOM (Document Object Model) is a tree representation of an HTML page that JavaScript manipulates.
AJAX (Asynchronous JavaScript and XML) and modern fetch API allow web pages to communicate with servers without full reloads.
CORS (Cross-Origin Resource Sharing) governs which cross-origin requests browsers permit.
Cookies, localStorage, sessionStorage are client-side storage mechanisms.

Backend technologies

Server-side languages

Node.js / JavaScript — same language on client and server.
Python — Django, Flask, FastAPI.
Java — Spring Boot, Jakarta EE.
PHP — Laravel, Symfony (WordPress runs on PHP).
C# / .NET — ASP.NET.
Ruby — Rails.
Go — Gin, Echo.

Web servers

Apache HTTP Server — long-established, modular.
Nginx — high-performance, popular as reverse proxy and load balancer.
IIS — Microsoft's server for Windows.

Application architectures

Monolithic — single deployable unit.
Service-Oriented Architecture (SOA) — coarse-grained services, often via SOAP.
Microservices — fine-grained, independently deployable services with their own data.
Serverless — functions-as-a-service (AWS Lambda, Azure Functions).
JAMstack — JavaScript, APIs, Markup; pre-rendered + dynamic via APIs.

APIs

REST (Representational State Transfer)

Resources identified by URIs.
HTTP methods as verbs (GET, POST, PUT, DELETE).
Stateless.
Uses JSON (mostly), sometimes XML.

Other API paradigms

GraphQL (Facebook) — clients specify exactly what data they need.
gRPC (Google) — binary protocol over HTTP/2; high performance.
WebSockets — bidirectional, persistent connection for real-time apps.
Server-Sent Events (SSE) — one-way push.

Web security

OWASP Top 10 (2021)

Broken Access Control
Cryptographic Failures
Injection (SQL injection, XSS, command injection)
Insecure Design
Security Misconfiguration
Vulnerable and Outdated Components
Identification and Authentication Failures
Software and Data Integrity Failures
Security Logging and Monitoring Failures
Server-Side Request Forgery (SSRF)

Common attacks and defences

Attack	Defence
SQL injection	Parameterised queries, ORM, input validation
Cross-Site Scripting (XSS)	Output encoding, Content Security Policy
Cross-Site Request Forgery (CSRF)	CSRF tokens, SameSite cookies
Session hijacking	HTTPS, HttpOnly, Secure cookies, short sessions
Clickjacking	X-Frame-Options, frame-ancestors CSP
DDoS	Rate limiting, WAF, CDN scrubbing

Authentication

Sessions and cookies — traditional.
JWT (JSON Web Tokens) — stateless tokens.
OAuth 2.0 / OpenID Connect — third-party identity (Sign in with Google, Apple).
Passkeys — passwordless, FIDO2-based.

Performance

Caching — browser cache, CDN, application cache (Redis, Memcached).
CDN (Content Delivery Network) — Cloudflare, Akamai, AWS CloudFront.
Lazy loading, code splitting, image optimisation (WebP, AVIF).
HTTP/3, Brotli compression, server push.
Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR).

Modern trends

Progressive Web Apps (PWAs) — installable web apps with offline support.
WebAssembly (Wasm) — near-native execution in the browser.
Edge computing — code at CDN points (Cloudflare Workers, Vercel Edge Functions).
Web3 — blockchain, NFTs, decentralised apps.
AI-integrated web — embedded LLM features, semantic search, intelligent assistants.

For CSS questions on web security, remember the difference between authentication (who are you?) and authorisation (what are you allowed to do?). Many real-world breaches stem from broken authorisation (e.g., Insecure Direct Object References), not from broken authentication.

Web ecosystem in Pakistan

e-Government: NADRA's Pak-Identity portal, FBR's IRIS, SECP's eServices, Punjab's e-Khidmat Markaz.
e-Commerce: Daraz, AlibabaPK, OLX, PriceOye, local D2C brands.
Fintech: SadaPay, NayaPay, Bykea Wallet, JazzCash, Easypaisa web/mobile interfaces.
Education: HEC's eduroam, e-Rozgaar, DigiSkills, PEC's online portals.
Local hosting has grown with Cloudflare, AWS Bahrain region, Azure UAE, Google Cloud Mumbai serving the South-Asia region.

Mastering web technologies — particularly HTTP, REST, and common security pitfalls — is the entry-level skill for any CSS officer overseeing digital service delivery. Knowing how the browser, server and database interact transforms a vendor pitch from mystery into a structured negotiation.