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
medium.com
Building a JavaScript Pagination As Simple as Possible
Recently I’ve been working on a side project and I wanted to build a JavaScript pagination system for certain items on a page. What I…
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 Trends
- 1. Penn State 11K posts
- 2. Sunderland 132K posts
- 3. Indiana 20.2K posts
- 4. Gus Johnson N/A
- 5. Mendoza 8,856 posts
- 6. Arsenal 228K posts
- 7. Texas Tech 10.8K posts
- 8. St. John 7,314 posts
- 9. Jeremiah Smith 2,079 posts
- 10. #iufb 1,805 posts
- 11. Happy Valley N/A
- 12. Julian Sayin 1,095 posts
- 13. #SUNARS 13.1K posts
- 14. Raya 26.2K posts
- 15. Philon 1,717 posts
- 16. #GoDawgs 3,938 posts
- 17. Nick Singleton N/A
- 18. Trossard 20.1K posts
- 19. $SSHIB N/A
- 20. Charlie Becker N/A
Something went wrong.
Something went wrong.