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.

Mid-Level Frontend Developer Interview Questions

Unlock All Interview Questions

Why Practice Mid-Level Frontend Developer Questions?