HTML, CSS, JavaScript and React interview questions

The box model is how the browser sizes an element: content, then padding, then border, then margin outside.

With content-box, padding and border sit on top of width so a 200px card can overflow its parent.

Padding is space inside the border, so the background still covers it.

Flexbox lays out children in a row or column and lets you align, wrap, and distribute leftover space.

Grid is for two-dimensional layouts where rows and columns must line up, like a dashboard or photo gallery.

The browser scores inline styles, then IDs, then classes and attributes, then elements.

Relative keeps the element in normal flow and lets you nudge it with top or left.

Z-index only applies to positioned elements, or those with certain properties that create a stacking context.

Semantic tags like header, nav, main, and button describe meaning, not just boxes.

I wrap the input in a label or set the label for attribute to the input id.

Alt describes the image for screen readers and when the file fails to load.

Block elements like p and div start on a new line and take full available width.

It tells the phone not to pretend the screen is a wide desktop and then zoom out.

Var is function-scoped and can be redeclared, which surprises people.

A closure is a function that remembers variables from the scope where it was created even after that outer function has returned.

Declarations are moved to the top of their scope during compile, so you can call a function declaration before its line.

In a regular function, this depends on how it is called: object method, call or apply, or undefined in strict mode.

Double equals coerces types, so 1 equals true and empty string equals false in some cases.

Undefined means a variable was declared but never given a value, or a missing object property.

The DOM is the browser's tree of nodes built from HTML so JavaScript can read and update the page.