Curriculum Series

Critical Rendering Path

Curriculum

All Concepts302 items

Accessibility

aria-label, aria-labelledby, and aria-live in practice

CSS Mastery

What is a Block Formatting Context?

What does box-sizing: border-box mean?

How does the box model work in CSS?

How do you handle browser-specific styling issues?

Explain few methods to center elements in webpages?

What are CSS clearing techniques?

How do you use CSS Grid?

Where should CSS links and JS scripts be placed in HTML?

How does positioning work in CSS?

What are the pros and cons of CSS preprocessors?

What do you like and dislike about CSS preprocessors?

What is CSS selector specificity and how does it work?

What are CSS sprites?

How do you detect if JavaScript is disabled?

What are common CSS efficiency gotchas?

What is feature detection?

What is the difference between Flexbox and Grid?

How do floats work in CSS?

How to improve website performance?

How would you style an SVG?

What is the difference between inline, inline-block, and block in CSS?

What are Progressive Web Apps?

What are pseudo-elements in CSS?

What are reflows and repaints?

What is the difference between Reset and Normalize CSS?

What is the difference between responsive and adaptive design?

How do you serve retina graphics?

What is semantic HTML and why does it matter for accessibility?

How do you serve pages for feature-constrained browsers?

Comparing CSS translate() and absolute positioning: When to use each?

How to truncate text using CSS only

How do you visually hide content but keep it accessible to screen readers?

What happens when you type a URL into a browser and hit enter?

What is Responsive Design?

How do z-index and stacking contexts work?

Frontend AI

Streaming protocols compared: SSE vs WebSockets vs HTTP/2 Push vs chunked transfer

AbortController and how it composes with fetch + ReadableStream

TextDecoder({ stream: true }): why UTF-8 boundaries break naïve streaming

From token generation to character render: the full streaming pipeline

RAG: where does the frontend's responsibility start and end?

JavaScript

Anonymous functions — what they are and where they shine

async/await — syntactic sugar over promises

What is the difference between async and defer in JavaScript?

Attribute vs property in the DOM

What is the purpose of break and continue?

What is the difference between call( ) and apply( )?

What is the difference between call( ) and bind( )?

What are callback functions?

How do you check the data type of a variable?

How do you reliably check if an object is empty?

How do you check if an object has a property?

What is a static method in a class?

Classical vs prototypal inheritance

Using closures for private variables

What is code coverage?

What is the command pattern?

Common 'this' pitfalls

CommonJS vs ES Modules

What are the pros and cons of compiling to JavaScript?

What is the Constraint Validation API?

What is currying in JavaScript?

What is the difference between currying and partial application?

What data structure is used to represent the DOM?

What are default parameters?

What is doctype in HTML in start of HTML file?

Why is document.write() considered bad practice?

What is the DOM structure?

What is the difference between dot notation and bracket notation?

What is the difference between == and === in JavaScript?

Error handling with try...catch

How does error propagation work in JavaScript?

What are ES2015 classes and how do they differ from ES5 function constructors?

What is the event loop in JavaScript?

What is the factory pattern?

Why are functions first-class objects?

How do you get query string values in JavaScript?

What is a higher order function?

Hoisting pitfalls and how to avoid them

How do you create a constructor function?

How to prevent the UI from blocking during a long running task?

What are the building blocks of HTML5?

How would you handle image failures in production?

How do you import and export modules?

What is Inversion of Control?

What are the different ways to iterate over arrays?

How do you iterate over object properties?

What are iterators and generators in JavaScript?

JavaScript data types

What are primitive values and reference values in JavaScript?

Promises vs callbacks

What is prototypal inheritance?

How does the prototype chain work?

What is the prototype pattern?

What are Proxies in JavaScript?

Reference vs Syntax Error

Scoping Generics

What are server-sent events?

How do you serve content in multiple languages?

sessionStorage vs localStorage vs cookies

How do you convert a Set to an Array?

What is the srcset attribute?

What is difference between stopPropagation() and stopImmediatePropagation()?

