To rock the interview to achieve what you deserve and to improve your concepts about front end technologies, I have consolidated a list of questions and answers. It's a one stop solution for front end interview process.
- JavaScript: Basics and Tricky Questions
- Algorithm Beginners Level
- Intermediate Level Questions
- css: Basics and Tricky Questions
- DOM related Questions
- html: Basic Questions for Beginners
An exclusive list of Angular interview Questions are here
21+ questions and answers (for intermediate)
- What are the differences between
nullandundefined? - What are the differences between
==and===? - How would you compare two objects in JavaScript?
- 11+ true false related questions that will trick you.
- As
[]is true,[] == trueshould also be true. right? - How could you write a method on instance of a date which will give you next day?
- If you want to use an arbitrary object as value of this, how will you do that?
- Write a simple function to tell whether 2 is passed as parameter or not?
- How could you use Math.max to find the max value in an array?
- What the heck is this in JavaScript?
- 21 quick questions that will trick you.
- How could you set a prefix before everything you log? for example, if you log('my message') it will log: "(app) my message"
- What will you see in the console for the following example?
- Look at the code below, you have a for loop if you have setTimeout inside it. If log the loop counter inside setTimeout, what will be logged?
- Look at the code below, I have a property in a object and I am creating a new object where I am setting it to a new value. If I delete that property what will i get if I try to access that property?
- Does JavaScript pass parameter by value or by reference?
- How could you implement cache to save calculation time for a recursive fibonacci function?
- How could you cache execution of any function?
- If you need to implement the following chaining with call back, how will you implement it?
- How could you implement moveLeft animation?
- How would you implement currying for any functions?
21+ questions and answers
- What does float do?
- How can you clear sides of a floating element?
- How can you clear sides of a floating element?
- some tricky questions in rapid fire style
- Are CSS rule names case sensitive?
- Why css selectors mixed up with cases don't apply the styles?
- Does margin-top or margin-bottom has effect on inline element?
- Does padding-top or padding-bottom has effect on inline element?
- Does padding-left or padding-right or margin-left or margin-right has effect on inline element?
- If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
- The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.
- In a HTML document, the pseudo class :root always refers to the <html> element.
- The translate() function can move the position of an element on the z-axis.
- Which one would you prefer among px, em % or pt and why?
- How absolute, relative, fixed and static position differ?
- What are the differences between visibility hidden and display none?
- What are the differences between inline, block and inline-block?
- What are the properties related to box model?
- Does overflow: hidden create a new block formatting context?
- How could you apply css rules specific to a media?
- What is the use of only?
- Does the screen keyword apply to the device's physical screen or the browser's viewport?
- What are the some pseudo classed u have used?
- How do you align a p center-center inside a div?
- How do you optimize css selectors?
- How can you load css resources conditionally?
- Why would you use sprites?
- What is specificity? How do u calculate specificity?
- What is shadow DOM?
- What do you know about transition?
- What are the different css filter you can use?
- What are the reasons to use preprocessor?
- Show you couple of style example and you have to tell what does it do.
Looks like these are for hardcore designer. Hence, didn't make for developers.
- How descendant css selectors are matched? get answer
- How would u implement modularity in css?
- If something doesn't work in a specific browser (IE8), you would u approach this problem?
- How do you test cross-browser compatibility of your site?
- What is the greatest hack you did in css so far?
- What is grid layout?
- How can you make a site responsive?
- Why reset css is useful? or how normalize.css works?
- What do you know about text shadows, box shadows?
20 questions and answers (for beginners)
- Verify a prime number?
- Find all prime factors of a number?
- Get nth Fibonacci number?
- Find the greatest common divisor of two numbers?
- Remove duplicate members from an array?
- merge two sorted array?
- Swap two numbers without using a temp variable?
- Reverse a string in JavaScript?
- How would you reverse words in a sentence?
- Reverse words in place?
- Find the first non repeating char in a string?
- Remove duplicate characters from a sting?
- How will you verify a word as palindrome?
- Generate random between 5 to 7 by using defined function.
- Find missing number from unsorted array of integers.
- Get two numbers that equal to a given number?
- Find the largest sum of any two elements?
- Total number of zeros from 1 upto n?
- Check whether a given string is a substring of bigger string
- Get permutations of a string
- What is the event loop? Can you draw a simple diagram to explain event loop?
- How to you explain closure?
- How would you make sure value of
thisworks correctly insidesetTimeout? - What are the different possible values for
this? - What is debounce and how could you implement debounce?
- How would you communicate with server
- Explain Promise to your grandmother
- If and website is slow how what would you do to make it faster?
- What ES6 feature do you use other than let, var and arrow?
- What build tool you use and tell me some advantages to use that build tool
21+ questions and answers (for intermediate JS Developers)
- Is there any difference between window and document?
- Does document.onload and window.onload fire at the same time?
- Is attribute similar to property?
- What are the different ways to get an element from DOM?
- What is the fastest way to select elements by using css selectors?
- How come, I can't use forEach or similar array methods on a NodeList?
- If you need to implement getElementByAttribute, how would you implement it?
- How would you add a class to an element by query selector?
- How could I verify whether one element is child of another?
- What is the best way to create a DOM element? Set innherHTML or use createElement?
- What is createDocumentFragment and why you might use it?
- What is reflow? What causes reflow? How could you reduce reflow?
- What is repaint and when does this happen?
- How could you make sure to run some JavaScript when DOM is ready like $(document).ready?
- What is event bubble? How does event flows in DOM?
- How would you destroy multiple list items with one click handler?
- Create a button that is destroyed by clicking in it but two new buttons are created in it's place.
- How could you capture all clicks in a page?
- How can you get all the texts in a web page?
- What is defer and async keyword does in a script tag?
- 10 rapid fire questions
15 basic questions and asnwers
- Why do you need doctype?
- What are data-* attributes used for?
- How can you generate a public key in html?
- How do you change the direction of html text?
- How can you highlight text in html?
- Can you apply css to a part of html document only?
- Will a browser make http request for the following cases?
- Which resource would be downloaded first?
- What is an optional tag?
- What are the differences between div and span?
- How would you differentiate between div, section, and article?
- How would you select svg or canvas for your site?
- How to serve html in multiple languages?
- Explain standard and quirks mode.
- What is a semantic tag?
Very rough stage..need to finish (for intermediate)
Very rough stage..need to finish (for expert)
Very rough stage..need to finish (for expert)
- CSS: Generate mock up from provided layout
- JavaScript: Programming challenges for expert
- HR related questions like
- What is your weakness
- Why are you leaving your current job
- Tell me about a project that you weren't able to finish on time
- How you resolve conflict among team members
- How will you introduce a new technology to the team
- Do you prefer to work individually or in a team
- Sell this pen/coke/something to me
- How much salary do you want
- What you don't like you current job
- What you like least in your current job
- Tree Data Structure in JavaScript
- Graph and high order data structure in JavaScript
Inpsired by, darcyclarke, css-tricks, david shariff and some google results. If you want to add any question to this let me know.
