Semantic HTML uses meaningful elements that describe content structure: <header>, <nav>, <main>, <article>, <section>.

Benefits: Better accessibility, SEO, maintainability, and meaningful document structure for assistive technologies.

Flexbox: One-dimensional layout (row or column). Great for component layouts, alignment, and distributing space.

Grid: Two-dimensional layout (rows and columns). Perfect for page layouts and complex positioning.

Often used together: Grid for page structure, flexbox for component internals.

• Use mobile-first approach with min-width media queries
• Flexible units: %, vw/vh, em/rem instead of fixed px
• Flexible images: max-width: 100%
• CSS Grid and flexbox for adaptive layouts
• Container queries for component-based responsiveness

From inside out: content → padding → border → margin

box-sizing: border-box includes padding and border in width/height calculations, making layouts more predictable.

:root {
  --primary-color: #007bff;
  --font-size: 1.2rem;
}

.button {
  color: var(--primary-color);
  font-size: var(--font-size);
}

Benefits: Dynamic theming, easier maintenance, JavaScript interaction, cascade inheritance.

/* Flexbox (modern) */
.parent { display: flex; justify-content: center; align-items: center; }

/* Grid */
.parent { display: grid; place-items: center; }

/* Absolute positioning */
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

display: none: Element removed from document flow, no space taken

visibility: hidden: Element invisible but space preserved, still in document flow

Order of precedence: inline styles (1000) → IDs (100) → classes/attributes/pseudo-classes (10) → elements (1)

Example: #nav .menu li = 111 beats .menu li = 11

Pseudo-classes (single colon): Style based on state - :hover, :focus, :nth-child()

Pseudo-elements (double colon): Style parts of elements - ::before, ::after, ::first-line

• Minimize and compress CSS files
• Remove unused CSS (PurgeCSS, tree-shaking)
• Use efficient selectors (avoid deep nesting)
• Critical CSS inline, non-critical loaded separately
• Use CSS containment for layout optimization

function outer(x) {
  return function inner(y) {
    return x + y; // inner has access to x
  };
}
const add5 = outer(5);
add5(3); // 8

Inner function retains access to outer function's variables even after outer function returns.

• var: Function-scoped, hoisted, can be redeclared
• let: Block-scoped, temporal dead zone, can be reassigned
• const: Block-scoped, must be initialized, cannot be reassigned

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.classList.contains('child')) {
    // Handle child click
  }
});

Attach one listener to parent instead of many to children. Works with dynamically added elements.

== (loose equality): Performs type coercion - '5' == 5 is true

=== (strict equality): No type coercion - '5' === 5 is false

Always prefer === to avoid unexpected behavior.

// Promise
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

// Async/await
async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

Async/await is syntactic sugar over promises for cleaner asynchronous code.

function greet(greeting) {
  return greeting + ', ' + this.name;
}

const person = { name: 'John' };

greet.call(person, 'Hello');     // "Hello, John"
greet.apply(person, ['Hello']);  // "Hello, John"
const boundGreet = greet.bind(person);
boundGreet('Hello');             // "Hello, John"

Variable and function declarations are moved to the top of their scope during compilation.

console.log(x); // undefined (not error)
var x = 5;

// Becomes:
var x;
console.log(x); // undefined
x = 5;

JavaScript's concurrency model. Call stack executes code, Web APIs handle async operations, callback queue holds completed tasks, event loop moves tasks from queue to stack when stack is empty.

const animal = {
  sound: function() { return 'Some sound'; }
};

const dog = Object.create(animal);
dog.bark = function() { return 'Woof!'; };
dog.sound(); // 'Some sound' (inherited)

Objects can inherit directly from other objects through the prototype chain.

• Lexical this binding (inherit from enclosing scope)
• Cannot be used as constructors
• No arguments object
• Cannot be hoisted
• Implicit return for single expressions

// Array destructuring
const [first, second] = [1, 2, 3];

// Object destructuring
const { name, age } = { name: 'John', age: 30, city: 'NYC' };