How do you convert a string to a number in JavaScript?

What is the purpose of the switch statement?

What is a symbol type?

What is difference between sync and async function?

Can callbacks be synchronous?

What are template literals?

What is Test Driven Development?

How does the this keyword work in JavaScript?

What does typeof operator do?

What are the different types of errors in JavaScript?

What are the key differences between var, let, and const in JavaScript?

What are the different ways to create objects in JavaScript?

What does preventDefault() do?

What is AB Testing?

What is an arrow function?

What is array destructuring?

What is an async thunk?

What is callback hell?

What is hoisting in JavaScript?

What is Immutability?

What is singleton pattern?

What is Temporal Dead Zone (TDZ) in JavaScript?

What is a thunk?

Why do we use polyfills?

Window object vs Document object

What are workers in JavaScript?

What is the difference between XMLHttpRequest and fetch?

React Ecosystem

AbortController — cancelling async work the right way

Adding, removing, and mutating DOM elements in vanilla JS

What AJAX actually means today

Why array indices make bad React keys

How to test asynchronous code without flaky tests

What are common async data loading patterns in React?

What are the benefits of using hooks in React?

How does caching improve performance?

What is the difference between Client side rendering and Server side rendering?

How do you organize code in a JavaScript project?

What is Code Splitting?

What are common data fetching pitfalls in React?

Explain the composition pattern in React

What is the difference between controlled and uncontrolled components in React?

What is Cross-Site Scripting (XSS)?

What is the CSS display property and what are examples of its use?

What CSS frameworks have you used?

What is dangerouslySetInnerHTML and why is it dangerous?

What are data attributes in HTML?

What is the difference between debouncing and throttling?

How do you debug React applications?

What is the decorator pattern?

default vs named export

What are design patterns?

What is destructuring assignment?

Global Scope, Function Scope, and Block Scope

How do you optimize DOM manipulation?

What are error boundaries in React?

How do you handle errors in asynchronous operations?

Describe event capturing in JavaScript

What is the Flux pattern?

What is forwardRef() in React?

What are the HTTP methods?

How would you implement dark mode and light mode?

What are JavaScript modules?

What is JSX and how does it work?

What is the Key Prop in React?

How does lazy loading improve performance?

Can we pass function to initial state? What is difference between passing value and passing function?

How do you identify performance bottlenecks?

What tools do you use to measure performance?

Explain the presentational vs container component pattern

What is difference between preventDefault() and stopPropagation()?

What is progressive rendering?

querySelector vs getElementById

How does re-rendering work in React?

What are some common React anti-patterns?

What are the common pitfalls of React context?

What is React Fiber?

What are React Fragments used for?

What is React hydration?

What is the difference between React Node, React Element, and React Component?

What are React Portals?

How do you decide between React state, context, and external state managers?

What is React strict mode?

What is React Suspense?

How do you redirect to a new page in JavaScript?

What are render props in React?

How do you reset a component state in React?

Rest parameters in JavaScript

What are the rules of React hooks?

How does server-side rendering work in React?

Why use the callback format of setState?

Shallow copy vs deep copy

How do SPAs affect SEO?

Spread operator in JavaScript

state vs props in React

What is static generation?

What is the strategy pattern?

What are tagged templates in JavaScript?

What is the ternary operator?

How do you test React applications?

What testing tools do you use?

Different ways to bind 'this' in JavaScript

'this' binding in event handlers

Unit vs integration vs end-to-end testing

What is the difference between useEffect and useLayoutEffect?

What is 'use strict' in JavaScript?

What is the useCallback hook in React?

How does the useEffect dependency array work?

What is the useId hook in React?

What is the useMemo hook in React?

What is the useReducer hook in React?

What is the useRef hook in React?

What happens when the useState setter function is called in React?

What is the Virtual DOM in React?

What is a closure in JavaScript?

What is object destructuring?

Where Do We Use Observer Pattern in Frontend Development?

Why does React recommend against mutating state?

How does the window.history API work?

How do you write good unit tests?

Web Fundamentals

Critical Rendering Path

