Roadmap notes
Capture module-level gaps, repeated mistakes, and what to review before continuing.
1
Module 1: Foundations
Phase 1 of your journey.
4. Improve a functionPRO
How do you check if an object has a property?
5. Throttle
Classical vs prototypal inheritance
13. Deep Clone
AbortController — cancelling async work the right way
14. Event EmitterPRO
How do you reliably check if an object is empty?
66. Promise MethodsPRO
How do you check the data type of a variable?
19. Memoize I
Anonymous functions — what they are and where they shine
86. API RetryPRO
Why array indices make bad React keys
Polyfill: call( )PRO
2
Module 2: Advanced Patterns
Phase 2 of your journey.
aria-label, aria-labelledby, and aria-live in practice
mul(a)(b)(c)
async/await — syntactic sugar over promises
sum(a)(b)(c).....(n)
How to test asynchronous code without flaky tests
Flatten Array
What are common async data loading patterns in React?
Polyfill: map( )
What are React Fragments used for?
City Fetcher APIPRO
How does the box model work in CSS?
promise.all( )PRO
What is React hydration?
promise.allSettled( )PRO
How do you iterate over object properties?
3
Module 3: Mastery
Phase 3 of your journey.
promise.any( )PRO
What does box-sizing: border-box mean?
promise.race( )PRO
What is difference between sync and async function?
Reverse Words in a String
What is the difference between React Node, React Element, and React Component?
promise.reject()
What are the benefits of using hooks in React?
composeAsyncPRO
What tools help find security vulnerabilities?
Sequential AsyncPRO
What are React Portals?
Debounce IIPRO
How does caching improve performance?
Promise MergePRO
4
Module 4: Mastery
Phase 4 of your journey.
How do you decide between React state, context, and external state managers?
ChunkPRO
What is the difference between call( ) and bind( )?
Polyfill: Array.prototype.reduce
What are callback functions?
JSON.stringify (Basic)
What is the difference between call( ) and apply( )?
JSON.stringify II (Advanced)PRO
What is the prototype pattern?
React Hook: useTimeoutPRO
What is the difference between Client side rendering and Server side rendering?
FillPRO
What is the Beacon API?
Data Merging (Gym Sessions)PRO
Using closures for private variables
5
Module 5: Mastery
Phase 5 of your journey.
React Tic-Tac-Toe Engine
What are common data fetching pitfalls in React?
Performant Image Slider
What AJAX actually means today
API Search and Render ImagePRO
What is code coverage?
Accessible React Tabs
querySelector vs getElementById
Recursive File Explorer
CommonJS vs ES Modules
Build a Resilient Test Runner
Common 'this' pitfalls
Traffic Light
Explain the composition pattern in React
Star RatingPRO
6
Module 6: Mastery
Phase 6 of your journey.
What is Cross-Site Scripting (XSS)?
Accordion
How do you organize code in a JavaScript project?
Auto-completePRO
What is clickjacking and how do you prevent it?
Modal System
Critical Rendering Path
PaginationPRO
What is CSRF?
Multi-step Form
What is the CSS display property and what are examples of its use?
Toast NotificationPRO
What is callback hell?
Virtual List (Windowing)PRO
What is CSS selector specificity and how does it work?
7
Module 7: Mastery
Phase 7 of your journey.
Custom Query HookPRO
What are the pros and cons of compiling to JavaScript?
Kanban Board (DnD)
What are the pros and cons of CSS preprocessors?
Nested Checkboxes (Tri-state)PRO
What do you like and dislike about CSS preprocessors?
Product DashboardPRO
How does positioning work in CSS?
Form Builder (JSON Schema)PRO
What is the command pattern?
Infinite ScrollPRO
How do you handle browser-specific styling issues?
Analog ClockPRO
What is the difference between controlled and uncontrolled components in React?
Memory GamePRO
8
Module 8: Mastery
Phase 8 of your journey.
default vs named export
Poll WidgetPRO
What is a static method in a class?
Transfer ListPRO
How do you debug React applications?
Progress BarPRO
What is the difference between debouncing and throttling?
Global Scope, Function Scope, and Block Scope
What is dangerouslySetInnerHTML and why is it dangerous?
How do you optimize DOM manipulation?
What is doctype in HTML in start of HTML file?
Why is document.write() considered bad practice?
Attribute vs property in the DOM
What is currying in JavaScript?
What is the Constraint Validation API?
9
Module 9: Mastery
Phase 9 of your journey.
What is the event loop in JavaScript?
What are common CSS efficiency gotchas?
How do you handle errors in asynchronous operations?
What are ES2015 classes and how do they differ from ES5 function constructors?
What is event delegation in JavaScript?
What are error boundaries in React?
Error handling with try...catch
How does error propagation work in JavaScript?
Describe event capturing in JavaScript
What is forwardRef() in React?
What are default parameters?
What CSS frameworks have you used?
What is difference between a map object and a plain object in JavaScript?
Why are functions first-class objects?
What data structure is used to represent the DOM?
10
Module 10: Mastery
Phase 10 of your journey.
What is the decorator pattern?
What is destructuring assignment?
What is the purpose of break and continue?
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?
How would you style an SVG?
What is Cross-Origin Resource Sharing (CORS)?
Where should CSS links and JS scripts be placed in HTML?
How do iframes communicate with the parent page?
Why is input validation important?
What are the HTTP methods?
How would you implement dark mode and light mode?
Why does React recommend against mutating state?
What are iterators and generators in JavaScript?
11
Module 11: Mastery
Phase 11 of your journey.
How do floats work in CSS?
JavaScript data types
Why do we use polyfills?
How do you import and export modules?
What are JavaScript modules?
What are primitive values and reference values in JavaScript?
What is Inversion of Control?
What are data attributes in HTML?
What is the difference between dot notation and bracket notation?
What is JSX and how does it work?
Explain the presentational vs container component pattern
How do you identify performance bottlenecks?
What tools do you use to measure performance?
What is difference between preventDefault() and stopPropagation()?
How does lazy loading improve performance?
12
Module 12: Mastery
Phase 12 of your journey.
What is prototypal inheritance?
How does the prototype chain work?
How do you detect if JavaScript is disabled?
What is React Fiber?
What is feature detection?
How does re-rendering work in React?
Promises vs callbacks
What are Proxies in JavaScript?
What are some common React anti-patterns?
What are the common pitfalls of React context?
What is React Suspense?
What are the building blocks of HTML5?
How do you reset a component state in React?
How do you redirect to a new page in JavaScript?
What are reflows and repaints?
13
Module 13: Mastery
Phase 13 of your journey.
What are render props in React?
What is the factory pattern?
What is JSONP?
What is the difference between Flexbox and Grid?
What are the rules of React hooks?
What are best practices for handling sensitive data?
How do you serve retina graphics?
What are server-sent events?
How does server-side rendering work in React?
How do you implement secure authentication and authorization?
What is semantic HTML and why does it matter for accessibility?
What are security headers?
What are Progressive Web Apps?
Shallow copy vs deep copy
Rest parameters in JavaScript
14
Module 14: Mastery
Phase 14 of your journey.
How do SPAs affect SEO?
Why use the callback format of setState?
How do you convert a Set to an Array?
sessionStorage vs localStorage vs cookies
What is a higher order function?
What is a symbol type?
How would you handle image failures in production?
What is SQL injection and how do you prevent it?
Can callbacks be synchronous?
state vs props in React
What is the Flux pattern?
innerHTML vs textContent
What is Test Driven Development?
How do you convert a string to a number in JavaScript?
What is the ternary operator?
15
Module 15: Mastery
Phase 15 of your journey.
What is cookie?
What is the Key Prop in React?
Can we pass function to initial state? What is difference between passing value and passing function?
What are CSS sprites?
Different ways to bind 'this' in JavaScript
'this' binding in event handlers
How does the this keyword work in JavaScript?
How to truncate text using CSS only
What are pseudo-elements in CSS?
What is the useMemo hook in React?
Unit vs integration vs end-to-end testing
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 are the key differences between var, let, and const in JavaScript?
16
Module 16: Mastery
Phase 16 of your journey.
What is the useCallback hook in React?
How does the useEffect dependency array work?
What are tagged templates in JavaScript?
What are Web Vitals?
What is array destructuring?
What are the different ways to create objects in JavaScript?
How do you visually hide content but keep it accessible to screen readers?
What is an async thunk?
What is the difference between inline, inline-block, and block in CSS?
What is an arrow function?
What happens when you type a URL into a browser and hit enter?
What is a closure in JavaScript?
What is AB Testing?
What is the difference between responsive and adaptive design?
What is recursion in JavaScript?
17
Module 17: Mastery
Phase 17 of your journey.
What is object destructuring?
What is a thunk?
Where Do We Use Observer Pattern in Frontend Development?
How do you write good unit tests?
What is Temporal Dead Zone (TDZ) in JavaScript?
How do you serve content in multiple languages?
How do z-index and stacking contexts work?
What are workers in JavaScript?
Explain few methods to center elements in webpages?
Adding, removing, and mutating DOM elements in vanilla JS