Interview Questions Practice Flashcards
(70 cards)
Explain the difference between <span> and <div>. When would you use one over the other?</span>
<div>: Block-level, takes full width, usually for layout/sections.
<span>: Inline-level, takes content width, usually for styling small text parts.
</span></div>
What is semantic HTML and why is it important? Give examples of semantic tags.
Using HTML tags based on their meaning, not just appearance (e.g., <header>, <nav>, <article>, <footer>).
Importance: Better for SEO, accessibility, and code readability/maintainability.
How do you ensure your HTML is accessible? What are ARIA attributes?
Ensure: Use semantic HTML, proper heading structure, alt text for images, and meaningful link text.
ARIA (Accessible Rich Internet Applications): Attributes (role, aria-label, aria-describedby) to enhance semantics for assistive technologies when native HTML isn’t enough (e.g., custom widgets).
Describe the purpose of the <!DOCTYPE html> declaration.
A declaration telling the browser to render the page in “standards mode” (modern HTML5). Essential for consistent rendering.
Explain the CSS Box Model. How does box-sizing: border-box; change it?
HTML elements are boxes with Content, Padding (space around content), Border, and Margin (space outside border).
box-sizing: border-box;: Includes padding and border within the element’s specified width/height, simplifying sizing.
Describe the concept of CSS specificity. How is it calculated?
A set of rules determining which CSS declaration applies when multiple rules target the same element.
Calculated by (highest to lowest priority): Inline Style > ID > Class/Attribute/Pseudo-class > Element/Pseudo-element.
What is the difference between margin and padding?
padding: Space inside the element, between content and border. Affects the element’s background color.
Margin: Space outside the element’s border, pushing other elements away. Transparent.
Explain different CSS positioning properties (static, relative, absolute, fixed, sticky). When would you use each?
static: Default; normal flow, top/left no effect.
relative: Positioned relative to its normal flow. top/left moves it from its original spot.
absolute: Positioned relative to its nearest positioned ancestor (not static). Removed from flow.
fixed: Positioned relative to the viewport. Stays put on scroll.
sticky: Behaves relative until a scroll threshold, then fixed.
What are Flexbox and CSS Grid? When would you choose one over the other?
Flexbox: 1-dimensional layout (row OR column). Good for aligning items in a line or distributing space.
CSS Grid: 2-dimensional layout (rows AND columns). Good for overall page layout, creating complex grids.
How can you optimize your CSS for performance? (e.g., critical CSS, purging unused CSS)
Critical CSS: Inline essential CSS for above-the-fold content to render quickly.
Purge Unused CSS: Remove styles not used on the page (e.g., with PurgeCSS).
Minify CSS, avoid @import, and use efficient selectors.
What are pseudo-classes and pseudo-elements? Give examples.
Pseudo-classes (:): Target elements based on a state (e.g., :hover, :focus, :first-child).
Pseudo-elements (::): Target parts of an element (e.g., ::before, ::after, ::first-letter).
How do you handle responsive design using CSS? (Media queries, vw/vh, percentages, min-width/max-width).
Media Queries (@media): Apply styles based on device characteristics (screen width, height, orientation).
Fluid Units: Use vw/vh, percentages for flexible sizing.
min-width/max-width: Control element scaling within ranges.
Explain the difference between null and undefined.
undefined: Variable declared but no value assigned, or a missing function argument/object property. Represents the absence of value.
null: Explicitly assigned value representing “no value” or “empty.” A primitive value.
What is the event loop in JavaScript? How does it work?
JS is single-threaded but non-blocking. The event loop continuously checks the call stack and moves tasks from the message queue (e.g., setTimeout callbacks, DOM events) to the stack when it’s empty.
Describe the difference between == and ===.
== (Loose equality): Compares values after type coercion (tries to convert types).
=== (Strict equality): Compares values and types without coercion. (Always prefer ===).
What are closures in JavaScript? Provide an example of where they might be useful.
A function “remembers” and can access variables from its outer (enclosing) scope, even after the outer function has finished executing.
Use: Data privacy, creating factory functions, and currying.
Explain Hoisting in JavaScript.
JavaScript’s default behavior of moving declarations (variables like var, functions) to the top of their containing scope during compilation.
Note: Only declarations are hoisted, not initializations (let/const are hoisted but in a “temporal dead zone”).
What is this in JavaScript? How does its value change? (And discuss call, apply, bind).
this: A keyword whose value refers to the object executing the current function.
Value depends on how the function is called: Global object (browser window), object owning the method, new instance (constructor), specific object (call/apply/bind), or undefined in strict mode for standalone functions.
Describe Promises and async/await. Why are they used?
Promises: Objects representing the eventual completion (or failure) of an asynchronous operation and its resulting value. (.then(), .catch(), .finally()).
async/await: Syntactic sugar built on Promises, making asynchronous code look and behave more like synchronous code, improving readability.
What is event bubbling and event capturing? How can you prevent them?
When an event occurs on an element:
Capturing (down): Event propagates from the window down to the target element.
Bubbling (up): Event propagates from the target element up to the window (default behavior).
Prevent: event.stopPropagation().
Explain the concept of prototypal inheritance in JavaScript.
Objects in JS inherit properties and methods from other objects via a prototype chain. When you access a property, JS looks for it on the object, then its prototype, then its prototype’s prototype, etc., until found or null is reached.
What are array methods? (e.g., map, filter, reduce, forEach). When would you use each?
map: Creates a new array by calling a function on every element in the original array. (Transforms elements).
filter: Creates a new array with only elements that pass a test (return true). (Selects elements).
reduce: Executes a reducer function on each element, resulting in a single output value. (Aggregates elements).
forEach: Executes a provided function once for each array element. (Iterates, no new array returned).
How does event delegation work? Why is it beneficial?
Attaching a single event listener to a parent element instead of multiple listeners to individual child elements.
Benefit: Efficient for dynamic lists, reduces memory usage, simplifies code. Uses event bubbling.
Explain debouncing and throttling. When would you use them?
Debouncing: Delays function execution until after a certain period of inactivity (e.g., search bar input, window resize). Only the last call in a series triggers.
Throttling: Limits how often a function can be called within a given time frame (e.g., scroll events, button clicks). Guarantees execution at regular intervals.
