Frontend Developer Fundamentals - Study Guide

JavaScript Core Concepts

Function Context & Binding

• call() - Invoke function with specific this and arguments
• apply() - Same as call but takes array of arguments
• bind() - Returns new function with bound this
• Arrow functions vs regular functions - this binding differences
• Method borrowing - Using one object's method on another

Asynchronous JavaScript

• Promises - then/catch/finally, chaining, error handling
• Promise.all() - Wait for all, fail-fast behavior
• Promise.allSettled() - Wait for all, get all results regardless
• Promise.race() - First to complete wins
• async/await - Syntactic sugar, error handling with try/catch
• Event loop - Call stack, callback queue, microtask queue
• Callbacks vs Promises vs async/await - When to use each

DOM Manipulation & Events

• Event delegation - Attaching events to parent elements
• Event bubbling vs capturing - Event flow phases
• preventDefault() vs stopPropagation() - Different purposes
• Event object properties - target, currentTarget, type, etc.
• Custom events - Creating and dispatching
• DOM traversal - parentNode, children, siblings
• NodeList vs HTMLCollection - Live vs static collections

Closures & Scope

• Lexical scoping - Where variables are accessible
• Closure creation - Functions retaining outer scope
• Module pattern - Using closures for privacy
• IIFE - Immediately Invoked Function Expressions
• var vs let vs const - Hoisting, block scope, temporal dead zone

Objects & Prototypes

• Prototype chain - How inheritance works
• Object.create() - Creating objects with specific prototype
• Constructor functions - Function-based object creation
• Class syntax - ES6+ syntactic sugar
• hasOwnProperty() - Checking direct properties
• Object methods - keys, values, entries, assign, freeze

Arrays & Iteration

• map/filter/reduce - Functional programming basics
• forEach vs for...of vs for...in - Different iteration methods
• Array methods - push/pop, shift/unshift, splice/slice
• Array.from() - Converting array-like objects
• Spread operator - Array/object spreading
• Destructuring - Array and object destructuring

Type System & Coercion

• typeof vs instanceof - Type checking methods
• Truthy/falsy values - What evaluates to false
• == vs === - Loose vs strict equality
• Type coercion - Implicit type conversion
• null vs undefined - Differences and usage

Browser APIs & Web Standards

Storage & State

• localStorage vs sessionStorage - Persistence differences
• Cookies - Setting, reading, expiration, security
• IndexedDB basics - Client-side database
• History API - Manipulating browser history
• URL API - Parsing and constructing URLs

Network & Communication

• Fetch API - Modern HTTP requests
• XMLHttpRequest - Legacy AJAX
• CORS - Cross-origin request handling
• WebSockets - Real-time communication
• Server-sent events - One-way server communication

Performance & Optimization

• Debouncing vs throttling - Rate limiting techniques
• Lazy loading - Images, components, modules
• Code splitting - Bundle optimization
• Memoization - Caching expensive calculations
• Virtual DOM concepts - Why it exists, how it works
• Critical rendering path - How browsers render pages

CSS & Styling

Layout Systems

• Flexbox - 1D layout system
• CSS Grid - 2D layout system
• Box model - Content, padding, border, margin
• Positioning - Static, relative, absolute, fixed, sticky
• z-index - Stacking contexts

Responsive Design

• Media queries - Breakpoints and device targeting
• Mobile-first approach - Progressive enhancement
• Viewport units - vw, vh, vmin, vmax
• CSS custom properties - CSS variables

Modern CSS

• CSS-in-JS concepts - Styled components, emotion
• CSS modules - Scoped styling
• Preprocessors - Sass, Less basics
• PostCSS - CSS processing tool

Frontend Architecture & Patterns

Component Architecture

• Component composition - Building UIs with components
• Props vs state - Data flow in components
• Controlled vs uncontrolled components - Form handling
• Higher-order components - Component enhancement
• Render props - Sharing logic between components

State Management

• Local vs global state - When to use each
• State lifting - Moving state up the component tree
• Context API - React's built-in state sharing
• Redux basics - Actions, reducers, store (if relevant)
• Immutability - Why and how to avoid mutations

Module Systems

• ES6 modules - import/export syntax
• CommonJS - require/module.exports
• Module bundlers - Webpack, Vite, Parcel basics
• Tree shaking - Dead code elimination

Testing & Debugging

Testing Fundamentals

• Unit vs integration vs e2e - Different testing levels
• Jest basics - Testing framework
• Testing Library - Component testing philosophy
• Mocking - Stubbing dependencies
• Test-driven development - Writing tests first

Debugging Skills

• Browser DevTools - Console, Network, Performance tabs
• Breakpoints - Setting and using effectively
• Error handling - Try/catch, error boundaries
• Source maps - Debugging transpiled code

Build Tools & Workflow

Development Workflow

• Package managers - npm, yarn, pnpm
• Version control - Git fundamentals
• Environment variables - Configuration management
• Hot reload - Development server features

Build Process

• Transpilation - Babel, TypeScript
• Bundling - Module concatenation
• Minification - Code compression
• Asset optimization - Images, fonts, etc.

Security & Best Practices

Web Security

• XSS prevention - Input sanitization
• CSRF protection - Token-based protection
• Content Security Policy - XSS mitigation
• HTTPS importance - Transport security

Code Quality

• Linting - ESLint, Prettier
• Code formatting - Consistent style
• Accessibility - WCAG guidelines, ARIA
• Performance budgets - Keeping apps fast

Study Approach

1. Practice each concept - Don't just read, implement
2. Build projects - Apply concepts in real scenarios
3. Explain concepts - If you can't explain it, you don't know it
4. Review regularly - Spaced repetition for retention
5. Stay current - Web standards evolve constantly

Red Flags to Avoid

• Saying "I can just Google it" for fundamental concepts
• Not understanding the tools you use daily
• Confusing syntax memorization with concept understanding
• Being unable to explain basic JavaScript behavior
• Not knowing when to use different approaches