Web Development
A comprehensive guide to web development technologies, covering frontend and backend concepts.
📚 Topics
Frontend
| File | Description |
|---|---|
| HTML | Structure and semantic elements of web pages |
| CSS | Styling, layouts, flexbox, grid, and responsive design |
| JavaScript | Core JS concepts, DOM manipulation, ES6+ features |
Backend
| File | Description |
|---|---|
| Express.js | Node.js web framework, routing, middleware |
| REST | REST API design, HTTP methods, status codes |
🎯 Quick Reference
HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Content here -->
</body>
</html>CSS Box Model
flowchart TD
subgraph Margin["Margin (Outer Spacing)"]
subgraph Border["Border (Visible boundary)"]
subgraph Padding["Padding (Inner Spacing)"]
subgraph Content["Content (Text / Image / Children)"]
Text["📦 Width × Height"]
end
end
end
end
🌐 Full-Stack Web Architecture
flowchart LR
subgraph Frontend["🎨 Frontend (Client Browser)"]
HTML["📄 HTML5 (Structure)"]
CSS["🎨 CSS3 (Styling & Layout)"]
JS["⚡ JavaScript (DOM & State)"]
end
subgraph Backend["⚙️ Backend (Server Runtime)"]
Express["🚂 Express.js (Router & Middleware)"]
API["📡 REST API Endpoints"]
end
subgraph Storage["🗄️ Database / Data Layer"]
DB["💾 MongoDB / PostgreSQL"]
end
Frontend <==>|"HTTP / JSON (fetch / axios)"| Backend
Backend <==>|"ORM / Driver Query"| Storage