What is React and what are its main features?
React is a JavaScript library for building user interfaces. Its main features include: Virtual DOM, Component-based architecture, Unidirectional data flow, JSX syntax, and React Native for mobile development.
What is the Virtual DOM and how does it work?
The Virtual DOM is a programming concept where a virtual representation of the UI is kept in memory and synced with the 'real' DOM. When state changes, React creates a new virtual DOM tree, compares it with the previous one, and efficiently updates only the changed parts in the real DOM.
What are React Hooks and why were they introduced?
React Hooks are functions that allow you to use state and other React features in functional components. They were introduced to solve problems with class components like: complex logic reuse, wrapper hell, and confusing class syntax.
What is the difference between state and props?
Props are read-only data passed from parent to child components, while state is mutable data managed within a component. Props flow down, while state can be updated within the component using setState or useState.
What is the purpose of useEffect hook?
useEffect is used for handling side effects in functional components. It runs after every render and can be used for: data fetching, subscriptions, or manually changing the DOM. It can also be configured to run only when specific dependencies change.
What is JSX and how does it work?
JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It gets transformed into regular JavaScript function calls during compilation, making it easier to write and understand React components.
What is the difference between controlled and uncontrolled components?
Controlled components are React components that render a form element whose value is controlled by React state. Uncontrolled components are form elements where the form data is handled by the DOM itself. Controlled components provide better control over form data and validation.
What is React Context and when should you use it?
React Context provides a way to pass data through the component tree without having to pass props manually at every level. It's useful for sharing global data like themes, user authentication, or language preferences.
What is the purpose of useMemo and useCallback?
useMemo and useCallback are performance optimization hooks. useMemo memoizes computed values, while useCallback memoizes functions. They prevent unnecessary re-renders and computations in child components.
What is the difference between React.memo and useMemo?
React.memo is a higher-order component that prevents re-renders of a component if its props haven't changed. useMemo is a hook that memoizes computed values. React.memo is for component memoization, while useMemo is for value memoization.
What is the primary way to manage state in a functional React component?
The useState hook is the primary way to manage state in functional components.
How does useReducer differ from useState?
useReducer is better for complex state logic with multiple values or transitions, while useState is simpler for independent state variables.
What is the purpose of the Context API?
The Context API allows you to share state across the component tree without prop drilling.
When should you use Redux instead of Context?
Redux is preferred for large-scale apps with complex state management, debugging needs, or middleware requirements.
What does the useState hook return?
It returns an array with the current state value and a function to update it.
What is prop drilling?
Prop drilling is passing props through multiple layers of components to reach a deeply nested one.
How can you avoid prop drilling?
Use the Context API or a state management library like Redux to avoid prop drilling.
What's a reducer in Redux?
A pure function that takes the current state and an action to return a new state.
What are actions in Redux?
Actions are payloads of information that send data from your app to the Redux store.
What is the role of the dispatch function in Redux?
Dispatch sends an action to the reducer to update the state.
What is lifting state up in React?
Lifting state up means moving state to a common parent component to share it between siblings.
How do you optimize state updates to avoid re-renders?
Use useMemo, useCallback, or split state into smaller pieces to prevent unnecessary updates.
What is the useContext hook?
useContext lets you consume a context value in a functional component.
What's a common use case for Context API?
Sharing themes, user authentication, or global settings across components.
What is Zustand?
Zustand is a lightweight state management library for React with a simple API.
How does MobX differ from Redux?
MobX uses observable state and reactive updates, while Redux relies on immutable state and reducers.
What is a store in Redux?
The store is a single source of truth that holds the entire state of the app.
What's the benefit of immutable state?
Immutable state ensures predictability and easier debugging by preventing direct mutations.
How do you handle async actions in Redux?
Use middleware like Redux Thunk or Redux Saga to handle asynchronous logic.
What's the role of selectors in state management?
Selectors are functions that extract specific pieces of state for reuse and optimization.
What is the Provider component in React?
Provider is a component from Context or Redux that makes state available to child components.
How do you combine multiple reducers in Redux?
Use combineReducers to merge multiple reducers into a single root reducer.
What's a common pitfall with useState?
Not understanding that state updates are asynchronous, leading to stale values.
How do you update an object in useState?
Spread the previous state and override specific properties to ensure immutability.
What's the difference between local and global state?
Local state is managed within a component; global state is shared across the app.
What is Redux Toolkit?
Redux Toolkit is an official package that simplifies Redux setup with utilities like createSlice.
How does useState handle function updates?
Pass a function to the updater to safely compute the next state based on the previous one.
What's a side effect of overusing Context?
Overusing Context can lead to unnecessary re-renders of all consumers.
What is memoization in state management?
Memoization caches computed values to avoid recalculating them on every render.
How do you debug state changes in React?
Use React DevTools or console.log within useEffect to track state changes.
What are React Hooks?
Hooks are functions that let you use state and other React features in functional components.
Explain the concept of hooks in React? Give examples of useState and useEffect hooks?
Hooks let you use state and lifecycle features in functional components. useState manages state (e.g., const [count, setCount] = useState(0)), while useEffect handles side effects (e.g., useEffect(() => { fetchData(); }, [])).
What is the purpose of useEffect?
useEffect handles side effects like data fetching, subscriptions, or DOM manipulation after render.
How do you cleanup in useEffect?
Return a cleanup function from useEffect, which runs before the next effect or on unmount.
What does useMemo do?
useMemo memoizes expensive computations so they only rerun when dependencies change.
Can you call Hooks conditionally?
No, Hooks must be called at the top level of a component, not inside loops, conditions, or nested functions.
What is useCallback used for?
useCallback memoizes a function so it doesn't recreate on every render, useful for passing to child components.
What's the difference between useEffect and useLayoutEffect?
useEffect runs after paint; useLayoutEffect runs synchronously after DOM updates but before paint.
What is useRef?
useRef creates a mutable reference that persists across renders, often used for DOM access.
How do you access a DOM element with useRef?
Pass the ref to the ref attribute of an element, then access it via ref.current.
What happens if you forget a dependency in useEffect?
The effect might use stale values or not run when it should, causing bugs.
What's a custom hook?
A custom hook is a reusable function that encapsulates logic using built-in hooks.
How do you share logic between components with hooks?
Create a custom hook to extract and reuse stateful logic.
What's the purpose of useReducer?
useReducer manages complex state logic, similar to Redux, with a reducer function.
What does useState's lazy initialization mean?
Pass a function to useState to compute the initial value only once, not on every render.
How do you trigger useEffect only on mount?
Use an empty dependency array ([]) to run useEffect only once on mount.
What's the role of dependencies in useMemo?
Dependencies tell useMemo when to recompute the memoized value.
Can useEffect run before render?
No, useEffect always runs after render; useLayoutEffect can run before paint.
What's an example of a side effect?
Fetching data, setting up a subscription, or updating the document title.
How do you conditionally run useEffect?
Add conditions inside useEffect or adjust the dependency array.
What's useImperativeHandle?
It customizes the instance value exposed when using ref with forwardRef.
How does useContext work with hooks?
useContext consumes a context value created by createContext.
What's the benefit of memoizing with useCallback?
It prevents child components from re-rendering due to new function instances.
How do you handle errors in useEffect?
Use try/catch inside an async function called within useEffect.
What's a common mistake with useState?
Assuming state updates immediately instead of on the next render.
How do you debug a hook?
Use console.log in the hook or React DevTools to inspect state and effects.
What's the difference between useMemo and useCallback?
useMemo memoizes a value; useCallback memoizes a function.
Can hooks be used in class components?
No, hooks are designed for functional components only.
What's the purpose of useDebugValue?
It displays a label for custom hooks in React DevTools.
How do you handle multiple useEffects?
Split them by concern or combine related logic into one useEffect.
What replaces componentDidMount in functional components?
useEffect with an empty dependency array mimics componentDidMount.
When does useEffect run by default?
useEffect runs after every render unless you specify dependencies.
What was the purpose of componentWillUnmount?
It was used to clean up resources (e.g., timers) before a component unmounts.
How do you handle updates in a functional component?
Use useEffect with specific dependencies to run code when those values change.
What triggers a re-render in React?
A re-render occurs when state or props change, or the parent component re-renders.
What is the mounting phase?
Mounting is when a component is created and inserted into the DOM.
What happens in the updating phase?
React updates the DOM when state or props change during the updating phase.
What's the unmounting phase?
Unmounting is when a component is removed from the DOM.
What was componentDidUpdate used for?
It ran after a component updated due to state or prop changes.
How do you mimic componentWillUnmount with hooks?
Return a cleanup function from useEffect to run on unmount.
What's the difference between mounting and rendering?
Mounting is the initial DOM insertion; rendering is generating the UI (can happen multiple times).
How does React handle initial render?
React creates the virtual DOM, reconciles it, and commits it to the real DOM.
What's a side effect in the lifecycle?
A side effect is an operation like fetching data that happens after render.
How do you prevent unnecessary re-renders?
Use memoization (React.memo, useMemo) or optimize state updates.
What was componentWillMount used for?
It ran before mounting, but it's deprecated due to misuse and side effects.
How does useLayoutEffect fit into the lifecycle?
It runs synchronously after DOM updates but before the browser paints.
What's the commit phase?
The commit phase is when React applies changes to the real DOM after reconciliation.
How do you log every render?
Use useEffect with no dependencies to log after every render.
What's the role of keys in the lifecycle?
Keys help React track elements across renders to optimize updates.
What happens if a parent re-renders?
Child components re-render unless memoized with React.memo.
What's the difference between render and commit?
Render generates the virtual DOM; commit applies it to the real DOM.
How do you handle errors in the lifecycle?
Use error boundaries with componentDidCatch or static getDerivedStateFromError.
What's getDerivedStateFromProps?
A static lifecycle method that updates state based on prop changes.
Why was componentWillReceiveProps deprecated?
It caused confusion and bugs; use getDerivedStateFromProps instead.
How do you simulate componentDidMount with hooks?
Use useEffect with an empty array to run once on mount.
What's the paint phase?
The browser renders the updated DOM to the screen after React commits changes.
How does React batch state updates?
React batches multiple setState calls in event handlers for performance.
What's the role of shouldComponentUpdate?
It determines if a class component should re-render; not needed in hooks.
How do you handle async lifecycle events?
Use useEffect with async/await inside a separate function.
What's the lifecycle of a functional component?
Mount (render + useEffect), update (re-render + useEffect), unmount (cleanup).
What is JSX?
JSX is a syntax extension for JavaScript that looks like HTML and is used to define React elements.
How do you add a comment in JSX?
Use {/* comment */} inside JSX, as regular HTML comments don't work.
What does the 'key' prop do in a list?
The 'key' prop helps React identify which items in a list have changed, added, or removed.
Can you use if statements directly in JSX?
No, you must use ternary operators or move logic outside the return statement.
How do you bind an event in JSX?
Pass a function to an event handler like onClick={handleClick}, without invoking it.
What's a fragment in JSX?
A fragment (<> </>) lets you group elements without adding extra DOM nodes.
How do you render a list in JSX?
Use map to iterate over an array and return JSX elements with keys.
What's the difference between HTML and JSX?
JSX uses camelCase attributes (e.g., onClick) and requires JavaScript expressions in {}.
How do you apply inline styles in JSX?
Use an object with camelCase properties, like style={{ color: 'red' }}.
What's a ternary operator used for in JSX?
It's used for conditional rendering, e.g., {isTrue ? <p>Yes</p> : <p>No</p>}.
How do you pass props in JSX?
Pass props as attributes, like <Component name='John' />.
What's the role of the children prop in JSX?
Children represent content passed between opening and closing tags of a component.
How do you render dynamic content in JSX?
Use curly braces {} to embed JavaScript expressions, like {user.name}.
What happens if you forget a key in a list?
React warns you, and it may struggle to efficiently update the list.
How do you conditionally render multiple elements?
Use && or map with a condition, e.g., {items.length && <p>Items exist</p>}.
What's the difference between JSX and a string?
JSX is compiled to React.createElement calls, not a string; it's a syntax sugar.
How do you use a component in JSX?
Use it like a tag, e.g., <MyComponent />, with a capital letter.
What's the purpose of dangerouslySetInnerHTML?
It lets you render raw HTML, but it's risky due to XSS vulnerabilities.
How do you handle forms in JSX?
Use controlled components with state and onChange handlers.
What's a common JSX gotcha?
Forgetting that attributes like className use camelCase, not class.
How do you render nothing in JSX?
Return null or an empty fragment (</>).
What's the role of babel in JSX?
Babel transpiles JSX into React.createElement calls for the browser.
How do you spread props in JSX?
Use the spread operator, e.g., <Component {...props} />.
What's a self-closing tag in JSX?
A tag like <img /> that doesn't need a closing tag or children.
How do you type JSX with TypeScript?
Use interfaces for props, e.g., interface Props { name: string }.
What's the difference between {} and {{}} in JSX?
{} embeds expressions; {{}} is for inline style objects.
How do you render an array of components?
Map over the array and return JSX, ensuring each has a unique key.
What's a common error with JSX?
Returning multiple root elements without a wrapper or fragment.
How do you handle input values in JSX?
Use the value attribute and an onChange handler for controlled inputs.
What's the benefit of JSX over vanilla JS?
JSX provides a declarative, HTML-like syntax for building UI.
What is the virtual DOM?
The virtual DOM is a lightweight copy of the real DOM that React uses to optimize updates.
How does the virtual DOM work in React, and why is it beneficial?
React creates a virtual DOM, diffs it with the previous version, and updates only changed parts of the real DOM. It's beneficial for performance by minimizing direct DOM manipulation.
What are the main differences between functional and class components in React?
Functional components use hooks for state and lifecycle, are simpler, and lack this; class components use lifecycle methods and have a more verbose syntax.
What is a React component?
A React component is a reusable piece of UI, typically a function or class that returns JSX.
What's the difference between state and props?
State is internal and managed by the component; props are external inputs passed to it.
What is React's reconciliation process?
Reconciliation is how React compares the virtual DOM with the real DOM to apply minimal updates.
What is React Router?
React Router is a library for handling client-side routing in React apps.
What's an error boundary?
An error boundary is a component that catches JavaScript errors in its child tree.
What's React.memo?
React.memo prevents re-rendering of a component if its props haven't changed.
What's a higher-order component (HOC)?
An HOC is a function that takes a component and returns an enhanced version.
What's the purpose of React.StrictMode?
StrictMode highlights potential problems in development by enabling extra checks.
What's concurrent rendering in React 18?
Concurrent rendering allows React to pause and resume renders for better performance.
What's the role of keys in React?
Keys help React efficiently update lists by identifying unique elements.
What's the difference between controlled and uncontrolled components?
Controlled components use state to manage form data; uncontrolled use refs.
What's the benefit of one-way data flow?
One-way data flow makes data predictable and easier to debug.
What's the purpose of useId in React 18?
useId generates unique IDs for accessibility in server-rendered apps.
How do you optimize React performance?
Use memoization, lazy loading, and avoid unnecessary re-renders.
What's the role of the React DevTools?
React DevTools lets you inspect component hierarchies and state.
What's a render prop?
A render prop is a function prop that a component uses to render content.
What's the difference between React and ReactDOM?
React is the core library; ReactDOM handles DOM-specific rendering.
What's lazy loading in React?
Lazy loading defers loading of components until they're needed, using React.lazy.
What's Suspense in React?
Suspense lets you wait for async content (e.g., lazy-loaded components) to load.
How do you handle events in React?
Use synthetic events like onClick with handler functions.
What's the purpose of forwardRef?
forwardRef passes a ref through a component to one of its children.
What's a portal in React?
A portal renders children into a DOM node outside the parent hierarchy.
What's the difference between client-side and server-side rendering?
Client-side renders in the browser; server-side pre-renders on the server.
What's Next.js?
Next.js is a React framework for server-side rendering and static site generation.
How do you test React components?
Use libraries like Jest and React Testing Library to test rendering and behavior.
What's the role of createElement?
createElement builds React elements; JSX is compiled to it under the hood.
Why is React declarative?
React lets you describe what the UI should look like, and it handles the how.
What is the difference between let and var?
let is block-scoped and doesn't hoist to the top of the function, while var is function-scoped and hoists with an undefined value.
What does const mean in JavaScript?
const declares a variable that cannot be reassigned, but its properties (e.g., in objects) can still be mutated.
What is hoisting in JavaScript?
Hoisting moves variable and function declarations to the top of their scope during compilation, but not their assignments.
What is a closure?
A closure is a function that retains access to its outer scope's variables even after the outer function has finished executing.
What's the difference between == and ===?
== checks equality with type coercion; === checks strict equality without coercion.
What is the purpose of the this keyword?
this refers to the context in which a function is executed, often the object it's called on.
How does JavaScript handle asynchronous code?
JavaScript uses an event loop with callbacks, promises, or async/await to handle asynchronous operations.
What is a promise?
A promise is an object representing the eventual completion or failure of an asynchronous operation.
What does the async keyword do?
async makes a function return a promise and allows the use of await inside it.
What is the purpose of await?
await pauses the execution of an async function until a promise resolves, returning its value.
What's the difference between null and undefined?
null is an intentional absence of value; undefined means a variable has been declared but not assigned.
What is an IIFE?
An Immediately Invoked Function Expression (IIFE) is a function that runs as soon as it's defined, often for scoping.
What does the bind method do?
bind creates a new function with a fixed this value and optional preset arguments.
What's the difference between call and apply?
call invokes a function with a given this and arguments individually; apply uses an array of arguments.
What is event delegation?
Event delegation uses a parent element to handle events on its children, leveraging event bubbling.
What is the event loop?
The event loop manages the execution of asynchronous tasks by processing the call stack and task queue.
What does the spread operator (...) do?
The spread operator expands an iterable (like an array) into individual elements or copies object properties.
What is the rest parameter?
The rest parameter (...args) collects remaining arguments into an array in a function.
What's a higher-order function?
A higher-order function takes a function as an argument or returns a function.
What is currying?
Currying transforms a function with multiple arguments into a sequence of single-argument functions.
What's the difference between map and forEach?
map returns a new array with transformed elements; forEach executes a function without returning anything.
What does filter do?
filter creates a new array with elements that pass a test provided by a callback function.
What is reduce used for?
reduce applies a function to an accumulator and each element to reduce the array to a single value.
What's a prototype in JavaScript?
A prototype is an object from which other objects inherit properties and methods.
What is prototypal inheritance?
Prototypal inheritance allows objects to inherit properties and methods from a prototype object.
What does Object.create do?
Object.create creates a new object with a specified prototype.
What's the difference between deep and shallow copy?
A shallow copy duplicates top-level properties; a deep copy duplicates all nested levels.
How do you create a deep copy of an object?
Use structuredClone, JSON.parse(JSON.stringify(obj)), or a recursive function.
What is a generator function?
A generator function (function*) returns an iterator and can pause execution with yield.
What's the purpose of yield?
yield pauses a generator function and returns a value to the caller.
What is a Symbol?
Symbol is a primitive type for creating unique identifiers, often used as object keys.
What does typeof return for an array?
typeof returns 'object' because arrays are objects in JavaScript.
What is the global object in a browser?
The global object in a browser is window, which contains all global variables and functions.
What's the difference between setTimeout and setInterval?
setTimeout runs once after a delay; setInterval runs repeatedly at an interval.
How do you stop setInterval?
Use clearInterval with the interval ID returned by setInterval.
What is a WeakMap?
A WeakMap is a collection of key-value pairs where keys are objects and are weakly referenced.
What's the benefit of WeakMap over Map?
WeakMap allows garbage collection of keys, preventing memory leaks.
What is a Proxy in JavaScript?
A Proxy wraps an object to intercept and customize operations like property access.
What does Array.isArray do?
Array.isArray checks if a value is an array, returning true or false.
What's the difference between splice and slice?
splice modifies the array by adding/removing elements; slice returns a new array without modifying.
What is a callback function?
A callback is a function passed as an argument to be executed later.
What's callback hell?
Callback hell is deeply nested callbacks that make code hard to read and maintain.
How do promises solve callback hell?
Promises provide a cleaner way to chain asynchronous operations with .then and .catch.
What's the difference between throw and return?
throw raises an error to be caught; return exits a function with a value.
What is strict mode?
Strict mode ('use strict') enforces stricter parsing and error handling in JavaScript.
What does Object.freeze do?
Object.freeze prevents modifications to an object's properties.
What's the difference between for...in and for...of?
for...in loops over enumerable keys; for...of loops over iterable values.
What is a module in JavaScript?
A module is a file that exports and imports functionality using export and import.
What's the difference between CommonJS and ES6 modules?
CommonJS uses require and module.exports; ES6 uses import and export.
What is the purpose of try/catch?
try/catch handles errors by running code in try and catching exceptions in catch.
What is the difference between inline, internal, and external CSS?
Inline CSS is applied directly to HTML elements via the style attribute; internal CSS is defined in a <style> tag within the HTML head; external CSS is written in a separate .css file linked via <link>.
How do CSS Flexbox and CSS Grid differ, and when would you use each?
Flexbox is one-dimensional (rows or columns) and ideal for aligning items or simple layouts; Grid is two-dimensional (rows and columns) and better for complex, grid-based layouts like dashboards.
Explain the concept of specificity in CSS and how it affects the application of styles
Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated by weights (inline > ID > class > element), with higher specificity overriding lower.
What does the box model consist of?
The box model includes content, padding, border, and margin, defining an element's space and layout.
What's the difference between margin and padding?
Margin is the space outside an element's border; padding is the space inside, between the border and content.
What is the purpose of the display property?
The display property controls how an element is rendered, like block, inline, flex, or none.
What does position: absolute do?
position: absolute removes an element from the normal flow and positions it relative to its nearest positioned ancestor.
How does position: relative differ from position: absolute?
position: relative keeps the element in the flow and offsets it from its original position; absolute removes it from the flow.
What is the z-index property?
z-index controls the stacking order of positioned elements, with higher values appearing on top.
What's the difference between block and inline elements?
Block elements take full width and stack vertically; inline elements flow horizontally and only take needed width.
What does float do in CSS?
float moves an element to the left or right, allowing content to wrap around it.
How do you clear a float?
Use clear: both on an element or the clearfix hack (overflow: hidden on a parent).
What is a pseudo-class?
A pseudo-class (e.g., :hover) targets an element's state, like when it's hovered or focused.
What's a pseudo-element?
A pseudo-element (e.g., ::before) styles a specific part of an element, like adding content before it.
What does the * selector do?
The universal selector (*) targets all elements on the page.
What's the difference between em and rem units?
em is relative to the parent's font size; rem is relative to the root (html) font size.
What is the vh unit?
vh is 1% of the viewport's height, useful for responsive layouts.
What does overflow: hidden do?
overflow: hidden clips content that exceeds an element's bounds and hides it.
What's the purpose of box-sizing: border-box?
box-sizing: border-box includes padding and border in an element's total width and height.
How do you center an element horizontally?
Use margin: 0 auto on a block element with a set width.
How do you vertically center an element with Flexbox?
Use display: flex and align-items: center on the parent.
What is the purpose of justify-content in Flexbox?
justify-content aligns flex items along the main axis (e.g., space-between, center).
What does align-items do in Flexbox?
align-items aligns flex items along the cross axis (e.g., center, stretch).
What is the grid-template-columns property?
grid-template-columns defines the number and size of columns in a CSS Grid layout.
What does grid-gap do?
grid-gap (or gap) sets the spacing between grid rows and columns.
What's the difference between visibility: hidden and display: none?
visibility: hidden hides an element but keeps its space; display: none removes it entirely.
What is the purpose of the opacity property?
opacity sets the transparency of an element, from 0 (invisible) to 1 (opaque).
What does transform: translate do?
transform: translate moves an element along the X and/or Y axis without affecting layout.
What is a CSS transition?
A transition smoothly animates property changes over time (e.g., transition: color 0.3s).
What's the difference between transition and animation?
Transitions animate between two states; animations define keyframes for complex sequences.
What does @keyframes do?
@keyframes defines the stages of an animation, specifying styles at different points.
What is the purpose of the media query?
Media queries apply styles based on conditions like screen size (e.g., @media (max-width: 600px)).
What's the mobile-first approach in CSS?
Mobile-first starts with base styles for small screens, then adds media queries for larger screens.
What does the :root selector target?
:root targets the document's root element (usually <html>), often for CSS variables.
What are CSS custom properties?
Custom properties (e.g., --color: red) are variables defined with -- and used with var().
How do you use a CSS variable?
Define it like --main-color: blue, then use it with var(--main-color).
What does the calc() function do?
calc() performs calculations with units (e.g., width: calc(100% - 20px)).
What is the purpose of the nth-child selector?
nth-child targets elements based on their position among siblings (e.g., :nth-child(2n)).
What's the difference between :first-child and :first-of-type?
:first-child targets the first sibling; :first-of-type targets the first of its type.
What does the > selector do?
The child combinator (>) selects only direct children of a parent element.
What is the + selector?
The adjacent sibling selector (+) targets an element immediately following another.
What does the ~ selector do?
The general sibling selector (~) targets all siblings after an element.
What's the purpose of text-overflow: ellipsis?
text-overflow: ellipsis adds '...' to truncated text when it overflows its container.
What does white-space: nowrap do?
white-space: nowrap prevents text from wrapping to a new line.
What is the font shorthand property?
font combines font-style, weight, size, and family (e.g., font: italic bold 16px Arial).
What does line-height control?
line-height sets the space between lines of text.
What's the difference between relative and absolute units?
Relative units (e.g., %, rem) scale with context; absolute units (e.g., px, cm) are fixed.
What is the purpose of object-fit?
object-fit controls how an image or video fits its container (e.g., cover, contain).
What does pointer-events: none do?
pointer-events: none prevents an element from receiving mouse events.
What's the benefit of using CSS resets?
CSS resets normalize default browser styles for consistent cross-browser rendering.
What are semantic HTML elements, and why are they important?
Semantic HTML elements (e.g., <article>, <nav>) describe their meaning or purpose. They're important for accessibility, SEO, and clearer code structure.
How do you create a form in HTML, and what are some common form elements?
Use the <form> tag with attributes like action and method. Common elements include <input>, <textarea>, <select>, <button>, and <label>.
Explain the difference between block-level and inline elements in HTML.
Block-level elements (e.g., <div>, <p>) take full width and start on a new line; inline elements (e.g., <span>, <a>) flow within text and take only needed width.
What is the purpose of the <!DOCTYPE> declaration?
The <!DOCTYPE> declaration tells the browser which HTML version to use, ensuring proper rendering.
What does the <html> tag do?
The <html> tag is the root element of an HTML document, containing all other elements.
What is the role of the <head> tag?
The <head> tag contains metadata, like <title>, <meta>, and links to stylesheets or scripts.
What does the <body> tag contain?
The <body> tag holds the visible content of the page, like text, images, and interactive elements.
What is the purpose of the <title> tag?
The <title> tag sets the page's title, displayed in the browser tab and used by search engines.
What does the <meta> tag do?
The <meta> tag provides metadata, like character encoding (e.g., <meta charset='UTF-8'>) or viewport settings.
What is the <div> tag used for?
The <div> tag is a block-level container for grouping and styling content.
What's the difference between <span> and <div>?
<span> is an inline container; <div> is a block-level container.
What is the <a> tag used for?
The <a> tag creates hyperlinks, using the href attribute to specify the URL.
What does the target attribute do in an <a> tag?
The target attribute specifies where to open the link (e.g., target='_blank' opens in a new tab).
What is the purpose of the <img> tag?
The <img> tag embeds images, using src for the source and alt for accessibility.
Why is the alt attribute important?
The alt attribute provides text for screen readers and displays if the image fails to load.
What does the <p> tag do?
The <p> tag defines a paragraph of text.
What are heading tags?
Heading tags (<h1> to <h6>) define titles and subheadings, with <h1> being the most important.
What is the <ul> tag used for?
The <ul> tag creates an unordered (bulleted) list.
What's the difference between <ul> and <ol>?
<ul> is an unordered list with bullets; <ol> is an ordered list with numbers.
What does the <li> tag do?
The <li> tag defines a list item within <ul> or <ol>.
What is the purpose of the <table> tag?
The <table> tag creates a table for tabular data.
What are <tr>, <th>, and <td> tags?
<tr> defines a table row, <th> a header cell, and <td> a data cell.
What does the colspan attribute do?
The colspan attribute makes a table cell span multiple columns.
What is the <input> tag used for?
The <input> tag creates interactive form controls like text fields, checkboxes, or buttons.
What's the difference between type='text' and type='password' in <input>?
type='text' shows entered text; type='password' masks it with dots.
What does the <label> tag do?
The <label> tag associates text with a form control, improving accessibility.
What is the purpose of the for attribute in <label>?
The for attribute links a <label> to an input by matching its ID.
What does the <select> tag do?
The <select> tag creates a dropdown menu, with <option> tags for choices.
What is the <textarea> tag used for?
The <textarea> tag creates a multi-line text input field.
What does the <button> tag do?
The <button> tag creates a clickable button, often for form submission.
What's the difference between <button type='submit'> and <button type='button'>?
type='submit' submits a form; type='button' is a generic button with no default action.
What is the purpose of the action attribute in <form>?
The action attribute specifies the URL where form data is sent on submission.
What does the method attribute do in <form>?
The method attribute defines how form data is sent (e.g., GET or POST).
What is the <header> tag used for?
The <header> tag defines introductory content or navigation at the top of a page or section.
What does the <footer> tag do?
The <footer> tag contains closing content, like copyright info, at the bottom of a page or section.
What is the <nav> tag?
The <nav> tag defines a navigation section, typically for menus or links.
What does the <section> tag do?
The <section> tag groups related content, often with a heading.
What is the <article> tag used for?
The <article> tag defines standalone content, like a blog post or news item.
What does the <aside> tag do?
The <aside> tag contains supplementary content, like sidebars, related to the main content.
What is the purpose of the <main> tag?
The <main> tag holds the primary content of a page, excluding headers or footers.
What does the id attribute do?
The id attribute assigns a unique identifier to an element for styling or scripting.
What's the difference between id and class attributes?
id is unique to one element; class can be applied to multiple elements.
What is the data-* attribute?
data-* attributes store custom data on elements, accessible via JavaScript.
What does the <script> tag do?
The <script> tag embeds or links to JavaScript code.
What is the purpose of the async attribute in <script>?
The async attribute loads a script asynchronously, not blocking HTML parsing.
What does the defer attribute do in <script>?
The defer attribute loads a script while HTML parses but executes it after parsing completes.
What is the <link> tag used for?
The <link> tag connects external resources, like CSS files, to the HTML document.
What does the rel attribute do in <link>?
The rel attribute specifies the relationship between the HTML file and the linked resource (e.g., rel='stylesheet').
What is the purpose of the lang attribute in <html>?
The lang attribute specifies the document's language (e.g., lang='en' for English).
What does the <iframe> tag do?
The <iframe> tag embeds another HTML page or content within the current page.