Your one-stop guide for mastering frontend interview questions — from HTML & CSS fundamentals to Angular, React, Next.js, and advanced system design topics.
⭐ If you find this useful, please star this repository!
✨ 500+ Interview Questions — Comprehensive coverage from basics to advanced concepts
📚 Single-Page Guides — Each topic is one rich, scrollable document (no navigation hell!)
⚡ Production-Ready — Real-world examples, metrics, and architectural patterns
🎨 Visual Diagrams — Complex concepts explained with Mermaid diagrams
💼 Senior-Level Focus — Questions and answers for senior engineers, architects, and tech leads
🧪 Code Examples — Practical implementations with testing strategies
🎯 Difficulty Levels — Easy, Medium, Hard — know what you're getting into
📱 GitHub-Optimized — Beautiful reading experience directly on GitHub
🔍 Looking for something specific? Check the 📚 Topic Index — Complete searchable index with 56 topics!
Core Technologies: angular react vue nextjs javascript typescript html5 css3 nodejs
Key Concepts: change-detection dependency-injection rxjs observables signals hooks context-api state-management ngrx redux
Advanced: performance optimization accessibility a11y system-design micro-frontends ssr hydration pwa service-workers
Interview Prep: interview-questions interview-prep coding-challenges algorithms frontend-interview senior-engineer staff-engineer tech-lead architect
Testing & Quality: testing unit-testing integration-testing e2e-testing debugging profiling memory-leaks
Build & Tools: webpack vite module-federation lazy-loading code-splitting bundle-optimization
| Topic | Description | Status |
|---|---|---|
| HTML | Semantic HTML, accessibility, forms, APIs | 🚧 Coming Soon |
| CSS | Flexbox, Grid, animations, responsive design | 🚧 Coming Soon |
| JavaScript | ES6+, closures, async, promises, modules | 🚧 Coming Soon |
| Browser Mechanics | DOM, rendering, event loop, performance | 🚧 Coming Soon |
| Framework | Description | Questions | Status |
|---|---|---|---|
| Angular | Complete guide: Change Detection, RxJS, Signals, DI, Routing, Performance | 50+ | ✅ Complete |
| React | Hooks, Context, Performance, Server Components, Suspense | TBD | 🚧 Coming Soon |
| Next.js | App Router, Server Actions, SSR, ISR, Middleware | TBD | 🚧 Coming Soon |
| Vue | Composition API, Reactivity, Pinia, Nuxt | TBD | 🚧 Coming Soon |
| Topic | Description | Status |
|---|---|---|
| Performance Optimization | Web Vitals, lazy loading, code splitting, caching | 🚧 Coming Soon |
| Accessibility (a11y) | WCAG, ARIA, screen readers, keyboard navigation | 🚧 Coming Soon |
| System Design (Frontend) | Architecture, scalability, state management, micro-frontends | 🚧 Coming Soon |
| Micro-Frontends | Module Federation, independent deployments, shared state | 🚧 Coming Soon |
| Category | Description | Status |
|---|---|---|
| Common Functions | Debounce, throttle, deep clone, curry, Promise.all | ✅ Available |
| Algorithms | Sorting, searching, data structures | 🚧 Coming Soon |
| Real-World Scenarios | Auto-complete, infinite scroll, form validation | 🚧 Coming Soon |
Goal: Build a strong foundation in web fundamentals
- Week 1-2: HTML + CSS
- Week 3-4: JavaScript Fundamentals
- Week 5-6: Choose one framework (Angular or React)
Daily Time: 1-2 hours
End Goal: Build a todo app with your chosen framework
Goal: Master a framework and core advanced concepts
Prerequisites: Comfortable with HTML, CSS, JavaScript basics
- Week 1-3: Deep dive into one framework
- Week 4-5: Browser Mechanics + Performance
- Week 6-7: System Design Fundamentals
- Week 8: Practice Coding Challenges
Daily Time: 2-3 hours
End Goal: Build a production-ready SPA with proper architecture
Goal: Master advanced topics and architectural patterns
Prerequisites: 2+ years production experience with a framework
- Week 1-4: Advanced framework patterns
- Angular: Memory leaks, micro-frontends, SSR, performance profiling
- React: Server Components, Suspense, advanced patterns
- Week 5-6: Performance Optimization (deep dive)
- Week 7-8: System Design for Frontend
- Week 9-10: Micro-Frontends Architecture
- Week 11-12: Accessibility + Mock interviews
Daily Time: 2-4 hours
End Goal: Lead a frontend architecture discussion
Goal: Quick review before your interview
Day 1-2: Review Angular Quick Reference or your target framework
Day 3-4: Practice Coding Challenges
Day 5: Review System Design basics
Day 6: Mock interview (practice explaining concepts out loud)
Day 7: Rest + confidence boost
Track your learning journey:
Core Fundamentals:
- HTML (coming soon)
- CSS (coming soon)
- JavaScript (coming soon)
- Browser Mechanics (coming soon)
Frameworks:
- Angular (50 questions) ✅ Available
- React (coming soon)
- Next.js (coming soon)
- Vue (coming soon)
Advanced Topics:
- Performance Optimization (coming soon)
- Accessibility (coming soon)
- System Design (coming soon)
- Micro-Frontends (coming soon)
Coding Challenges:
- Common Functions ✅ Available
- Algorithms (coming soon)
- Real-World Scenarios (coming soon)
All complex topics include visual diagrams:
- 10+ Mermaid Diagrams — Change Detection, DI Hierarchy, NgRx Flow, RxJS Decision Tree, Memory Leaks, etc.
- Architecture Diagrams — Component trees, data flow, routing pipelines
- Performance Visualizations — Before/after optimization comparisons
📁 Browse all diagrams: assets/diagrams/
- Angular Complete Guide — 50 production-level questions covering everything from Change Detection to Micro-Frontends
- Common Functions — Implement debounce, throttle, deep clone, curry, and more
- Visual Diagrams Library — 10 Mermaid diagrams explaining complex concepts
- ✅ Angular Guide — Comprehensive 50-question guide with modern Angular 18+ features
- ✅ Diagram Library — 10 visual diagrams for Angular concepts
- ✅ Coding Challenges — 6 common function implementations
We welcome contributions! Whether it's:
- 📝 Adding new questions
- 🎨 Creating diagrams
- 🐛 Fixing errors
- 💡 Suggesting improvements
Please read: CONTRIBUTING.md
Frontend-Prep-Lab/
│
├── README.md # ← You are here
├── CONTRIBUTING.md # Contribution guidelines
├── LICENSE # MIT License
│
├── frameworks/ # Framework-specific guides
│ ├── angular.md # ✅ Complete (50 questions)
│ ├── react.md # 🚧 Coming soon
│ ├── nextjs.md # 🚧 Coming soon
│ └── vue.md # 🚧 Coming soon
│
├── core/ # Core web fundamentals
│ ├── html.md # 🚧 Coming soon
│ ├── css.md # 🚧 Coming soon
│ ├── javascript.md # 🚧 Coming soon
│ └── browser.md # 🚧 Coming soon
│
├── advanced/ # Cross-cutting topics
│ ├── performance.md # 🚧 Coming soon
│ ├── accessibility.md # 🚧 Coming soon
│ ├── system-design-frontend.md # 🚧 Coming soon
│ └── microfrontends.md # 🚧 Coming soon
│
├── coding-challenges/ # Practical implementations
│ ├── common-functions.md # ✅ Available
│ ├── algorithms.md # 🚧 Coming soon
│ └── scenarios.md # 🚧 Coming soon
│
├── assets/ # Visual assets
│ ├── diagrams/ # Mermaid diagrams
│ └── images/ # Screenshots, illustrations
│
└── ANGULAR_QUESTIONS_ONLY.md # Quick reference (questions only)
No navigation hell. Each topic is one comprehensive, scrollable document. Read it like a book.
Not just "what is X?" — real-world scenarios, performance metrics, architectural trade-offs, debugging strategies.
Diagrams for every complex concept. See the data flow, architecture, and decision trees.
Questions are designed for senior-level interviews: "How would you debug X in production?" not "What does X mean?"
Following latest framework versions (Angular 18+, React 19+, Next.js 15+) and modern patterns.
"Make frontend learning simple, visual, and practical."
This repository believes that:
- One page > 100 small files — Fewer clicks, more learning
- Visuals > Walls of text — See the architecture, understand the flow
- Depth > Breadth — Better to deeply understand 50 topics than superficially know 500
- Real > Theoretical — Production metrics, actual code, real debugging scenarios
This repository is designed for:
- Senior Engineers preparing for staff/principal interviews
- Mid-Level Developers looking to level up
- Tech Leads wanting to refresh architectural knowledge
- Interview Candidates needing structured preparation
- Mentors looking for comprehensive teaching materials
Current Content:
- ✅ 50+ Angular Questions (Complete)
- ✅ 10 Visual Diagrams
- ✅ 6 Coding Challenges
- 🚧 500+ Total Questions (Target)
- Angular complete guide (50 questions) ✅
- Visual diagram library ✅
- React complete guide (50 questions)
- JavaScript fundamentals (50 questions)
- HTML/CSS essentials (40 questions)
- System design for frontend
- Performance optimization deep dive
- Micro-frontend architecture
- Accessibility guide
- StackBlitz embedded examples
- Interactive quizzes
- Video explanations
- Community discussions
- Multiple language support
- PDF exports
- Learning path certificates
- Mock interview platform
Full Roadmap: IMPROVEMENT_ROADMAP.md
- Angular team for excellent documentation
- React team for pushing the ecosystem forward
- All contributors who make this resource better
- The frontend community for inspiration
MIT License - feel free to use this for learning, teaching, or interview prep.
See LICENSE for details.
- Questions about content? Open an issue
- Want to contribute? Read CONTRIBUTING.md
- Found an error? Submit a PR
- Need career advice? Start a discussion
Choose your path:
- 🆕 New to frontend? → Start with HTML (coming soon)
- ⚡ Know basics? → Dive into Angular or React
- 🎯 Senior level? → Explore System Design
- ⏰ Interview tomorrow? → Angular Quick Reference
⭐ Don't forget to star this repo if you find it useful!
Happy Learning! 🎉
This repository covers: Angular interview questions, React interview questions, JavaScript interview questions, frontend interview preparation, senior engineer interviews, staff engineer interviews, change detection, RxJS, signals, state management, NgRx, Redux, performance optimization, accessibility, system design, micro-frontends, SSR, hydration, PWA, testing strategies, coding challenges, algorithms, TypeScript, Next.js, Vue.js, HTML5, CSS3, Flexbox, Grid, Web APIs, browser mechanics, event loop, memory leaks, debugging, profiling, bundle optimization, lazy loading, code splitting, Webpack, Vite, module federation, hooks, context API, server components, suspense, concurrent features, dependency injection, lifecycle hooks, routing, forms, HTTP interceptors, custom directives, dynamic components, Zone.js, AOT vs JIT, Ivy renderer, Web Workers, schematics, view encapsulation, route guards, service workers, and much more!
Perfect for: Senior Software Engineers, Staff Engineers, Principal Engineers, Tech Leads, Engineering Managers, Frontend Architects preparing for technical interviews at top tech companies (FAANG, startups, enterprises).