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