5 questions across Easy, Medium, and Hard levels
HTML (HyperText Markup Language) defines the structure and content of web pages. CSS (Cascading Style Sheets) controls the visual presentation and layout. JavaScript adds interactivity and dynamic behavior. Think of HTML as the skeleton, CSS as the skin/clothes, and JavaScript as the muscles and brain of a web page.
Every HTML element is treated as a rectangular box with: Content (actual content area), Padding (space between content and border), Border (surrounds the padding), Margin (space outside the border). box-sizing: border-box makes width/height include padding and border. Understanding the box model is crucial for layout.
localStorage: persists until explicitly cleared, ~5-10MB, not sent to server. sessionStorage: cleared when tab closes, ~5-10MB, not sent to server. Cookies: can persist (set expiry) or session-based, ~4KB, automatically sent to server on every request, can set Secure and HttpOnly flags. Use localStorage for user preferences, sessionStorage for temporary data, cookies for auth tokens.
Event bubbling: event fires on the target element first, then bubbles up to ancestors. Event capturing: event fires from root down to the target (opposite of bubbling). By default, events bubble. addEventListener(event, handler, true) uses capturing. event.stopPropagation() prevents further propagation. event.target is the element that triggered the event.
The event loop enables JavaScript's async behavior despite being single-threaded. Components: Call Stack (executes synchronous code), Web APIs (setTimeout, fetch, DOM events - run in background), Callback Queue/Task Queue (stores callbacks when ready), Microtask Queue (Promises, higher priority than task queue). Loop: execute call stack → drain microtask queue → execute one task from task queue → repeat. This is why Promises resolve before setTimeout.