Cross-Site Request Forgery (CSRF) Attacks

CORS Explained: Cross-Origin Resource Sharing

CORS Preflight in Practice: Credentials, Simple Requests & Misconfigurations

Content Security Policy (CSP)

Why is HTTPS Secure? Understanding TLS/SSL

Authorization Best Practices

Cookie Security & Session Hardening: SameSite, HttpOnly, Secure

Core Web Vitals: LCP, INP & CLS

Performance Optimization Trade-offs

Critical Resource Prioritization: Optimize Loading Order

Code Splitting: Optimize Bundle Size with Dynamic Imports

Tree Shaking: Eliminate Dead Code from Your Bundle

Lazy Loading: Load Resources On-Demand

Resource Hints: Preload, Prefetch & Preconnect

Text Compression: Gzip and Brotli

Image & Video Optimization: Modern Formats & Techniques

Adaptive Loading: Optimize for Device & Network

List Virtualization: Render Large Lists Efficiently

Web Workers vs Main Thread: Offloading Heavy Work

Memory Leaks in Frontend Apps: Detection & Prevention

Managing Third-Party Scripts: Optimization Strategies

How CDNs Work: Edge Delivery, Caching & Performance

HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation

Service Workers & Offline Strategy: Cache First, Network First & Update Lifecycle

PWA Fundamentals: Manifest, Installability & Offline UX

Script Loading: async vs defer

Event Loop: Understanding JavaScript Execution Model

JavaScript Module Systems: CJS vs ESM vs UMD

Dynamic Module Loading: import() Function

Import on Interaction: Load When User Interacts

Import on Visibility: Lazy Loading with IntersectionObserver

Browser Rendering Pipeline & Layout Thrashing

Rendering Strategies: CSR vs SSR vs SSG vs ISR

Streaming SSR: Progressive HTML Streaming

Islands Architecture: Independent Component Hydration

React Server Components: Zero-JS Server Rendering

Framework Reactivity: React, Vue, Svelte & Solid

HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend Performance

DNS Resolution: Path, TTL, Caching & Frontend Impact

Cross-Site Scripting (XSS) Attacks

State Management: Choosing the Right Solution

Redux: Predictable State Container (RTK + RTK Query)

React Query (TanStack Query): Server State Caching

Data Fetching Patterns: REST, GraphQL, tRPC & Real-time

GraphQL Fundamentals for Frontend: Shape, Caching, and Tradeoffs

gRPC-Web Fundamentals: Browser Constraints and Proxy Model

Caching Strategies: Client, Server & Edge

Data Normalization: Organizing State for Performance

API Design Best Practices: Pagination, Errors, Versioning & Type Safety

API Versioning Strategies for Frontend Compatibility

Pagination: Offset vs Cursor-Based

Rate Limiting & API Resilience: Retries, Backoff, Jitter, Idempotency

How Frontend Developers Can Handle Millions of API Requests Without Crashing Everything

Browser Storage: Cookies, SessionStorage, LocalStorage, IndexedDB

Real-time Communication: WebSockets, SSE & Polling

WebRTC: Real-Time Communication in the Browser

Build & Deployment: Monorepo, CI/CD, Strategies & Release Safety

Web Performance

What is the Beacon API?

What is difference between a map object and a plain object in JavaScript?

What is event delegation in JavaScript?

Garbage Collection

What is recursion in JavaScript?

What is tree shaking?

What are Web Vitals?

Web Security

What is clickjacking and how do you prevent it?

What is content security policy (CSP)?

What is Cross-Origin Resource Sharing (CORS)?

How do iframes communicate with the parent page?

innerHTML vs textContent

What is the same-origin policy?

How do you implement secure authentication and authorization?

What are security headers?

What tools help find security vulnerabilities?

What are best practices for handling sensitive data?

What is SQL injection and how do you prevent it?

What is cookie?

Why is input validation important?

Overall Progress0%

Critical Rendering Path

Finished reading?

Mark this topic as solved to track your progress.

cross site request forgery csrf attacks