Web Development Interview Questions and Answers
HTML Questions
Q1: What does a doctype do?
A1: defines the HTML version, ensuring correct browser rendering (e.g., for HTML5).
Q2: How do you serve a page with content in multiple languages?
A2: Use lang attribute (), hreflang for alternate versions, and server-side or JS translations.
Q3: What must you be wary of when designing for multilingual sites?
A3: Text expansion, RTL scripts, font/encoding support, cultural nuances, screen reader accessibility.
Q4: What are data- attributes good for?
A4: data- attributes store custom data in HTML (e.g.,
) for JS manipulation.
Q5: What are the building blocks of HTML5 as an open web platform?
A5: Semantics (), multimedia (
Q6: Difference between cookie, sessionStorage, and localStorage?
A6: Cookie: Sent with requests, expires. sessionStorage: Session-only, 5MB. localStorage: Persistent, 5-10MB.
Q7: Difference between ?
A7: Blocks parsing. Executes when downloaded. Executes after parsing.
Q8: Why CSS in and JS before ? Exceptions?
A8: CSS in for early styling, JS before for DOM loading. Exceptions: Critical JS in .
Q9: What is progressive rendering?
A9: Displays content incrementally (e.g., lazy-loading images) for faster perceived load.
Q10: Why use srcset in an image tag? Browser process?
A10: srcset provides images for different resolutions. Browser picks best based on pixel ratio/viewport.
Q11: Have you used HTML templating languages?
A11: Examples: Handlebars, Pug, EJS for dynamic HTML generation.
Q12: Difference between canvas and svg?
A12: Canvas: Pixel-based, script-driven. SVG: Vector-based, scalable, XML-defined.
Q13: What are empty elements in HTML?
A13: No content/closing tag, e.g.,
, , .
CSS Questions
Q1: What is CSS selector specificity and how does it work?
A1: Inline, Internal and External, ID, classes, elements: Determined rule priority: Inline (1000), IDs (100), classes (10), elements (1). Higher score wins.
Q2: Difference between resetting and normalizing CSS? Which to choose?
A2: Reset: Removes all styles. Normalize: Standardizes styles. Choose normalize for useful defaults.
Q3: Describe Floats and how they work.
A3: float: left/right aligns elements, content wraps around. Used for layouts.
Q4: Describe z-index and stacking context.
A4: z-index sets stacking order. Context formed by position, opacity, transform.
Q5: Describe Block Formatting Context (BFC) and how it works.
A5: Self-contained layout, triggered by overflow: hidden, contains floats, prevents margin collapse.
Q6: Various clearing techniques and their context?
A6: Clearfix (::after with clear: both), clear: both, overflow: hidden. Clearfix for modern layouts.
Q7: How to fix browser-specific styling issues?
A7: Feature detection, vendor prefixes, BrowserStack testing, polyfills/fallbacks.
Q8: How to serve pages for feature-constrained browsers? Techniques?
A8: Progressive enhancement, feature detection, polyfills, graceful degradation.
Q9: Ways to visually hide content for screen readers?
A9: .sr-only (e.g., clip: rect(0,0,0,0)), visibility: hidden, avoid display: none.
Q10: Used a grid system? Preferences?
A10: CSS Grid for complex layouts, Bootstrap for prototyping. Depends on project.
Q11: Used media queries or mobile-specific CSS?
A11: Media queries (@media (max-width: 600px)) for responsive design, mobile-first with min-width.
Q12: Familiar with styling SVG?
A12: Style SVG with CSS (fill, stroke) inline or external, responsive with viewBox.
Q13: Example of an @media property other than screen?
A13: @media print for print-specific styles.
Q14: “Gotchas” for efficient CSS?
A14: Avoid deep selectors, universal selectors, frequent reflows, use shorthand properties.
Q15: Advantages/disadvantages of CSS preprocessors?
A15: Pros: Variables, nesting. Cons: Build complexity, over-nesting risk.
Q16: Likes/dislikes about CSS preprocessors used?
A16: SASS: Like variables, dislike nesting. LESS: Like syntax, dislike adoption. Stylus: Flexible, less used.
Q17: Implement a design with non-standard fonts?
A17: Use @font-face, web fonts (Google Fonts), fallback fonts.
Q18: How does browser match CSS selectors?
A18: Parses right-to-left, checks type, classes, IDs, relationships. Specificity resolves conflicts.
Q19: Describe pseudo-elements and their uses.
A19: ::before, ::after style parts of elements, used for decoration, clearing floats.
Q20: Understanding of box model and rendering different models?
A20: Content + padding + border + margin. box-sizing: content-box or border-box.
Q21: What does * { box-sizing: border-box; } do? Advantages?
A21: Sets border-box for all, simplifies sizing. Advantage: Consistent layouts.
Q22: CSS display property and examples?
A22: Controls layout: block (div), inline (span), flex, grid.
Q23: Difference between inline and inline-block?
A23: Inline: No width/height, flows inline. Inline-block: Allows width/height.
Q24: Difference between nth-of-type() and nth-child()?
A24: nth-child(n): Nth child of parent. nth-of-type(n): Nth of its type.
Q25: Difference between relative, fixed, absolute, static positioning?
A25: Static: Default. Relative: Offset, reserves space. Absolute: Ancestor-based. Fixed: Viewport-based.
Q26: CSS frameworks used? Improvements?
A26: Bootstrap: Trim bulk. Tailwind: Ease learning. Material-UI: Customize branding.
Q27: Used CSS Grid?
A27: Yes, for two-dimensional complex layouts.
Q28: Responsive vs. mobile-first strategy?
A28: Responsive: Desktop-first, adjust down. Mobile-first: Base mobile, enhance up. Prefer mobile-first.
Q29: Worked with retina graphics? Techniques?
A29: Use 2x/3x images with srcset, @media for high-DPI, compress files.
Q30: Why use translate() vs. absolute positioning?
A30: translate(): GPU-accelerated, smooth animations. Absolute: Precise static placement.
Q31: How is clearfix useful?
A31: Contains floats via ::after { clear: both; }, ensures parent wraps children.
Q32: Difference between px, em, rem for font sizing?
A32: px: Fixed. em: Parent’s font size. rem: Root font size.
Q33: Example of a pseudo-class? Use case?
A33: :hover, e.g., button:hover { background: blue; } for interactive effects.
Q34: Difference between block-level and inline elements? Examples?
A34: Block: Full-width (div, p). Inline: Flows inline (span, a).
Q35: Difference between CSS Grid and Flexbox? When to use?
A35: Grid: 2D layouts. Flexbox: 1D linear layouts. Grid for pages, Flexbox for components.
Q36: Difference between fixed, fluid, responsive layouts?
A36: Fixed: Static width. Fluid: Percentage-based. Responsive: Fluid + media queries.
JavaScript Questions
Q1: Explain event delegation.
A1: Single listener on parent handles child events via bubbling, saves memory, supports dynamic elements.
Q2: How does this work in JavaScript?
A2: Refers to execution context: window (global), object (method), new instance (constructor), or set by call/apply/bind.
Q3: Example of this change in ES6?
A3: Arrow functions bind this lexically: () => this.name uses outer context, unlike function().
Q4: How does prototypal inheritance work?
A4: Objects inherit via prototype chain. Properties/methods looked up in prototype until null.
Q5: Difference between null, undefined, undeclared variables?
A5: null: No value. undefined: Declared, no value. undeclared: Not declared, errors in strict mode.
Q6: How to check for these states?
A6: null: x === null. undefined: typeof x === ‘undefined’. undeclared: typeof x === ‘undefined’.
Q7: What is a closure? How/why use it?
A7: Function retains outer scope. Use for privacy, state (e.g., function counter() { let c = 0; return () => c++; }).
Q8: Constructs for iterating object properties and array items?
A8: Objects: for…in, Object.keys(). Arrays: for…of, forEach(), map().
Q9: Difference between Array.forEach() and Array.map()? Why choose?
A9: forEach: No return, side effects. map: Returns new array. Use map for transformations.
Q10: Other popular array iteration methods?
A10: filter(), reduce(), some(), every().
Q11: Use case for anonymous functions?
A11: Callbacks (e.g., setTimeout(() => {}, 1000)) or IIFEs for scoping.
Q12: Difference between host and native objects?
A12: Host: Environment-provided (e.g., window). Native: ECMAScript-defined (e.g., Array).
Q13: Difference between function Person(){}, var person = Person(), var person = new Person()?
A13: function: Declares. Person(): Calls function. new Person(): Creates instance.
Q14: Difference between function foo() {} and var foo = function() {}?
A14: function foo(): Hoisted fully. var foo: Variable hoisted, undefined until assigned.
Q15: What do Function.call and Function.apply do? Difference?
A15: call: Sets this, individual args. apply: Sets this, array args.
Q16: Explain Function.prototype.bind.
A16: Creates function with fixed this and args, e.g., fn.bind(obj)().
Q17: Difference between feature detection, inference, UA string?
A17: Detection: Checks feature (e.g., if (localStorage)). Inference: Assumes feature (unreliable). UA: Parses browser info, risky.
Q18: Explain hoisting.
A18: Declarations (not assignments) moved to top of scope, e.g., var x; hoisted, not x = 5.
Q19: What is type coercion? Common pitfalls?
A19: Auto type conversion (e.g., 5 + “5” = “55”). Pitfalls: Unexpected results, use ===.
Q20: Describe event bubbling.
A20: Events propagate from target up to root, firing handlers unless stopped.
Q21: Describe event capturing.
A21: Events propagate from root to target, rarely used.
Q22: Difference between attribute and property?
A22: Attribute: HTML markup. Property: DOM object, may differ.
Q23: Pros/cons of extending built-in JavaScript objects?
A23: Pros: Custom methods. Cons: Conflicts, compatibility issues.
Q24: Difference between == and ===?
A24: ==: Loose, coerces types. ===: Strict, no coercion.
Q25: Explain same-origin policy for JavaScript.
A25: Restricts cross-origin resource access for security. Relaxed by CORS.
Q26: Why called ternary operator? What does “Ternary” mean?
A26: ?: has three operands (condition ? expr1 : expr2). Ternary means three.
Q27: What is strict mode? Advantages/disadvantages?
A27: “use strict”: Stricter rules. Pros: Error catching, security. Cons: Breaks legacy code.
Q28: Advantages/disadvantages of compiling to JavaScript?
A28: Pros: Type safety, modern syntax. Cons: Build complexity, runtime errors.
Q29: Tools/techniques for debugging JavaScript?
A29: DevTools, console.log(), debugger, ESLint, VS Code debugger.
Q30: Difference between mutable and immutable objects?
A30: Mutable: Changeable (arrays). Immutable: Unchangeable (strings).
Q31: Example of immutable object in JavaScript?
A31: Strings, e.g., str.toUpperCase() returns new string.
Q32: Pros/cons of immutability?
A32: Pros: Predictable, debuggable. Cons: Memory/performance cost.
Q33: Achieve immutability in code?
A33: Use const, Object.freeze(), spread operator.
Q34: Difference between synchronous and asynchronous functions?
A34: Sync: Blocks execution. Async: Non-blocking (e.g., setTimeout).
Q35: What is the event loop?
A35: Manages async tasks, processes call stack, then task queue.
Q36: Difference between call stack and task queue?
A36: Call stack: Sync execution (LIFO). Task queue: Async tasks.
Q37: Differences between let, var, const?
A37: var: Function scope, hoisted. let: Block scope, reassignable. const: Block scope, non-reassignable.
Q38: Change property of const object? How to prevent?
A38: Yes, properties mutable. Prevent with Object.freeze().
Q39: Differences between ES6 class and ES5 function constructors?
A39: ES6 class: Concise, extends. ES5: Verbose, explicit prototype.
Q40: Use case for arrow => function? Differences?
A40: Use: Concise callbacks. Differs: Lexical this, no arguments.
Q41: Advantage of arrow syntax in constructor method?
A41: Lexical this avoids binding issues in callbacks, e.g., event listeners.
Q42: Definition of higher-order function?
A42: Function that takes/returns a function, e.g., map, setTimeout.
Q43: Example of destructuring object/array?
A43: Object: const {name} = obj. Array: const [a, b] = [1, 2].
Q44: Example of ES6 Template Literals?
A44: `Hello ${name}` outputs dynamic string.
Q45: Example of curry function? Why advantageous?
A45: const add = a => b => a + b. Reusability, partial application.
Q46: Benefits of spread vs. rest syntax?
A46: Spread: Expands elements ([…arr]). Rest: Collects args (…args). Both simplify code.
Q47: How to share code between files?
A47: ES modules (import/export), CommonJS (require).
Q48: Why create static class members?
A48: Shared across instances, no need for instantiation, e.g., class Math { static PI = 3.14; }.
Q49: Difference between while and do-while loops?
A49: while: Checks condition first. do-while: Runs once, then checks.
Q50: What is a promise? Use case?
A50: Object for async results. Use: Handle API calls (fetch().then()).
Q51: Using OOP principles in JavaScript?
A51: Encapsulation (closures), inheritance (prototypes/classes), polymorphism (method overriding).
Q52: Difference between event.target and event.currentTarget?
A52: target: Element triggering event. currentTarget: Element with listener.
Q53: Difference between event.preventDefault() and event.stopPropagation()?
A53: preventDefault(): Stops default action. stopPropagation(): Stops bubbling/capturing.
Network Questions
Q1: Why serve assets from multiple domains?
A1: Parallel downloads increase speed (browsers limit connections per domain).
Q2: Process from typing URL to page load?
A2: DNS lookup, TCP connection, HTTP request, server response, DOM parsing, asset loading, rendering.
Q3: Differences between Long-Polling, Websockets, Server-Sent Events?
A3: Long-Polling: Repeated requests. Websockets: Bidirectional, persistent. SSE: Server-to-client stream.
Q4: Explain request/response headers: Expires, Date, Age, If-Modified-Since, Do Not Track, Cache-Control, Transfer-Encoding, ETag, X-Frame-Options.
A4: Expires: Cache expiration. Date: Response creation time. Age: Time in cache. If-Modified-Since: Conditional request. Do Not Track: User privacy preference. Cache-Control: Caching rules. Transfer-Encoding: Data transfer format (e.g., chunked). ETag: Resource version identifier. X-Frame-Options: Frame embedding control.
Q5: What are HTTP methods? List and explain.
A5: GET (retrieve), POST (submit), PUT (update), DELETE (remove), PATCH (partial update), HEAD (headers only), OPTIONS (allowed methods).
Q6: What is domain pre-fetching? Performance benefit?
A6: Browser pre-resolves DNS for linked domains, reducing latency.
Q7: What is a CDN? Benefit?
A7: Content Delivery Network caches assets globally. Benefit: Faster delivery, reduced server load.
Performance Questions
Q1: Tools to find performance bugs?
A1: Chrome DevTools (Performance tab), Lighthouse, WebPageTest.
Q2: Ways to improve website scrolling performance?
A2: Debounce scroll events, use transform for animations, lazy-load off-screen content.
Q3: Difference between layout, painting, compositing?
A3: Layout: Calculates positions (reflow). Painting: Draws pixels. Compositing: Combines layers.
Testing Questions
Q1: Advantages/disadvantages of testing code?
A1: Pros: Bug prevention, reliability. Cons: Time, maintenance.
Q2: Tools for testing functionality?
A2: Jest, Mocha, Cypress, Selenium.
Q3: Difference between unit and integration tests?
A3: Unit: Tests single component. Integration: Tests component interactions.
Q4: Purpose of code style linting tool?
A4: Enforces consistent code style, catches errors (e.g., ESLint).
Q5: Testing best practices?
A5: Write clear tests, cover edge cases, automate, mock dependencies.
General Questions
Q1: What did you learn recently?
Example: Learned CSS Grid for modern layouts.
Q2: What excites you about coding?
Example: Solving complex problems creatively.
Q3: Recent technical challenge and solution?
Example: Fixed slow page load with lazy-loading images.
Q4: Techniques to increase web performance?
A4: Minify assets, use CDN, lazy-load, optimize images.
Q5: SEO best practices used?
A5: Semantic HTML, meta tags, fast loading, mobile optimization.
Q6: Front-end security techniques/issues solved?
A6: Sanitize inputs, use HTTPS, prevent XSS with CSP.
Q7: Actions to increase code maintainability?
A7: Modular code, clear naming, documentation, linters.
Q8: Preferred development environment?
Example: VS Code, Git, npm, Chrome DevTools.
Q9: Version control systems familiar with?
A9: Git, SVN.
Q10: Workflow for creating a web page?
A10: Plan, design, write HTML/CSS/JS, test, deploy.
Q11: Best way to integrate 5 stylesheets?
A11: Combine into one, use CSS modules, or import via preprocessor.
Q12: Difference between progressive enhancement and graceful degradation?
A12: Enhancement: Start basic, add features. Degradation: Start advanced, fallback.
Q13: Optimize website assets/resources?
A13: Compress images, minify CSS/JS, use CDN, cache.
Q14: How many resources does a browser download per domain? Exceptions?
A14: ~6 per domain. Exceptions: HTTP/2 multiplexing, service workers.
Q15: Ways to decrease page load time?
A15: Lazy-load, minify, use async/defer, optimize critical path.
Q16: Tabs vs. spaces in a project?
A16: Follow project convention, use linters for consistency.
Q17: Create a simple slideshow page?
A17: HTML for images, CSS for transitions, JS for navigation/timing.
Q18: Master one technology this year?
Example: React for dynamic UIs.
Q19: Importance of standards and standards bodies?
A19: Ensure compatibility, accessibility (e.g., W3C, ECMA).
Q20: What is Flash of Unstyled Content? Avoid it?
A20: Unstyled content before CSS loads. Avoid: Inline critical CSS, preload fonts.
Q21: ARIA and screenreaders? Website accessibility?
A21: ARIA enhances accessibility (e.g., aria-label). Use semantic HTML, test with screenreaders.
Q22: Pros/cons of CSS vs. JavaScript animations?
A22: CSS: Performant, simple. JS: Flexible, complex control.
Q23: What does CORS stand for? Issue addressed?
A23: Cross-Origin Resource Sharing. Allows safe cross-origin requests.
Q24: Handle disagreement with boss/collaborator?
Example: Discuss calmly, present evidence, find compromise.
Q25: Resources for front-end development/design?
A25: MDN, CSS-Tricks, Smashing Magazine, X posts.
Q26: Skills for a good front-end developer?
A26: HTML/CSS/JS, UX, performance, accessibility, teamwork.
Q27: Role you see yourself in?
Example: Front-end dev building user-friendly interfaces.
Q28: What happens when you enter a URL?
A28: DNS lookup, HTTP request, server response, DOM rendering.
Q29: Difference between SSR and CSR? Pros/cons?
A29: SSR: Server renders HTML (SEO, fast initial load; server load). CSR: Client renders (interactive; slower initial load).
Q30: Familiar with static rendering?
A30: Pre-rendered HTML for static sites, improves speed/SEO.
Q31: What is rehydration?
A31: Client-side JS adds interactivity to server-rendered HTML.
Web Resources and Links
- Front-end-Developer-Interview-Questions/src/questions/performance-questions.md
- Toptal: 37 Essential JavaScript Interview Questions
- JS: Basics and Tricky Questions
- Geeks for Geeks
- Mozilla
- W3Schools
AI is the binary future!
About the Author
