Comprehensive front-end interview guide Mega Thread ๐งต Original blog : codewithsimran.substack.com
๐ฅ Machine coding round ๐ฅ 1. Design a pop over (Background should be blur/darker) [youtube.com/watch?v=XH5OW4โฆ] 2. Design an accordion [youtube.com/watch?v=dr8Emhโฆ]
youtube.com
YouTube
Accordion (HTML, CSS and JavaScript)
3. Design a Carousel ๐ It should stop moving/pause on hover ๐ Resume on mouse out ๐ It should be automatically moving ๐ Should have next and previous button for manual options
4. Make a to-do list ๐ It should support add, delete, edit. ๐ Save the to-do to local storage and maintain the previous state on page refresh. 5. A list in JavaScript that supports the following ๐ Pagination [medium.com/geekculture/buโฆ] ๐ Sort / filter / search
6. Design a navbar [youtube.com/watch?v=gXkqy0โฆ] 7. Implement infinite scroll [youtube.com/watch?v=xHm6Abโฆ] 8. Typeahead / autocomplete using trie ( Facebook, good to have )
youtube.com
YouTube
Learn Infinite Scroll in JavaScript
9. Create an analog clock [youtube.com/watch?v=9DxdE_โฆ] 10. Implement a poll widget 11. Implement folder / files structure ( trending , must do ) ๐ Each folder can be expanded/collapsed ๐ Each folder can have either files/sub folders Can also be asked as a nested comments problem
youtube.com
YouTube
I Created an Analog Clock Using Pure HTML, CSS and JavaScript
12. Design an app like Jira (Atlassian) ๐ Should be able to move cards between different states like to-do, in progress, dev complete
๐ฅ JavaScript ๐ฅ 1. How does JavaScript work / Event loop [youtube.com/watch?v=m0_e9hโฆ] 2. Execution context [youtube.com/watch?v=lT0Lf2โฆ] 3. Hoisting [youtube.com/watch?v=7XbfeMโฆ] 4. Scope Chain [youtube.com/watch?v=oS8rtSโฆ]
youtube.com
YouTube
Scope Chain | Lexical environment | Front-end interview series | Ep. 4
5. Var, let, const, temporal dead zone [youtube.com/watch?v=mxqjBtโฆ] 6. this keyword [youtube.com/watch?v=Qew1GYโฆ] 7. call, apply, bind [youtube.com/watch?v=OSjTmEโฆ] 8. Closure [youtube.com/watch?v=qikxEIโฆ] 9. Constructor functions, classes 10. Prototypal inheritance
youtube.com
YouTube
Closures in JS ๐ฅ | Namaste JavaScript Episode 10
11. Implement debounce [youtube.com/watch?v=Zo-6_qโฆ] 12. Implement throttle [youtube.com/watch?v=81NGEXโฆ] 13. Polyfill for map, reduce, filter, foreach [reeversedev.com/polyfill-for-fโฆ] 14. Polyfill for call, apply, bind
youtube.com
YouTube
Throttling in Javascript | Walmart Frontend Interview Question
15. Polyfill for flat method ๐ Infinite depth flatten and flatten by a certain number ๐ Implement both recursive and iterative approaches 16. Currying
17. Given an object make the keys as values and values as keys. Definitely have to handle duplicates and make an assumption that it's values are only String (Src. leetcode) 18. Implement observable ( not very common , good to have )
19. Promises ๐ Polyfill for promises [levelup.gitconnected.com/learn-javascriโฆ] ๐ Polyfill for Promise.all [jsvault.com/promise-all] 20. Implement curry [bigfrontend.dev/problem/implemโฆ] 21. Spread, rest, destructuring 22. Implement setInterval using setTimeout
23. Pollyfill for isArray ๐ Understand different types in JavaScript ๐ Usage of typeof 24. Event delegation [youtube.com/watch?v=3KJI1Wโฆ] and event bubbling [youtube.com/watch?v=aVSf0bโฆ]
youtube.com
YouTube
Event Bubbling, Capturing aka Trickling in Javascript | Oyo UI/Fron...
25. Memoize any function [jsvault.com/memoize-functiโฆ] 26. Implement async series [jsvault.com/async-series] 27. Add event listener to array ( hard? good to have ) [jsvault.com/array-listener] 28. Generator functions ( Intuit ) [youtube.com/watch?v=IJ6Egdโฆ]
youtube.com
YouTube
Learn JavaScript Generators In 12 Minutes
29. Tricky interview questions [linkedin.com/pulse/top-10-tโฆ]
30. Implement performance bottleneck (Hard, for senior JavaScript devs) ๐ Your website makes 1000s of calls on initial page load and you need to optimise this by limiting the active calls to 10 at a time. ๐ Use promises, everytime a promise resolves you can send a new request
๐ฅ Web performance ๐ฅ 1. Critical rendering path (must watch) [udacity.com/course/websiteโฆ] 2. Caching ๐ HTTP requests: Headers like Cache-Control, ETag, and Transfer-Encoding [youtube.com/watch?v=HiBDZgโฆ] 3. Network waterfall 4. Bundle size optimisation ( good to have webpack basics)
5. Async, defer script attributes [youtube.com/watch?v=IrHmpdโฆ] 6. preconnect, preload, prefetch [youtube.com/watch?v=5s7tQjโฆ] 7. Image optimization (jpeg v/s png v/s svg)
๐ฅ Web security ๐ฅ 1. XSS ( understand why we need cookies ) 2. CSRF 3. Content security policy
๐ฅ React ๐ฅ 1. Virtual DOM 2. How does React state (usestate) work internally [dev.to/rembrandtreyesโฆ] 3. How does useEffect work internally 4. Optimization hooks ๐ useMemo ๐ useCallback ๐ How is React.memo different from useMemo ( two very different things )
5. useReducer, useContext hook 6. react-redux vs context API vs passing props
๐ฅ Data structures and algorithms ๐ฅ This is a vast topic and hard to predict for an interview. Practise is key here. For problems by different patterns, go through seanprashad.com/leetcode-patteโฆ Make sure to go through hackernoon.com/14-patterns-toโฆ understand the different patterns.
๐ฅ Design round ๐ฅ 1. Design snake and ladder 2. Design chess 3. Design parking lot 4. Design lift system 5. Design patterns
United States ํธ๋ ๋
- 1. Clay Higgins 22.3K posts
- 2. Scotland 61.1K posts
- 3. Grisham 3,621 posts
- 4. Peggy 6,627 posts
- 5. Cashman 1,031 posts
- 6. Dominguez 3,052 posts
- 7. Saudi 249K posts
- 8. Bellinger 2,353 posts
- 9. #UNBarbie 15.1K posts
- 10. Nicki 119K posts
- 11. Gemini 3 2,607 posts
- 12. Mary Bruce 5,100 posts
- 13. Tierney 7,838 posts
- 14. Khashoggi 52.2K posts
- 15. The House 539K posts
- 16. Shota 9,233 posts
- 17. Woodruff 1,319 posts
- 18. Gleyber Torres 1,362 posts
- 19. Salman 79.8K posts
- 20. #UnitedNationsBarbie 12.8K posts
Something went wrong.
Something went wrong.