Interview Question
Important concepts
| Area | Topics |
|---|---|
| HTML | Semantic HTML, Block vs inline elements, <head>, <script>, <style>, <link>, <form>, <input>, Form validation/submission |
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, Media Queries |
| JavaScript | Data types, Scope, Closures, this, Variable declaration (var, let, const), Array methods, Object methods, Promises, Classes, Async/Await |
| DOM | DOM creation/manipulation/traversal, Event bubbling/capturing, Event delegation |
| Runtime APIs | fetch(), Storage (localStorage, sessionStorage), Timers (setTimeout(), setInterval()) |
HTML
| Question | Difficulty |
|---|---|
What is the difference between mouseenter and mouseover? | Easy |
Explain the difference between document.querySelector() and document.getElementById() | Easy |
How do <iframe>s on a page communicate? (postMessage API) | Easy |
| How do you add, remove, and modify HTML elements using JavaScript? | Easy |
What is the difference between event.preventDefault() and event.stopPropagation()? | Easy |
What is the difference between innerHTML and textContent? | Easy |
| What is the DOM and how is it structured? | Easy |
| What is semantic HTML and why does it matter? | Easy |
What is the difference between <script>, <script async>, and <script defer>? | Medium |
| What is the difference between Block and Inline elements? | Easy |
CSS
| Question | Difficulty |
|---|---|
| Explain the CSS box model | Easy |
What is the difference between relative, absolute, fixed, and sticky positioning? | Easy |
| What is CSS specificity and how is it calculated? | Medium |
What is the difference between em, rem, %, vh, vw? | Easy |
| How does Flexbox work? What are the main properties? | Medium |
| How does CSS Grid work? When would you use it over Flexbox? | Medium |
| What is a CSS pseudo-class vs pseudo-element? | Easy |
| How do media queries work? | Easy |
What is CSS z-index and stacking context? | Medium |
What is the difference between display: none and visibility: hidden? | Easy |
| Explain CSS custom properties (variables) | Easy |
| What causes layout thrashing and how do you avoid it? | Hard |
JavaScript
| Question | Difficulty |
|---|---|
What is the difference between == and ===? | Easy |
| Explain closures with an example | Medium |
How does this work in JavaScript? | Medium |
| What is the event loop? Explain microtask vs macrotask queue | Hard |
What is the difference between Promise.all and Promise.allSettled? | Medium |
What is hoisting? How does it differ for var, let, const, and functions? | Medium |
| What is debouncing vs throttling? When would you use each? | Medium |
| What is the difference between shallow copy and deep copy? | Medium |
| Explain prototypal inheritance | Hard |
| What is currying? Write a curry function | Hard |
React
| Question | Difficulty |
|---|---|
| What is the virtual DOM and how does React use it? | Easy |
| Explain the React component lifecycle (hooks equivalent) | Medium |
What is the difference between useMemo and useCallback? | Medium |
When would you use useReducer over useState? | Medium |
| What is prop drilling and how do you solve it? | Medium |
| What are controlled vs uncontrolled components? | Easy |
What is reconciliation and what role do key props play? | Medium |
| What is React.memo and when should you use it? | Medium |
What is the difference between useEffect with [] vs no dependency array? | Easy |