Web Technologies Notes

February 19, 2025

Web Technologies Overview

Web technologies are the languages, frameworks, and tools that power the internet. They're divided into client-side (frontend) and server-side (backend) technologies that work together seamlessly.

Frontend (Client-Side) Technologies

HTML5 - Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Content here...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

Key HTML5 concepts:

Semantic elements: header, nav, main, article, section, footer
Forms with validation: input types, required, pattern
Multimedia: audio, video, canvas elements
APIs: Geolocation, LocalStorage, WebSocket

CSS3 - Styling

/* Selectors */
body { background-color: #f5f5f5; }
.container { max-width: 1200px; }
#header { position: sticky; }

/* Flexbox Layout */
.flex-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Responsive Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Animations */
@keyframes slide-in {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animated { animation: slide-in 0.3s ease-in; }

/* Media Queries */
@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
}

CSS3 Features:

Flexbox and Grid layouts
Responsive design (media queries)
Transitions and animations
Transforms and 3D effects
Custom properties (CSS variables)

JavaScript - Interactivity

// DOM Manipulation
document.getElementById('btn').addEventListener('click', function() {
    document.body.style.backgroundColor = 'blue';
});

// Fetching data from server
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// Async/Await
async function loadData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Event handling
document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    // Handle form submission
});

JavaScript Features:

DOM manipulation and events
Asynchronous programming (promises, async/await)
ES6+ features (arrow functions, destructuring, spread operator)
APIs: Fetch, LocalStorage, Geolocation

Modern Frontend Frameworks

React:

function App() {
    const [count, setCount] = React.useState(0);
    
    return (
        <div>
            <p>Counter: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Vue:

<template>
    <div>
        <p>Counter: {{ count }}</p>
        <button @click="count++">Increment</button>
    </div>
</template>

<script>
export default {
    data() { return { count: 0 } }
}
</script>

Backend (Server-Side) Technologies

Node.js with Express

const express = require('express');
const app = express();

app.use(express.json());

// API endpoint
app.get('/api/users/:id', (req, res) => {
    const id = req.params.id;
    res.json({ id, name: 'John', email: 'john@example.com' });
});

app.post('/api/users', (req, res) => {
    const newUser = req.body;
    // Save to database
    res.json({ message: 'User created', user: newUser });
});

app.listen(3000, () => console.log('Server running on port 3000'));

Python Frameworks

Django:

from django.http import JsonResponse
from django.views import View

class UserAPI(View):
    def get(self, request, id):
        return JsonResponse({'id': id, 'name': 'John'})
    
    def post(self, request):
        data = json.loads(request.body)
        # Save user
        return JsonResponse({'message': 'User created'})

Flask (Lightweight):

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/users/<int:id>', methods=['GET'])
def get_user(id):
    return jsonify({'id': id, 'name': 'John'})

@app.route('/api/users', methods=['POST'])
def create_user():
    data = request.json
    return jsonify({'message': 'User created'})

Databases

SQL (Relational):

-- Create table
CREATE TABLE users (
    id INT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100),
    created_at TIMESTAMP
);

-- Query
SELECT * FROM users WHERE id = 1;

-- Insert
INSERT INTO users (id, name, email) 
VALUES (1, 'John', 'john@example.com');

NoSQL (Document-based):

// MongoDB example
db.users.insertOne({
    _id: 1,
    name: 'John',
    email: 'john@example.com',
    tags: ['developer', 'python']
});

db.users.find({ _id: 1 });

Web Standards & Protocols

HTTP/HTTPS

How HTTP Works:

Client (Browser)          Server (Web Server)
    |                           |
    |--- GET /page.html ------> |
    |                           |
    | <---- HTTP 200 OK --------|
    |     [HTML Content]        |
    |                           |

HTTP Methods:

GET: Retrieve data (safe, cacheable)
POST: Submit data (creates resource)
PUT: Update entire resource
DELETE: Remove resource
PATCH: Partial update

Status Codes:

200: OK - Request successful
201: Created - New resource created
400: Bad Request - Invalid input
401: Unauthorized - Need authentication
404: Not Found - Resource doesn't exist
500: Server Error - Server problem

REST API Design

Good REST API endpoints:
GET /api/users              # List all users
POST /api/users             # Create user
GET /api/users/123          # Get specific user
PUT /api/users/123          # Update user
DELETE /api/users/123       # Delete user

Response format:
{
    "status": "success",
    "data": { /* user data */ },
    "message": "User retrieved successfully"
}

WebSockets (Real-Time Communication)

// Server (Node.js with Socket.io)
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
    console.log('User connected');
    
    socket.on('message', (msg) => {
        io.emit('message', msg);  // Broadcast to all
    });
});

// Client
const socket = io();
socket.emit('message', 'Hello server!');
socket.on('message', (msg) => console.log(msg));

Web Security

Common Vulnerabilities

XSS (Cross-Site Scripting):

// VULNERABLE
document.body.innerHTML = userInput;

// SAFE
element.textContent = userInput;

CSRF (Cross-Site Request Forgery):

<!-- Include token in form -->
<form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="submit">
</form>

SQL Injection:

// VULNERABLE
query = "SELECT * FROM users WHERE email = '" + email + "'";

// SAFE
query = "SELECT * FROM users WHERE email = ?";
db.execute(query, [email]);

Security Best Practices

HTTPS: Encrypt all communication
Authentication: Secure login (bcrypt passwords)
Authorization: Control access to resources
Input Validation: Check all user input
Rate Limiting: Prevent brute force attacks
CORS: Control cross-origin access

Web Development Concepts

Client-Server Architecture

┌──────────────┐              ┌──────────────┐
│   Browser    │              │   Server     │
│  (Frontend)  │ <----------> │  (Backend)   │
└──────────────┘              └──────────────┘
  HTML/CSS/JS                  Database

Request-Response Cycle:

User action in browser
Browser makes HTTP request
Server processes request
Server sends response
Browser renders response

Session Management

// Session storage
sessionStorage.setItem('userId', '123');
sessionStorage.getItem('userId');  // '123'

// Local storage (persists)
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');  // 'dark'

// Cookies
document.cookie = "userId=123; expires=...";

Modern Web Development Stack

MERN (Popular Stack):

MongoDB: NoSQL database
Express: Node.js framework
React: Frontend library
Node.js: JavaScript runtime

LAMP Stack:

Linux: Operating system
Apache: Web server
MySQL: Database
PHP: Server language

Key Technologies Summary

Technology	Purpose	Example
HTML	Structure	`<div>, <form>, <input>`
CSS	Styling	Layouts, colors, animations
JavaScript	Interactivity	DOM manipulation, events
React/Vue	Frontend Framework	Component-based UI
Node.js	Runtime Environment	Server-side JavaScript
Express	Web Framework	REST API, routing
MongoDB	Database	Document storage
HTTPS	Security	Encrypted communication