Loading...
Loading...
HTML (HyperText Markup Language) — the structure of web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content here -->
<script src="script.js"></script>
</body>
</html>
<header> — Page/section header
<nav> — Navigation links
<main> — Main content
<section> — Thematic grouping
<article> — Independent content
<aside> — Sidebar content
<footer> — Page/section footer
<figure> + <figcaption> — Image with caption
<form action="/submit" method="POST">
<input type="text" name="username" required placeholder="Username">
<input type="email" name="email" required>
<input type="password" name="pass" minlength="8">
<input type="number" min="0" max="100">
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select>
<textarea rows="4" name="msg"></textarea>
<input type="checkbox" name="agree"> I agree
<input type="radio" name="gender" value="m"> Male
<button type="submit">Submit</button>
</form>
/* Element */ p { color: blue; }
/* Class */ .card { background: white; }
/* ID */ #header { height: 80px; }
/* Descendant */ nav a { color: inherit; }
/* Child */ ul > li { list-style: none; }
/* Pseudo-class */ a:hover { color: red; }
/* Pseudo-element */ p::first-line { font-weight: bold; }
/* Attribute */ input[type="text"] { border: 1px solid; }
Content → Padding → Border → Margin
box-sizing: border-box (width includes padding+border — recommended!)
.container {
display: flex;
justify-content: center; /* main axis alignment */
align-items: center; /* cross axis alignment */
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1; /* grow and shrink equally */
flex: 0 0 200px; /* fixed 200px, no grow/shrink */
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto;
gap: 20px;
}
.item-wide {
grid-column: 1 / span 2; /* span 2 columns */
}
/* Mobile first approach */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) {
.container { max-width: 768px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}
var x = 1; // function-scoped, can redeclare (avoid!)
let y = 2; // block-scoped, cannot redeclare
const z = 3; // block-scoped, cannot reassign
// Hoisting: var declarations hoisted (not assignments), let/const not
// Traditional
function add(a, b) { return a + b; }
// Arrow function (no own 'this')
const add = (a, b) => a + b;
const square = x => x * x;
// Default parameters
const greet = (name = "User") => `Hello, ${name}!`;
// Destructuring
const { name, age } = person; // object
const [first, ...rest] = array; // array
// Spread operator
const merged = { ...obj1, ...obj2 };
const combined = [...arr1, ...arr2];
// Promise
fetch("/api/users")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Async/Await (cleaner)
async function getUsers() {
try {
const response = await fetch("/api/users");
const data = await response.json();
return data;
} catch (error) {
console.error("Error:", error);
}
}
// Select elements
const btn = document.getElementById("myBtn");
const items = document.querySelectorAll(".item");
// Modify content
btn.textContent = "Click me";
btn.innerHTML = "<strong>Click</strong>";
// Modify styles
btn.style.backgroundColor = "blue";
btn.classList.add("active");
btn.classList.toggle("hidden");
// Events
btn.addEventListener("click", function(e) {
e.preventDefault(); // prevent default action
console.log("Clicked!", e.target);
});
// Create and insert elements
const div = document.createElement("div");
div.className = "card";
document.body.appendChild(div);
Node.js — JavaScript runtime on server side; non-blocking I/O
// Simple HTTP server
const http = require("http");
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/html" });
res.end("<h1>Hello from Node.js!</h1>");
});
server.listen(3000, () => console.log("Server on port 3000"));
Express.js — popular web framework for Node.js
const express = require("express");
const app = express();
app.use(express.json()); // parse JSON bodies
// Routes (CRUD)
app.get("/users", (req, res) => {
res.json([{ id: 1, name: "Rahul" }]);
});
app.get("/users/:id", (req, res) => {
const { id } = req.params;
res.json({ id, name: "Rahul" });
});
app.post("/users", (req, res) => {
const { name, email } = req.body;
// save to database...
res.status(201).json({ id: 2, name, email });
});
app.put("/users/:id", (req, res) => { /* update */ });
app.delete("/users/:id", (req, res) => { /* delete */ });
app.listen(3000);
REST (Representational State Transfer) Principles:
HTTP Methods and CRUD: | HTTP Method | CRUD | Example | |---|---|---| | GET | Read | GET /users — get all users | | POST | Create | POST /users — create user | | PUT | Update (full) | PUT /users/1 — replace user | | PATCH | Update (partial) | PATCH /users/1 — update fields | | DELETE | Delete | DELETE /users/1 — remove user |
HTTP Status Codes:
Q1 (2023): What is the difference between == and === in JavaScript?
== checks value equality with type coercion: "5" == 5 → true
=== checks value AND type equality (strict): "5" === 5 → false
Always prefer === to avoid unexpected type coercion bugs.
Q2 (2023): Explain event bubbling and event capturing.
Event bubbling: event fires on target element first, then bubbles UP to ancestors (default in browsers).
Event capturing: event fires from root DOWN to target element (use {capture: true}).
Can stop propagation: e.stopPropagation()
Q3 (2022): Write CSS to create a responsive 3-column grid that stacks on mobile.
.grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
Complete Web Technologies notes for B.Tech IT Semester 3 — HTML5, CSS3, JavaScript (ES6+), DOM manipulation, Node.js, RESTful APIs, and responsive design.
48 pages · 2.4 MB · Updated 2026-03-11
HTML (structure/content), CSS (styling/layout), JavaScript (behavior/interactivity). Analogy: HTML=bones, CSS=skin/clothes, JavaScript=muscles/brain.
Document Object Model — a programming interface representing HTML as a tree of objects. JavaScript can read and modify this tree to dynamically change page content, styles, and structure.
GET: data in URL, cached, bookmarkable, for fetching data. POST: data in body, not cached, not bookmarkable, for sending/creating data. POST is more secure for sensitive data.
Java Programming — Complete Notes for B.Tech IT Semester 3
Java Programming
Computer Organization & Architecture — B.Tech IT Sem 3
Computer Organization
Digital Electronics — Complete Notes IT Sem 1
Digital Electronics
Cloud Computing Notes — B.Tech IT Sem 5
Cloud Computing
Information Security Notes — B.Tech IT Sem 6
Information Security
Your feedback helps us improve notes and tutorials.