What are the concepts to prepare for a Software Engineer - Frontend Interview?

Internet is an endless ocean and it's hard to find all the learning resources in one place. Well, if you are worried what you should study to crack the javascript interview, well I got your back. I will provide a detailed study plan on how to crack frontend interview. Remember, don't think of it as a chore but as something you will learn that makes you a better javascript developer. Let's get started.

HTML&CSS

  • What is viewport, explain it's properties and configurations?
  • What are the latest tags in HTML5?
  • CSS selectors
  • CSS variables
  • Boxmodel
  • Flexbox
  • Difference between display:none, visibility:hidden and opacity:0
  • What happens when a url is entered into a web browser?
  • Asset loading using async, defer, preload, prefetch
  • How HTML rendering works
  • Difference between em, rem, px
  • Position relative, absolutes

Javascript

  • Promises and their available properties(implement polyfills)
  • Async Await and how it differs from Promises
  • Arrow functions vs normal functions, explain what 'this' refers in both
  • Closures
  • Hoisting for var function let const
  • Types of scopes in JS
  • Memoization, Garbage Collection
  • Class, inheritance
  • Event loop(check how promises work differently)
  • Capturing, Bubbling, Event delegation
  • Execution context and Execution stack in JS
  • JS optimizations
  • Deep copy, shallow copy - pitfalls using spread operator when there is an object inside an object
  • Call, Apply, Bind -> Implement bind using call and apply
  • Currying and it's applications
  • Use of generator(linked to async await vs promises)
  • Web Optimization
  • Implement debounce and throttling
  • Prototypal inheritance
  • Primitive, non primitive types and differences
  • Override inbuild type methods using prototypal inheritance
  • Array Higher Order Functions

Frameworks

  • Difference between DOM vs Virtual DOM and why is it optimized(diffing algo refer)
  • What does react/vue solve that jquery couldn't?
  • SSR vs SPA, tradeoffs, major learnings
  • Why Redux/VueX, why not localstorage
  • What is PWA and how do you implement it
  • Optimizations in the framework
  • Comparing frameworks
  • Which framework would you go for and why
  • Approach for learning new frameworks

Architecture

  • Implement a snake game
  • Implement a 2D square that moves across a room at an angle with given speed
  • Write down component breakdown for facebook newsfeedpage
  • Let's say you have a page full of stats(like trading site where things change all the time), how would you implement it

Well, that's a lot, isn't it? Don't worry, I will be covering all of those topics soon and make you feel comfortable with the above mentioned concepts. Always remember, knowledge is power and in the case of interviews, it's your leverage. See you soon!