Frontend · Fresher-relevant
HTML and CSS interview questions on semantic markup, Flexbox, Grid, specificity, and responsive design fundamentals.
What is the CSS box model?
Tip: Every element is a box of content, padding, border, and margin. box-sizing: content-box (default) sizes only the content with width; border-box includes padding and border in the declared width — most developers set border-box globally for predictable layouts.
Explain Flexbox vs CSS Grid and when to use each.
Tip: Flexbox is one-dimensional (a row or a column) — ideal for navbars, toolbars, and distributing items along an axis. Grid is two-dimensional (rows and columns together) — ideal for page and card layouts. They compose: Grid for the macro layout, Flexbox within cells.
How does CSS specificity work?
Tip: Specificity is scored as inline > id > class/attribute/pseudo-class > element. Higher specificity wins; ties go to the later rule. !important overrides normal rules (avoid it). Keep selectors low-specificity so they stay overridable and maintainable.
What is the difference between position relative, absolute, fixed, and sticky?
Tip: relative offsets an element from its normal spot while keeping its space. absolute removes it from flow and positions it against the nearest positioned ancestor. fixed positions against the viewport. sticky toggles between relative and fixed based on scroll within its container.
Why does semantic HTML matter?
Tip: Tags like header, nav, main, article, and footer convey meaning to assistive tech and search engines, improving accessibility and SEO. Use heading levels in order, label form controls, and reserve div/span for styling-only wrappers.
How do you make a layout responsive?
Tip: Use fluid units (%, rem, fr, min/max), media queries at content-driven breakpoints, mobile-first defaults, and flexible images (max-width:100%). Modern CSS adds clamp() for fluid type and container queries to respond to a component's own size.
What is the difference between display none, visibility hidden, and opacity 0?
Tip: display:none removes the element from layout and the accessibility tree (no space, not focusable). visibility:hidden hides it but keeps its space. opacity:0 makes it invisible but it still occupies space and remains interactive. Pick based on whether you need layout space and interactivity.
What causes layout reflow and how do you minimise it?
Tip: Reflow recalculates geometry when you change layout-affecting properties or read layout (offsetHeight) interleaved with writes. Minimise by batching DOM reads then writes, animating transform/opacity (compositor-only) instead of top/left/width, and using will-change sparingly.
InterviewEra generates role-specific questions using your actual projects and skills. Get scored feedback on technical depth, clarity, and structure — free to start.