Frontend Interview Questions (Part 5)

Question 1. How do you implement responsive design?

• Media Queries → Apply styles for different breakpoints.
• Flexible Units → Use %, em, rem, vw/vh for scalable layouts.
• Fluid Images → max-width: 100% to adapt images to container size.
• Modern Layouts → CSS Grid/Flexbox for flexible structure.

---

Question 2. Difference between CSS variables and SCSS variables?

CSS Variables (--var)

• Native to browsers, live at runtime.
• Can be updated dynamically with JavaScript.

• Example:

  :root {
    --main-color: blue;
  }
  .btn {
    background: var(--main-color);
  }
  

SCSS Variables ($var)

• Exist only at compile time (preprocessing).
• Cannot be changed dynamically after build.

• Example:

  $main-color: blue;
  .btn {
    background: $main-color;
  }
  

👉 Key Difference: CSS vars = runtime & dynamic, SCSS vars = build-time & static.

---

Question 3. Difference between transitions and animations?

• Transitions

  • Define changes between two states.
  • Triggered by user interaction (hover, click).
  • Example: transition: all 0.3s ease;.

• Animations

  • Use keyframes for multiple intermediate states.
  • Run automatically or loop infinitely.
  • Example: @keyframes fadeIn { from {opacity: 0} to {opacity: 1} }.

👉 For performance: prefer transform & opacity changes (GPU accelerated) → avoid reflow.

---

Question 4. What are Promises and async/await? What’s their relationship?

Promise

• Represents the result of an async operation (pending → fulfilled/rejected).
• Handled with .then(), .catch().

async/await

• Syntactic sugar over Promises.
• await pauses execution until Promise resolves.
• Code looks synchronous, improving readability.

Notes

• Use Promise.all() for parallel tasks.
• Always wrap in try/catch for error handling.
• Async functions always return a Promise.

👉 Summary: Promise = async abstraction, async/await = cleaner syntax to use it.

---

Question 5. What is a RESTful API?

• API design style based on REST principles:

  • Resource-based: /users/1 = fetch user #1.
  • Stateless: server does not remember client state between requests.
  • Cacheable: HTTP caching supported (Cache-Control, Expires).
  • Client-Server Separation: frontend and backend are independent.

• Alternatives: gRPC, GraphQL.

---

Question 6. What are HTTP methods?

• GET → Retrieve resource.
• POST → Create resource.
• PUT → Replace resource entirely.
• PATCH → Update part of resource.
• DELETE → Delete resource.
• HEAD → Fetch headers only.
• OPTIONS → Discover supported methods (used in CORS preflight).

---

Question 7. Explain HTTP status codes.

• 1xx: Informational (request processing).
• 2xx: Success (200 OK, 204 No Content).
• 3xx: Redirection (needs additional action).
• 4xx: Client error (400 Bad Request, 404 Not Found).
• 5xx: Server error (500 Internal Server Error).

👉 Clients use these codes to interpret request outcomes. 👉 Libraries like Axios treat 200–299 as resolved, others as rejected.

---

Question 8. Explain Debouncing vs Throttling.

• Debouncing

  • Group many events into one.
  • Runs only after a pause.
  • Example: search suggestions after user stops typing.

• Throttling

  • Ensures event fires at most once per interval.
  • Example: scroll event handler every 200ms.

👉 Both improve performance by reducing excessive function calls.

---

Question 9. What is Micro-Frontend Architecture?

• Concept of applying microservices principles to frontend.
• Splits a large app into smaller, independently deployable frontends.

Evolution

• Early: used iframes (bad UX).
• Modern: Webpack Module Federation → dynamically load components across apps.

Benefits

• Independent teams & deployments.
• Mix of different frameworks possible.

Challenges

• Shared state, data flow, and UX consistency.

---

Question 10. What is JWT, and what are its pros/cons?

Structure

1. Header → algorithm & type.
2. Payload → claims (user data).
3. Signature → ensures integrity (prevents tampering).

Pros

• Stateless: server doesn’t store session.
• Works across domains (not tied to cookies).

Cons

• Token is long (bandwidth overhead).
• Payload is base64-encoded, not encrypted → sensitive info should not be stored.

---

Question 11. Why is React called “React”?

• Because it reacts to state changes.
• UI is a function of state: when state changes, React efficiently re-renders the UI.

---

Question 12. What is Webpack, and why use it?

Definition

• A module bundler for JavaScript applications.
• Collects and bundles JS, CSS, images, etc. into optimized files.

Features

• Dependency graph creation.
• Loaders for preprocessing.
• Plugins for optimization.
• Tree-shaking (remove unused code).

👉 Without bundlers, large apps would require hundreds of <script> tags.

---

Question 13. What is Webpack’s dependency graph?

• A graph built by Webpack starting from the entry point.
• Traces all import/require dependencies.
• Helps Webpack decide what to include/exclude in the final bundle.

---

Question 14. What is CSS-in-JS, and what are its drawbacks?

What

• Write CSS inside JS.
• Enables dynamic styles (based on props/state).

How

• Styles injected into DOM at runtime via JS.

Drawbacks

• No static CSS file → caching harder.
• Increases JS bundle size.
• Debugging harder (auto-generated class names).
• Possible layout shifts (CLS) until JS runs.

---

Question 15. What is FCP (First Contentful Paint)? Causes of bad FCP and improvements?

Definition

• Time from navigation until first piece of DOM content (text, image, etc.) is rendered.

Causes of Poor FCP

• Large JS bundle (slow parsing/execution).
• Heavy CSS blocking render.
• Assets not cached/CDN optimized.

Improvements

1. Use CDN & caching.
2. Bundle analysis → remove unused JS.
3. Code splitting & lazy loading.
4. Prioritize critical resources (preload).
5. Optimize CSS (minify, inline critical CSS).

---