Question 1

How do you optimize images for the web?

Accepted Answer

- Compress images (e.g., tools like TinyPNG) to reduce file size.
- Use appropriate formats: JPEG for photos, PNG for transparency, WebP for modern support.
- Implement responsive images with `srcset` for different resolutions.
- Lazy load offscreen images to improve load time.

Question 2

How do you approach debugging a CSS layout issue?

Accepted Answer

- Use browser dev tools to inspect elements and check computed styles.
- Isolate the issue by disabling styles incrementally.
- Verify box model values (margin, padding) and check for overflows.
- Test with simpler layouts to pinpoint the cause.

Question 3

What is the difference between `flexbox` and CSS Grid?

Accepted Answer

- Flexbox: 1D layout (row or column), ideal for components.
- CSS Grid: 2D layout (rows and columns), suited for page layouts.
- Flexbox aligns items dynamically; Grid offers precise placement.
- Often used together for complex designs.

Question 4

What are some techniques to reduce page load time?

Accepted Answer

- Minify CSS/JS, compress images, and use CDNs.
- Implement lazy loading for offscreen content.
- Reduce HTTP requests by bundling files.
- Leverage browser caching with proper headers.

Question 5

What is a CDN, and how does it improve performance?

Accepted Answer

- Content Delivery Network: Distributes assets across global servers.
- Reduces latency by serving content from the nearest location.
- Offloads traffic from the origin server.
- Example: Using Cloudflare for static files.

Question 6

How do you ensure a consistent user experience across devices?

Accepted Answer

- Use responsive design with fluid layouts and media queries.
- Test on real devices or emulators for accuracy.
- Normalize CSS and handle edge cases (e.g., touch vs. click).
- Prioritize performance for slower networks.

Question 7

How do you ensure a smooth animation on the web?

Accepted Answer

- Use `transform` and `opacity` for GPU-accelerated properties.
- Avoid animating layout properties (e.g., `width`, `top`) that trigger reflow.
- Set `will-change` to hint at upcoming changes.
- Test on lower-end devices for performance.

Question 8

How does the browser rendering engine work?

Accepted Answer

- The browser parses HTML to create the DOM and CSS to create the CSSOM.
- These combine into a render tree, excluding invisible elements (e.g., `display: none`).
- Layout (or reflow) calculates positions/sizes, followed by painting pixels to the screen.
- Understanding this helps optimize performance (e.g., minimizing reflows).

Question 9

How do you implement a dark mode feature?

Accepted Answer

- Use CSS custom properties (variables) for colors.
- Toggle with a class or media query (`prefers-color-scheme`).
- Store user preference in `localStorage`.
- Test for readability and contrast.

Question 10

How do you handle a slow API response affecting the UI?

Accepted Answer

- Show loading states (e.g., spinners) to inform users.
- Implement timeouts or retries for failed requests.
- Cache responses (e.g., `localStorage`) for faster subsequent loads.
- Optimize UI to degrade gracefully during delays.

DeVlt

Mid-Level Frontend Developer Interview Questions

Unlock All Interview Questions

Why Practice Mid-Level Frontend Questions?

DeVlt