Frontend Flashcards
What is the CSS Box Model?
The Box Model describes how every HTML element is structured and spaced. It consists of:
- Content: The actual content of the element.
- Padding: Space between the content and the border.
- Border: The edge around the padding.
- Margin: The space outside the border that separates the element from others.
What is the Document Object Model (DOM)?
The DOM is a tree-like programming interface for web documents where each HTML element is a node. It allows JavaScript to manipulate the document, such as changing styles, adding elements, or handling events.
What is event bubbling in JavaScript?
Event bubbling is the process where an event starts from the target element and propagates up through its ancestors. For example, a click event on a button inside a div will first trigger the button’s handler, then the div’s.
What is Event Capturing in JavaScript?
Event capturing is the phase where an event propagates from the root element down to the target element. It occurs before the bubbling phase and allows handling events during this downward propagation.
What determines the specificity of CSS rules?
Specificity is calculated as:
- Inline styles (e.g., style=”…”) → Highest specificity.
- IDs → Higher than classes and attributes.
- Classes, attributes, and pseudo-classes → Higher than element selectors.
- Element selectors → Lowest specificity. When multiple rules apply, the one with the highest specificity is used.
What is the difference between relative and absolute units in CSS?
-
Relative Units: Scale based on other elements or settings, for example
rem, which is based off of the font size of the root element (<html>), often influcenced by browser settings. -
Absolute Units: Fixed sizes that don’t scale or adapt, like
px(pixels). They remain the same regardless of screen size or user preferences.
What is the event loop in JavaScript?
The event loop allows JavaScript to handle asynchronous tasks (e.g., setTimeout, Promises). It processes tasks from the call stack and the task queue, ensuring the program continues running without blocking.
What is a closure in JavaScript?
A closure is a function that retains access to its outer scope, even after the outer function has executed. It enables encapsulation and data persistence.
What is hoisting in JavaScript?
Hoisting moves variable and function declarations to the top of their scope during compilation. Variables declared with var are hoisted but not initialized, while let and const are hoisted but in a “temporal dead zone.”
What are promises in JavaScript?
A promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
How does async/await simplify working with promises?
async/await simplifies handling promises by making asynchronous code look synchronous. Using await, execution pauses until the promise resolves or rejects, avoiding the need for .then() chains and improving readability.
What is the purpose of CSS media queries?
Media queries enable conditional application of styles based on screen size, orientation, resolution, or other properties.
Why is semantic HTML important?
Semantic HTML uses meaningful tags (e.g., <header>, <article>, <footer>), which improves:
- Accessibility: Assistive technologies can navigate content more effectively.
- SEO: Search engines understand content structure better.
- Readability: Easier to understand for developers.
Debouncing vs. Throttling
- Debouncing: Delays function execution until after the last event (e.g., only triggering a search when the user stops typing for 300ms).
- Throttling: Ensures a function runs at most once in a specified interval, regardless of how many events occur.
What are the steps in the browser rendering process?
- Parse HTML: Build the DOM.
- Parse CSS: Create the CSSOM.
- Build Render Tree: Combine DOM and CSSOM to include only visible elements with computed styles.
- Layout: Calculate size and position of elements in the Render Tree.
- Paint: Render pixels on the screen.
