Frontend Flashcards
(31 cards)
What is the DOM in the context of web development?
The DOM (Document Object Model) is a tree-like representation of a webpage’s structure, allowing JavaScript to manipulate HTML elements dynamically.
What is the difference between inline, block, and inline-block in CSS?
inline elements (e.g., <span>) flow within text; block elements (e.g., <div>) take full width; inline-block allows inline flow with block properties like width/height.
How does CSS specificity work?
Specificity determines which CSS rule applies, based on a score: inline styles (1000), IDs (100), classes/attributes (10), elements (1). Higher score wins.
What is a CSS Flexbox, and how is it used?
Flexbox is a layout model for aligning items in a container. Example: display: flex; justify-content: space-between; aligns children horizontally with spacing.
Explain CSS Grid and its advantages.
CSS Grid creates two-dimensional layouts. Example: display: grid; grid-template-columns: 1fr 1fr; makes two equal columns. Advantages: precise control, responsive design.
How do you center a div horizontally and vertically using CSS?
```css
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Explanation: Flexbox centers content in both axes (O(1) layout). */
~~~
What is the difference between relative, absolute, and fixed positioning in CSS?
relative moves an element relative to its normal position; absolute relative to nearest positioned ancestor; fixed relative to viewport, stays on scroll.
What is event bubbling in JavaScript?
Event bubbling is when an event on a child element propagates to its ancestors. Example: A click on a <button> inside a <div> triggers the <div>’s click handler.
How do you prevent default browser behavior in JavaScript?
```javascript
element.addEventListener(‘click’, (e) => {
e.preventDefault();
// Custom logic
});
// Explanation: e.preventDefault() stops default actions, like form submission.
~~~
What is the purpose of addEventListener in JavaScript?
addEventListener attaches an event handler to an element without overwriting existing ones. Example: button.addEventListener('click', () => alert('Clicked'));.
What is a closure in JavaScript, and how is it used in frontend?
A closure is a function retaining access to its outer scope’s variables. Example: function counter() { let count = 0; return () => count++; } used for state encapsulation.
How does this behave in a DOM event handler?
In a DOM event handler, this refers to the element triggering the event. Example: <button onclick='console.log(this)'> logs the button element.
What is a React component, and how do you create one?
A React component is a reusable UI piece returning JSX. Example: function MyComponent() { return <div>Hello</div>; } or class MyComponent extends React.Component { render() { return <div>Hello</div>; } }.
What is the purpose of useState in React?
useState manages state in functional components, returning a state value and updater. Example: const [count, setCount] = useState(0);.
How does the useEffect hook work in React?
useEffect handles side effects after render, like API calls. Example: useEffect(() => { fetchData(); }, [id]); runs when id changes.
What is a controlled component in React?
A controlled component ties form input values to state. Example: <input value={state} onChange={(e) => setState(e.target.value)} />.
How do you optimize React performance with React.memo?
React.memo memoizes a component to prevent re-renders unless props change. Example: const Memoized = React.memo(MyComponent);.
What is the virtual DOM in React?
The virtual DOM is an in-memory representation of the real DOM. React diffs it to minimize actual DOM updates, improving performance.
How do you handle forms in React with multiple inputs?
```javascript
function Form() {
const [form, setForm] = useState({ name: ‘’, email: ‘’ });
const handleChange = (e) => setForm({ …form, [e.target.name]: e.target.value });
return (
<form>
<input name=’name’ value={form.name} onChange={handleChange} />
<input name=’email’ value={form.email} onChange={handleChange} />
</form>
);
}
// Explanation: Uses a single state object for multiple inputs (O(1) updates).
~~~
What is the purpose of useContext in React?
useContext accesses context to share data without prop drilling. Example: const value = useContext(MyContext); retrieves context value.
How do you implement lazy loading in React?
```javascript
const LazyComponent = React.lazy(() => import(‘./Component’));
function App() {
return (
<Suspense fallback={<div>Loading…</div>}>
<LazyComponent></LazyComponent>
</Suspense>
);
}
// Explanation: React.lazy and Suspense defer component loading (O(1) setup).
~~~
What is a CSS preprocessor, and name an example?
A CSS preprocessor adds features like variables and nesting. Example: Sass ($color: red; .box { background: $color; }) compiles to CSS.
How do you handle responsive design in CSS?
Use relative units (%, vw, rem), media queries, and frameworks. Example: @media (max-width: 600px) { .box { font-size: 14px; } } adjusts for small screens.
