1. Web Development Fundamentals
1.1 HTML (HyperText Markup Language)
1.1.1 Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It uses tags to structure content, defining elements such as headings, paragraphs, links, images, and more. Browsers interpret these tags to render the visual representation of a page. Example: <h1>Welcome</h1> renders a top-level heading.
1.1.2 HTML Document Structure
Every HTML document follows a tree structure: <!DOCTYPE html> → <html> → <head> (metadata, title, links) → <body> (visible content). The <!DOCTYPE html> declaration ensures standards mode. The <html> element is the root, containing <head> for metadata (charset, viewport, title, stylesheets, scripts) and <body> for all visible content. A minimal valid document includes doctype, html, head with title, and body.
<!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>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
1.1.3 Text Formatting
HTML provides semantic tags for text formatting: <p> (paragraph), <strong> (bold/important), <em> (italic/emphasis), <mark> (highlight), <small> (side comments), <del> (deleted text), <ins> (inserted text), <sub> (subscript), <sup> (superscript). These tags convey meaning beyond visual styling, aiding accessibility and SEO. Example: <p>Water is H<sub>2</sub>O</p>.
| Tag | Purpose | Example |
|---|---|---|
<strong> | Important text | <strong>Warning</strong> |
<em> | Emphasized text | <em>Note</em> |
<mark> | Highlighted text | <mark>Search term</mark> |
<sub>/<sup> | Subscript/Superscript | H<sub>2</sub>O |
1.1.4 Links and Navigation
The <a> (anchor) element creates hyperlinks. The href attribute specifies the destination URL. Use target="_blank" to open in a new tab, and always include rel="noopener" for security (prevents the new page from accessing the originating window). Anchor links (href="#section") enable in-page navigation. Example: <a href="https://example.com" target="_blank" rel="noopener">Visit</a>.
1.1.5 Images and Multimedia
The <img> element embeds images. The src attribute specifies the image path, alt provides alternative text (critical for accessibility and SEO), and width/height reserve space to prevent layout shift. The loading="lazy" attribute defers loading until near the viewport. The <picture> element enables responsive images with multiple <source> options. <video controls> and <audio controls> embed media with native browser controls. Example: <img src="hero.webp" alt="Dashboard preview" loading="lazy">.
1.1.6 Tables
Tables display tabular data. Structure: <table> → <caption> (optional) → <thead> (header row group) → <tbody> (body row group) → <tfoot> (footer). Rows use <tr>, header cells <th>, data cells <td>. Use scope="col|row" on <th> for accessibility. Example: A pricing table with headers for Plan, Price, Features.
| Plan | Price | Features |
|---|---|---|
| Basic | $9/mo | 1 GB storage, 5 users |
| Pro | $29/mo | 10 GB storage, 20 users |
| Enterprise | $99/mo | Unlimited storage, unlimited users |
1.1.7 Forms and Input Elements
Forms collect user input. The <form> element wraps controls, with action (submission URL) and method (GET/POST). Input types: text, email, password, number, date, checkbox, radio, file. Other controls: <textarea> (multi-line text), <select><option> (dropdown), <button type="submit"> (submit). Validation attributes: required, placeholder, pattern (regex), min, max, step. Example: Login form with email/password and validation attributes.
<form action="/login" method="POST">
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" required minlength="8">
</div>
<button type="submit">Sign In</button>
</form>
1.1.8 Semantic HTML
Semantic elements convey meaning about the content they contain, improving SEO, accessibility, and maintainability. Key elements: <header> (introductory content), <nav> (navigation links), <main> (primary content), <section> (thematic grouping), <article> (self-contained composition), <aside> (tangential content), <footer> (footer), <figure>/<figcaption> (media with caption), <time> (date/time), <address> (contact info). Example: A blog post uses <article>, with <header> for title/meta, <section> for content blocks.
1.1.9 Accessibility (ARIA)
ARIA (Accessible Rich Internet Applications) attributes supplement HTML semantics when native elements cannot achieve the desired accessibility. Key attributes: role (defines element type, e.g., button, dialog, alert), aria-label (accessible name), aria-labelledby (references element that labels), aria-describedby (references description), aria-expanded (state of collapsible), aria-hidden (hides from AT), aria-live="polite|assertive" (announces dynamic changes). Example: Custom dropdown uses role="menu", aria-expanded on trigger, aria-selected on options.
1.2 CSS (Cascading Style Sheets)
1.2.1 CSS Syntax
A CSS rule consists of a selector and a declaration block: selector { property: value; }. Declarations end with a semicolon. Comments use /* comment */. Example: h1 { color: #1a1a2e; font-size: 2.5rem; }.
1.2.2 Selectors
Selectors target elements for styling. Types: Element (h1), Class (.btn), ID (#header), Attribute ([type="email"]), Pseudo-classes (:hover, :focus, :first-child, :nth-child(2n)), Pseudo-elements (::before, ::after), Combinators: descendant ( ), child (>), adjacent sibling (+), general sibling (~). Specificity determines which rule applies when multiple match: ID (100) > Class (10) > Element (1). Inline styles and !important override. Example: .card > .title::first-letter { font-size: 2em; }.
| Selector | Example | Specificity |
|---|---|---|
| Element | h1 | 0,0,1 |
| Class | .btn | 0,1,0 |
| ID | #header | 1,0,0 |
| Inline style | style="..." | 1,0,0,0 |
1.2.3 Box Model
Every element is a rectangular box: content → padding → border → margin. By default (box-sizing: content-box), width/height apply only to content. With box-sizing: border-box (recommended global reset), width/height include padding and border. Formula for content-box: total width = width + padding-left + padding-right + border-left + border-right. Example: .box { width: 300px; padding: 20px; border: 2px solid #333; box-sizing: border-box; } → actual width stays 300px.
totalWidth = width + paddingLeft + paddingRight + borderLeft + borderRight
Global reset snippet:
*, *::before, *::after {
box-sizing: border-box;
}
1.2.4 Positioning
Positioning schemes: static (default, normal flow), relative (offset from normal flow via top/right/bottom/left), absolute (removed from flow, positioned relative to nearest positioned ancestor), fixed (relative to viewport), sticky (toggles between relative and fixed based on scroll). z-index controls stacking context (only works on positioned elements). Example: Modal overlay uses position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;.
1.2.5 Flexbox
Flexbox is a one-dimensional layout model for distributing space along a single axis. Container properties: display: flex, flex-direction: row|column, justify-content: center|space-between|space-around (main axis), align-items: center|stretch|flex-start (cross axis), flex-wrap: wrap, gap: 1rem. Item properties: flex-grow, flex-shrink, flex-basis (shorthand flex: 1), align-self, order. Example: Navbar with logo left, links center, user menu right using justify-content: space-between.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
}
1.2.6 CSS Grid
CSS Grid is a two-dimensional layout system for rows and columns. Container properties: display: grid, grid-template-columns (e.g., repeat(3, 1fr) or 200px 1fr 100px), grid-template-rows, gap, grid-template-areas for named areas. Item properties: grid-column, grid-row, grid-area. Example: Dashboard layout with sidebar, header, main, aside, footer.
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 250px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 1rem;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
1.3 JavaScript (ES6+)
1.3.1 Variables and Data Types
Modern JavaScript uses let (mutable) and const (immutable reference) for block-scoped variables, replacing function-scoped var. Primitive types: string, number, boolean, null, undefined, symbol, bigint. Objects (including arrays, functions) are reference types. Example: const apiUrl = 'https://api.example.com'; let count = 0;.
1.3.2 Functions and Arrow Functions
Functions are first-class citizens. Arrow functions (() => {}) provide concise syntax and lexical this binding. Features: default parameters, rest parameters (...args), destructuring in parameters. Example: const add = (a, b) => a + b;.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
const multiply = (...numbers) => numbers.reduce((acc, n) => acc * n, 1);
const createUser = ({ name, age = 18 }) => ({ name, age, id: Date.now() });
1.3.3 DOM Manipulation
The Document Object Model (DOM) represents the page as a tree of nodes. Select elements with document.querySelector() (first match) or document.querySelectorAll() (NodeList). Modify content (textContent, innerHTML), attributes (setAttribute, dataset), styles (style.property), classes (classList.add/remove/toggle). Handle events with addEventListener('event', handler). Example: Toggle dark mode.
const btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
});
1.3.4 Asynchronous Programming
JavaScript is single-threaded; async operations (network, timers) use Promises and async/await. fetch() returns a Promise resolving to a Response. Use try/catch for error handling. Example: Fetch user data with error handling.
async function fetchUser(id) {
try {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const user = await response.json();
return user;
} catch (error) {
console.error('Failed to fetch user:', error);
throw error;
}
}
// Parallel requests
const [users, posts] = await Promise.all([
fetch('/api/users'),
fetch('/api/posts')
]);
1.3.5 ES6+ Features
Key ES6+ features: Template literals (`string ${expr}`), destructuring assignment (const {a, b} = obj), spread/rest operators (...arr), modules (import/export), classes, enhanced object literals, Map/Set, Promise utilities (Promise.all, Promise.allSettled), optional chaining (?.), nullish coalescing (??). Example: Modules and destructuring.
// utils.js
export const PI = 3.14159;
export function circleArea(r) { return PI * r * r; }
export default function circumference(r) { return 2 * PI * r; }
// main.js
import { PI, circleArea }, circumference from './utils.js';
console.log(circleArea(5)); // 78.53975
console.log(circumference(5)); // 31.4159
1.3.6 Modern Array Methods
Functional array methods enable declarative data transformation: map, filter, reduce, find, findIndex, some, every, flat, flatMap. Example: Process a list of products.
const products = [
{ name: 'Laptop', price: 999, category: 'tech' },
{ name: 'Book', price: 15, category: 'education' },
{ name: 'Phone', price: 699, category: 'tech' }
];
const techProducts = products.filter(p => p.category