Frontend Developer interview questions

These three display types differ in flow and box behavior.

• Block: takes full parent width, starts on a new line (div, p, h1).
• Inline: takes only content width, flows in line, ignores width/height (span, a, strong).
• Inline-block: flows inline but accepts width, height, padding, margin like a block.

Specificity is a score that decides which CSS rule wins for the same element and property.

• Calculated across four categories: inline styles, IDs, classes and pseudo-classes, element selectors.
• Each category outweighs the ones below it, so a higher score always wins regardless of source order.
• !important overrides everything but should be used sparingly.

Every element is a rectangular box made of four layers.

• Content: the text or image area.
• Padding: transparent space between content and border.
• Border: wraps the padding.
• Margin: outer space separating the element from neighbors.
• box-sizing: border-box makes width and height include padding and border, the modern default.

The difference is whether the element stays in the document flow.

• position: relative keeps the element in flow but lets you offset it with top, right, bottom, left without displacing neighbors.
• position: absolute removes it from flow and positions it against the nearest ancestor with a position other than static.
• With no such ancestor, it positions against the initial containing block.

Flexbox is a one-dimensional layout system enabled by display: flex on a container.

• Main axis: the primary direction items flow, set by flex-direction, horizontal by default.
• Cross axis: runs perpendicular to the main axis.
• justify-content aligns items along the main axis; align-items aligns them along the cross axis.

CSS Grid is a two-dimensional layout system for rows and columns.

• You define explicit rows and columns on a container and place items in that grid.
• Flexbox fits one-dimensional layouts where items flow in one direction, like a nav bar or a row of cards.
• Grid wins when you control both dimensions at once, like a page with header, sidebar, main, and footer.

These units differ in what they are relative to.

• px: absolute, does not scale with user or browser settings.
• em: relative to the parent font size, can compound when nested.
• rem: relative to the root html font size, more predictable for global scaling.
• vw and vh: viewport units equal to 1 percent of viewport width or height, useful for full-screen sections.

Build mobile-first and progressively enhance for wider screens.

• Start from a mobile base layout, then add min-width media queries for larger screens.
• Use flexible units like percentages and rem for widths and font sizes.
• Use Flexbox or Grid for layout containers.
• Avoid fixed widths and set max-width on page containers so content does not overflow.

Semantic HTML uses elements that convey the meaning of their content.

• Use header, nav, main, article, section, footer instead of generic divs everywhere.
• Browsers, search engines, and assistive tech read these signals to understand document structure.
• This improves screen reader accessibility, boosts SEO, and makes code easier to read.

Media queries apply CSS only when a condition is met, usually a viewport width.

• A query like @media (min-width: 768px) activates styles only on screens at least 768px wide.
• Combine conditions with and, or target print versus screen with the media type.

z-index controls the stacking order of positioned elements, higher in front.

• It only works on elements with a position other than static, or on flex and grid children.
• A stacking context is a self-contained layer where z-index values are compared only within that group.
• So a child with a huge z-index cannot rise above an ancestor that forms a lower stacking context.

All three hide an element but differ in space, events, and accessibility.

• display: none removes the element from flow, takes no space, and is invisible to screen readers.
• visibility: hidden hides it visually but keeps its space in the layout.
• opacity: 0 makes it transparent but it still takes space, receives clicks, and stays accessible.

The alt attribute gives a text description of an image.

• It shows when the image fails to load and is read aloud by screen readers for visually impaired users.
• A descriptive alt improves accessibility and image SEO.
• For purely decorative images, set alt to an empty string so screen readers skip it.

The cascade decides which rule applies when several target the same element and property.

• It evaluates origin and importance first.
• Then specificity of the selectors.
• Then source order, so when specificity is equal the later rule wins.

Padding is space inside the element, margin is space outside it.

• Padding sits between content and border and takes on the element background color.
• Margin is transparent space between the border and neighboring elements.
• Adjacent vertical margins between blocks collapse to the larger value, which padding never does.

They differ in scope, hoisting, and reassignment.

• var is function-scoped and hoisted, so it can be read before its declaration, causing subtle bugs.
• let and const are block-scoped, living only inside the nearest curly braces.
• const blocks reassignment of the binding but does not make objects or arrays immutable.

Bubbling is how an event travels up the DOM after firing.

• It first triggers handlers on the target element, then on each ancestor up to document.
• Clicking a button inside a div also fires click handlers on the div and its ancestors.
• You stop it by calling event.stopPropagation() inside a handler.

A closure is a function that keeps access to its outer scope variables after that scope returns.

• This works because functions carry a reference to the environment where they were defined.
• A classic example is a counter factory where each call gets its own private count variable.

=== checks value and type, == coerces types before comparing.

• === returns true only when both value and type match exactly.
• == coerces types first, so 0 and false or null and undefined can be equal.
• Prefer === almost everywhere to avoid hard-to-trace coercion surprises.

The value of this depends on how a function is called, not where it is defined.

• In a method call, this is the object before the dot.
• In a standalone call in strict mode, this is undefined.
• Arrow functions have no own this and inherit it from the surrounding lexical scope.