Front-End Technical Question Examples

Introduction

All the questions in this lesson are open-ended technical questions, similar to what you would face in a real front-end interview.
That means you won't get options to choose from, instead, you'll be asked directly about a concept and expected to explain it clearly. For example: “How does the event loop work in JavaScript?” or “What's the difference between relative and absolute positioning in CSS?”

Sometimes an interviewer may offer hints if you get stuck, but the focus is always on your ability to explain concepts out loud. Practicing this way helps you build clarity and confidence, which is exactly what clients and teams are looking for.

HTML Questions

1. What is the difference between semantic and non-semantic HTML elements?
2. Why is the <meta charset="UTF-8"> tag important in HTML?
3. Explain the use of the <picture> tag and how it relates to responsive images.
4. What is the purpose of the <label> element, and how does it help with accessibility?
5. How do the hidden attribute and aria-hidden differ?
6. What is the difference between <section>, <div>, and <article>?
7. When should you use <header> and <footer> elements?
8. Explain the difference between an <iframe> and embedding content with fetch + rendering in JavaScript.
9. How do you preload fonts or critical assets in HTML?
10. What is lazy loading of images in HTML, and how is it supported in modern browsers?

CSS Questions

1. How is CSS specificity calculated? (IDs, classes, elements, inline)
2. What's the difference between display: none and visibility: hidden?
3. How do rem and em units differ, and when should each be used?
4. Explain the CSS Box Model and how padding, border, and margin influence layout.
5. What is the difference between position: absolute, fixed, relative, and sticky?
6. What is a CSS custom property (variable), and how can it be used with fallback values?
7. Describe how flex and grid layouts differ and when you might choose one over the other.
8. What is the difference between transition and animation in CSS?
9. How does z-index stacking context work?
10. What are CSS pseudo-classes and pseudo-elements? Give examples (e.g. :hover, ::after).

JavaScript Questions

1. Explain a closure and provide a simple example.
2. How does the this keyword behave in JavaScript? Name a few contexts.
3. What are the differences between == and ===?
4. What is hoisting (for variables and functions)?
5. How do Promises, async/await, and .then() chaining interrelate?
6. Explain event delegation and when you’d use it.
7. What is prototypal inheritance and how does it differ from classical inheritance?
8. What are the primitive types in JavaScript, and how do null, undefined, and undeclared differ?
9. What is the event loop in JavaScript and how do microtasks/macrotasks factor in?
10. How does error handling work with try/catch, Promises, and async/await?

React Questions

1. What is the Virtual DOM and why does React use it?
2. What are props and state? How do they differ?
3. What are React hooks? Name some common ones (e.g. useState, useEffect).
4. Explain how useEffect works and what the dependency array does.
5. What is a controlled component vs an uncontrolled component in forms?
6. What is the purpose of the key prop when rendering lists?
7. What is memoization in React (React.memo, useMemo, useCallback)?
8. How would you handle side-effects or cleanup in functional components?
9. What is "lifting state up" and when would you do it?
10. How do you optimize performance in a React app (e.g., memoization, lazy loading, splitting bundles)?

System Design Questions

1. How would you design a scalable chat application?
   Consider message delivery, real-time updates (WebSockets or WebRTC), message persistence, typing indicators, and handling offline/online states. Think about scalability for thousands of users, and how to keep the UI responsive under heavy load.

2. What are the key considerations for building a responsive design?
   Beyond media queries, discuss flexible layouts, fluid typography, responsive images, mobile-first design, and collaboration with designers. Highlight trade-offs between pixel-perfect design and technical feasibility.

3. How would you implement a real-time collaboration feature?
   Think of Google Docs style editing. Talk about syncing changes, conflict resolution, Operational Transformation (OT) or CRDTs, WebSocket communication, and showing user presence in the UI.

4. What are the best practices for performance optimization in web applications?
   Cover initial load time, code-splitting, image optimization, caching, lazy loading, memoization, virtualization, and avoiding unnecessary re-renders in frameworks like React. Also mention how to measure performance (Lighthouse, Web Vitals).

5. How would you design a scalable image processing system?
   This involves uploading, storing, resizing, and serving images efficiently. Think about using CDNs, responsive image formats (WebP/AVIF), background processing, caching, and handling multiple devices with different resolutions.

6. How would you architect a design system to ensure consistency across multiple applications?
   Talk about component libraries, design tokens, theming, versioning, documentation, and governance. Explain how you'd balance flexibility for teams with strict consistency across products.

7. What strategies would you use to ensure accessibility (a11y) is built into a design system from the start?
   Cover semantic HTML, ARIA attributes, keyboard navigation, color contrast, screen reader support, and accessibility testing. Show that accessibility is not an afterthought but a baked-in principle.

8. How would you handle internationalization (i18n) and localization (l10n) in a large-scale front-end application?
   Consider dynamic language packs, date/time/number formatting, RTL (right-to-left) support, translations, fallback strategies, and performance when loading different locales.

9. How would you design a component library that balances flexibility with consistency?
   Discuss API design for components, composition vs configuration, prop-driven customization, theme support, and guardrails to prevent misuse. Show how to empower developers while avoiding "too much freedom."

10. What considerations would you keep in mind when integrating authentication and authorization into a front-end system?
    Mention secure token handling (JWT, cookies), protecting routes, role-based UI rendering, handling refresh tokens, login/logout UX, and protecting against vulnerabilities like XSS or CSRF.

How to Use These Questions

Don't treat these as a checklist to memorize. Use them as a diagnostic tool:

• If you can answer quickly and clearly, move on.
• If you struggle, mark the topic and revisit it later with deeper study.
• Mix them into your daily prep to stay sharp.