// With default values
const { color = 'blue' } = {};

// math.js
export const add = (a, b) => a + b;
export default class Calculator { }

// main.js
import Calculator, { add } from './math.js';

Modules provide encapsulation and explicit dependencies. Support named exports, default exports, and dynamic imports.

Mounting: constructor → componentDidMount

Updating: componentDidUpdate

Unmounting: componentWillUnmount

With hooks: useEffect handles all lifecycle events with dependency arrays.

Functions that let you use state and lifecycle features in function components.

Benefits: Simpler code, better reusability, avoid wrapper hell, easier testing, performance optimizations.

function Component() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${'$'}{'{'}count};`;

    return () => {
      // cleanup
    };
  }, [count]); // dependency array
}

JavaScript representation of the real DOM. React compares virtual DOM snapshots (diffing) and updates only changed elements (reconciliation).

Benefits: Faster updates, batched changes, predictable performance, cross-browser consistency.

• Local state: useState for component-specific data
• Context: useContext for app-wide state
• Reducers: useReducer for complex state logic
• External libraries: Redux, Zustand, Jotai for large apps

{'{'}items.map(item => (
  <Item key={'{'}{'{'}item.id{'}'} data={'{'}{'{'}item{'}'} />
))}

Keys help React identify which items changed, added, or removed. Improves reconciliation performance and prevents state bugs.

Controlled: Form data handled by React component state

const [value, setValue] = useState('');
<input value={'{'}{'{'}value{'}'} onChange={'{'}{'{'}e => setValue(e.target.value){'}'} />

Uncontrolled: Form data handled by DOM using refs

Controlled components provide better data flow and validation control.

• React.memo for component memoization
• useMemo for expensive calculations
• useCallback for function references
• Code splitting with lazy loading
• Avoid inline objects/functions in props
• Virtualization for large lists

CSR: JavaScript renders content in browser. Fast navigation, but slower initial load, SEO challenges.

SSR: Server generates HTML. Better SEO, faster initial paint, but slower navigation.

SSG: Pre-rendered at build time for best performance with static content.

Passing props through multiple component levels to reach a deeply nested component.

Solutions: React Context, state management libraries, component composition, or render props pattern.

• Minimize HTTP requests (bundle, sprite sheets)
• Optimize images (WebP, responsive images, lazy loading)
• Code splitting and lazy loading
• Use CDN for static assets
• Minify and compress files
• Implement caching strategies
• Prefetch critical resources

1. Parse HTML → DOM tree
2. Parse CSS → CSSOM tree
3. Combine DOM + CSSOM → Render tree
4. Layout (reflow) → calculate positions
5. Paint → fill in pixels
6. Composite → layer combination

• LCP (Largest Contentful Paint): Loading performance (<2.5s)
• FID (First Input Delay): Interactivity (<100ms)
• CLS (Cumulative Layout Shift): Visual stability (<0.1)

Google uses these for search rankings and user experience assessment.

• Semantic HTML with proper heading hierarchy
• Alt text for images, aria-labels for interactive elements
• Keyboard navigation support (tab order, focus management)
• Sufficient color contrast ratios
• Screen reader compatibility (NVDA, JAWS testing)
• ARIA attributes for complex components

localStorage: Persistent, 5-10MB, client-side only

sessionStorage: Tab-specific, clears on tab close

Cookies: Sent with requests, 4KB limit, can set expiration, httpOnly flag for security

Cross-Origin Resource Sharing prevents scripts from making requests to different domains without permission.

Solutions: Server sets CORS headers, use proxy server in development, JSONP for older browsers, or same-origin API design.

JavaScript that runs in background, separate from web page. Acts as proxy between app and network.

Use cases: Offline functionality, caching strategies, push notifications, background sync, performance optimization.

• Chrome DevTools Performance tab for profiling
• Lighthouse audits for comprehensive analysis
• Network tab to identify slow requests
• Memory tab for leak detection
• React DevTools Profiler for React apps
• Real User Monitoring (RUM) tools