Frontend Interview Cheat Sheet
HTML (10 Qn + Ans)
• Semantic tags? → Tags with meaning (header, article, footer), good for SEO.
• div vs span? → div = block-level, span = inline.
• Inline vs block vs inline-block? → Inline: no new line. Block: full width. Inline-block: inline + allows
width/height.
• HTML vs HTML5? → Adds semantic tags, audio/video, canvas, storage APIs.
• LocalStorage vs SessionStorage? → Local = permanent, Session = till tab closes.
• link vs script? → link = CSS, script = JS.
• Meta charset vs viewport? → Charset = encoding. Viewport = responsive scaling.
• ol vs ul? → ol = ordered list, ul = unordered list.
• What are iframes? → Embed webpage inside another.
• GET vs POST? → GET = in URL, POST = in body, secure.
CSS (10 Qn + Ans)
• Position types? → Relative, Absolute, Fixed, Sticky.
• Inline, internal, external CSS? → Inline in tag, internal style, external .css file.
• Flexbox vs Grid? → Flex = 1D, Grid = 2D.
• Pseudo-class vs pseudo-element? → Class = :hover, Element = ::before.
• em vs rem vs % vs px? → px fixed, em parent, rem root, % container.
• CSS specificity? → Inline > ID > Class > Element.
• Transition vs Animation? → Transition = simple change, Animation = multiple keyframes.
• Inline-block vs block vs inline? → Inline-block allows dimensions inline.
• Responsive vs adaptive design? → Responsive = fluid, Adaptive = fixed breakpoints.
• Responsive navbar? → Use media queries.
JavaScript (10 Qn + Ans)
• var vs let vs const? → var function-scope, let/const block-scope.
• Hoisting? → Declarations move to top.
• == vs ===? → == loose compare, === strict.
• Arrow functions? → Short syntax, no own this.
• Closure? → Inner fn remembers parent scope.
• Event bubbling vs delegation? → Bubbling child→parent, Delegation = parent handles.
• Promise vs callback? → Promise = cleaner async, callback = nested.
• Sync vs async JS? → Sync = sequential, Async = non-blocking.
• null vs undefined? → null = empty, undefined = not assigned.
• ES6 features? → Arrow fn, template literals, destructuring, spread, modules.
React (10 Qn + Ans)
• What is JSX? → HTML + JS syntax.
• Functional vs class component? → Functional = hooks, Class = lifecycle.
• State? → Component data that updates UI.
• Props? → Data parent→child, read-only.
• Virtual DOM? → In-memory DOM diffing.
• React Hooks? → useState, useEffect, etc.
• Controlled vs uncontrolled comp? → Controlled by React, uncontrolled by DOM.
• Context API? → Global state, avoid prop drilling.
• Router v5 vs v6? → v6 uses element prop, nested routes easier.
• Form handling? → Controlled inputs + useState.
Coding (10 Qn + Ans)
• Reverse string → [Link]('').reverse().join('')
• Factorial recursion → fact(n){ return n<=1?1:n*fact(n-1); }
• Max in array → [Link](...arr)
• Palindrome → str===[Link]('').reverse().join('')
• Count vowels → [Link](/[aeiou]/gi).length
• FizzBuzz → loop 1-100 with %3/%5 conditions.
• Flatten array → [Link](Infinity)
• Debounce → return fn after delay with clearTimeout.
• React To-do list → useState + map tasks.
• Responsive card → flex/grid + media query.
