← Back to all products

Frontend Interview Guide

$39

JavaScript/TypeScript fundamentals, React patterns, CSS challenges, web performance questions, and frontend system design.

📁 8 files🏷 v1.0.0
JSONMarkdownReact

📄 Product Preview

Try the interactive reader and demo tools below, or get the full product with all content unlocked.

📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample

📁 File Structure 8 files

frontend-interview-guide/ ├── LICENSE ├── README.md ├── questions/ │ ├── css-and-layout.md │ ├── frontend-system-design.md │ ├── javascript-fundamentals.md │ ├── react-patterns.md │ └── web-performance.md └── study-plan/ └── frontend-study-plan.md

📖 Documentation Preview README excerpt

Frontend Interview Guide

110+ frontend interview questions with thorough answers, code examples, and difficulty ratings — covering JavaScript/TypeScript fundamentals, React patterns, CSS & layout, web performance, and frontend system design.

Whether you're prepping for your first mid-level frontend role or aiming for a senior position at a top tech company, this guide gives you the technical depth interviewers actually test — not surface-level definitions you could find on a blog.

Table of Contents

  • [What's Included](#whats-included)
  • [How to Use This Guide](#how-to-use-this-guide)
  • [Recommended Study Order](#recommended-study-order)
  • [File Index](#file-index)
  • [FAQ](#faq)
  • [Support](#support)
  • [License](#license)

What's Included

CategoryCountDescription
JavaScript & TypeScript Fundamentals22Closures, event loop, promises, prototypes, this, hoisting, TypeScript generics & utility types
React Patterns22Hooks, reconciliation, state management, performance optimization, compound components, error boundaries
CSS & Layout22Box model, flexbox, grid, specificity, responsive design, stacking contexts, modern CSS features
Web Performance22Core Web Vitals, code splitting, caching, rendering pipeline, image optimization, profiling
Frontend System Design22Component architecture, design systems, data fetching, accessibility, full design walkthroughs
Study Plan13-week structured prep plan with daily topics referencing the actual question files
Total questions110Every question includes a detailed answer, difficulty rating, key points, and many include follow-ups

How to Use This Guide

For Interview Prep (recommended)

1. Start with the study plan (study-plan/frontend-study-plan.md) — it maps out a 3-week daily schedule

2. Work through topic files in order — JavaScript fundamentals first, then React, CSS, performance, and system design

3. Try answering each question yourself before reading the answer — active recall beats passive reading

4. Pay attention to follow-up questions — interviewers frequently dig deeper on the same topic

For Quick Reference

  • Jump directly to any topic via the [File Index](#file-index) below
  • Each file is self-contained — no need to read sequentially
  • Use Ctrl+F / Cmd+F to search within any file

For Mock Interviews

1. Have a friend pick 5-6 random questions across different files

2. Answer each question aloud as if in a real interview (2-3 minutes per question)

3. Check your answer against the guide

4. Focus your remaining study time on topics where you struggled

Recommended Study Order

... continues with setup instructions, usage examples, and more.

📄 Content Sample questions/css-and-layout.md

CSS & Layout

Twenty-two interview questions covering the box model, Flexbox, Grid, positioning, responsive design, and modern CSS features for frontend roles.

Questions

Q1. What is the CSS box model, and how does `box-sizing` change it?

Difficulty: Junior

Answer:

Every element in CSS is a rectangular box made of four layers (from inside out): content, padding, border, and margin.


/* Default box model (content-box) */
.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
  /* Actual rendered width = 300 + 20*2 + 2*2 = 344px */
  /* The 16px margin is outside the box and doesn't affect its width */
}

By default, width and height set only the content area. Padding and border are added on top, making the total box larger than the declared width.

box-sizing: border-box changes this so that width and height include padding and border:


/* With border-box, 300px means the total box is 300px */
.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* Actual rendered width = 300px (content area shrinks to 256px) */
}

The universal reset used in virtually every modern project:


/* Apply border-box globally — the single most impactful CSS reset */
*,

*... and much more in the full download.*
Buy Now — $39 Back to Products