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)
youtube.com
YouTube
Everything you need to know about HTTP Caching
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)
youtube.com
YouTube
Optimize Website Load Performance Using Preload and Prefetch
💥 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. Raindotgg 1,073 posts
- 2. Louisville 13.9K posts
- 3. Ortiz 15.7K posts
- 4. #GoAvsGo 1,408 posts
- 5. Nuss 5,476 posts
- 6. Batum N/A
- 7. Miller Moss 1,151 posts
- 8. UCLA 7,406 posts
- 9. Emmett Johnson 1,968 posts
- 10. #Huskers 1,029 posts
- 11. #FlyTogether 1,500 posts
- 12. Bama 13.5K posts
- 13. Oilers 4,291 posts
- 14. Brohm 1,127 posts
- 15. #MASHLE N/A
- 16. #Toonami 1,280 posts
- 17. Nikki Glaser N/A
- 18. Lateef 2,110 posts
- 19. Ty Simpson 3,521 posts
- 20. The ACC 19.6K posts
Something went wrong.
Something went wrong.