room ~ Web Application Basics
Web Application Basics
Frontend/backend, web flow, HTML/CSS/JS roles, databases, and web security basics
1/4
lessons
How Web Applications Work
The Web Request Flow
User types URL → Browser → DNS resolves domain → TCP connection →
HTTP Request → Web Server → Application Code → Database →
Response → Browser renders page
Step by Step
- 1.User types
https://example.com/login - 2.DNS converts
example.com→93.184.216.34 - 3.TCP connection established (3-way handshake)
- 4.TLS handshake (if HTTPS)
- 5.HTTP Request sent:
GET /login HTTP/1.1 - 6.Web Server (Nginx/Apache) receives request
- 7.Application (PHP/Python/Node) processes logic
- 8.Database queried if needed
- 9.Response sent back: HTML + CSS + JS
- 10.Browser renders the page
Components
| Layer | Technology Examples | Role |
|---|---|---|
| Client | Browser (Chrome, Firefox) | Display, interact |
| Frontend | HTML, CSS, JavaScript | Structure, style, behavior |
| Web Server | Nginx, Apache, IIS | Serve files, proxy |
| Application | PHP, Python, Node.js, Java | Business logic |
| Database | MySQL, PostgreSQL, MongoDB | Store data |
| Cache | Redis, Memcached | Speed up responses |
Static vs Dynamic
| Type | What | Example |
|---|---|---|
| Static | Pre-built HTML files | Blog, documentation |
| Dynamic | Generated per request | Login, dashboard, search |